I am just diving into the Genesis Framework.
In a normal theme, if you want to edit the header, you'd open the header.php file.
But in genesis, the header file is not in the child theme. I have looked around and found a way to add custom header support, but i need some guidance.
The code below is to enable custom header support. I assume this goes into the functions.php file. But how to i actually add code here? What if i want to say pull in a custom field, or add a div to this section, or bring a slider in? How to i actually use this code to let me add html and php into the child theme header?
/** Add custom header support */
add_theme_support( 'genesis-custom-header',
array( 'width' => 960, 'height' => 100, 'textcolor' => '444',
'admin_header_callback' => 'minimum_admin_style' ) );
First you need to remove the header that is currently there. All of this goes into functions.php in your child theme
remove_action('genesis_header','genesis_do_header');
Then is it as simple as building a function to act as your new header.
function injectHeader() { ?>
<div id="title-area">
<h1>Title Here</h1>
<nav>Nav Here and so on</nav>
<p>You can add whatever you want</p>
</div>
<?php }
I normally try to use the same class and ID names so I can preserve some of the built in styles and save myself some work but that's up to you. All you have to do is add whatever you want in the function and call it back in like this,
add_action('genesis_header','injectHeader');
Hope that helps!
Just stumbled upon this post asking the same question. Great solution. An even easier way to customize certain parts of a genesis powered site is using the Genesis Simple Hooks plugin. Just do a search, it's awesome.
Related
Not sure if this is only problem for Elementor full width template, but it seems to override theme header.php. I tried achieving my goal by using elementor custom code feature, but it adds my code somewhere in middle of the tag.
What is the propper way of adding my own custom code as the first thing that is after the element?
You are right Elementor overrides the theme's header.php file so importing your code to this file is not effective. You need to add custom function to earn your goal. With the wp-head action you could add the code right into your header and Elementor will not override it.
Add this code to the functions.php file od your active theme.
add_action('wp_head', 'custom_head_function');
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
UPDATE - If you want to set your code at the top
As sephsekla mentioned in comment, there is a way to set the priority into your action to get it to the top. Try to set value to -999. So, choose a very low number and if there is no other lower number in your plugin or theme you will go straight to the top.
add_action('wp_head', 'custom_head_function', -999);
function custom_head_function(){
?>
YOUR HEADER CODE HERE
<?php
};
Elementor now supports custom code (javascript, html, etc) and supports the specific use of elements in the head of the page.
What you are looking for you can find at the Wordpress Dashboard> Elementor > Custom Code . Then you will be able to add a custom code to the head: https://elementor.com/help/custom-code-pro/
I'm using Woocommerce with a WP theme I have developed. I need to add a class to the Woocommerce div on the product page toget the Woocommerce content to fit within my sites container.
I'm quite new to Wordpress/ Woocommerce.
Please could someone advise how I can do this.
I simply need to change
<div class="woocommerce"> to <div class="container woocommerce">
Thanks
Neil
The best way to do this would be to take a copy of the default WooCommerce template files and then create them for your own theme; there's a lot of documentation surrounding this.
https://docs.woocommerce.com/document/template-structure/#
Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /woocommerce keeping the same file structure but removing the /templates/ subdirectory.
Example: To override the admin order notification, copy: wp-content/plugins/woocommerce/templates/emails/admin-new-order.php to wp-content/themes/yourtheme/woocommerce/emails/admin-new-order.php
there is two options to add class
1. search that particular div/class to woocommerce folder
2. add via jQuery
$('.woocommerce').addClass('container');
incase of multiple woocommerce class in your page please inherit that class from parent.
like:-
$('parentUniqueSelector .woocommerce').addClass('container');
for more detail please share hosted link or example code.
In my case I work with Bootstrap 4 framework, in order to apply .row class to woocommerce div in "my account" page I simply use make-row() mixin, example :
.woocommerce-account{
.woocommerce{
#include make-row();
}
}
Also you can use make-container() mixin, it depends of your project needs.
More infos here
Best way to add a container to every pages might be to use WooCommerce hooks.
To enable WooCommerce support for your theme, add the following lines to your functions.php file:
add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
add_theme_support( 'woocommerce' );
}
After that, use the hooks woocommerce_before_main_content and woocommerce_after_main_content to add your HTML code before and after WooCommerce content:
add_action( 'woocommerce_before_main_content', function() {
echo '<div class="container">'; // Open the container before WooCommerce content
}, 10);
add_action( 'woocommerce_after_main_content', function() {
echo '</div>'; // Close the div tag opened for the container
}, 10);
I'm using a theme total made by me. I need to show Sidebar Login plugin's widget in header.
I tried this in header.php:
<div class="login"><?php the_widget('sidebar-login');?></div>
Page load without error and I have a space occupied by that div, but there is nothing inside. Maybe it is because I insert no $instance and no $args after $widget, but I don't know what they are.Maybe i need specific code for the plugin i linked.Thank you in advance.
Ciao Michele,
are you trying to use Sidebar Login plugin from Mike Jolley?
According to the codex, the_widget method wants the plugin Class Name, not the namespace, your code should work if you use something like this:
<?php the_widget('Sidebar_Login_Widget');?>
If you are using a different plugin you have to check the correct class name in php code.
Not sure if styling (CSS) is possible w/ this php code, but if anyone knows how i can style this ( with colors, etc) please let me know! this is the basic WooCommerce drop-down code that's placed in my template files
<?php the_widget( 'WC_Widget_Product_Categories', 'dropdown=1' ); ?>
Using Plugin :
https://wordpress.org/plugins/widget-css-classes/
Please note that this plugin doesn't enable you to enter custom CSS. You'll need to edit your theme's style.css or add another plugin that allows you to input custom CSS.
Refer this for full article
http://www.wpbeginner.com/wp-themes/how-to-add-custom-styles-to-wordpress-widgets/
I'm running into a curious problem with the Twenty Eleven theme. I have copied the theme to my own folder (using it to create a new theme...I should have gone the child-theme route but...I didn't). So far all is good. Now I want to create a custom verson of the sidebar-page.php template.
I grab the template page that has a sidebar: sidebar-page.php
I make an exact copy, changing the name to sidebar-page2.php
I change the template name of the new file from "Sidebar Template" to "Sidebar Template2"
I upload (no changes to the structure of the template)
I change a page's template to "Sidebar Template2" from "Sidebar Template"
Load the page, it looks different. It's almost as if the content is more centered, the H1 tag for the page is moved down, to the right and is bigger.
I can't find any info on this. I found one post where someone had the same problem (on another site) but no solution.
I had the same problem and found the answer on another page:
Basically, the problem is that it's adding another class to the body tag, in this case the 'singular' class. So here's something you can add to your functions.php file to filter that class for the sidebar-page2.php template file (or any other file, just replace sidebar-page2.php).
add_filter('body_class', 'adjust_body_class', 20, 2);
function adjust_body_class($wp_classes, $extra_classes) {
if( is_page_template('sidebar-page2.php') ) :
// Filter the body classes
foreach($wp_classes as $key => $value) {
if ($value == 'singular') unset($wp_classes[$key]);
}
endif;
// Add the extra classes back untouched
return array_merge($wp_classes, (array) $extra_classes );
}
My guess is that you have an unbalanced tag somewhere. Check to see that the is where you expect it. You may want to use Firebug or Chrome's Html viewer to verify the html is exactly the same.
Another possibility would be that the CSS is looking for a specific tag structure to which to apply styles. Again, Firebug or Chrome could help you locate this.
Without posted code, however, it would be difficult to answer it directly.
Just had the same problem!
It seems that the css classes on the body tags are different. On the copied template, the page has singular class, while the actual sidebar-page template doesn't. Clearly, there must be some logic in the theme that checks if the sidebar-page template is being used or not and alters the css classes. Not sure where this logic is in the theme yet, though.
sidebar-page template:
<body class="page page-id-2 page-template page-template-sidebar-page-php logged-in admin-bar single-author two-column right-sidebar">
side-page-copy template:
<body class="page page-id-2 page-template page-template-sidebar-copy-page-php logged-in admin-bar single-author singular two-column right-sidebar">