The lower part of the header contains all your branding info (company or website name, logo, and tagline). It also contains links to the theme’s stylesheets. The basic WordPress header has two parts: the topmost part is the meta-header part where you can insert meta-data tags for SEO purposes. The code in these files is mostly plain HTML with bits of PHP code (template tags) that display the metadata dynamically. Likewise, footer content is stored in the footer.php file. WordPress uses a simple templating system where all header content is contained in a piece of code stored in the header.php template file. How do you edit Headers and Footers in WordPress? If you would rather not install yet another plugin, read on… If you want to take the easy route, there are plenty of WordPress plugins to modify the header and footer. Modify your header and footer using a WordPress plugin Needless to say, the header and footer sections deserve more attention when designing your pages. Ordinarily, most visitors to a website will notice the header first before anything else and they can make judgments about the website based on their impression of the header. These two sections are crucial because they hold key information about your website. If you face any issues or need any kind of help in setting up utility bar on your Genesis Child WordPress theme then do let me know your issues in the comments section below.A typical web page on your WordPress website has a header and footer area. If you like this tutorial, please share it on Facebook and Twitter. The top utility bar can be very useful for your if you would like to: Wondering How To Use It? Here are some ideas: Just for your information, this code should work perfectly fine for Genesis 2.0 and above. Now is the time to add Widgets to the utility bars. Here’s what I’m using, but feel free to change up colors and fonts to suit your own needs: /* Utility Bar Here is the CSS code to add style to the new Utility Bar widget areas. The last thing is to add some style to your newly added utility bar. Genesis_widget_area( 'utility-bar-right', array(ģ. Genesis_widget_area( 'utility-bar-left', array( Here is the code: //* Display Utility Bar Everywhere on your siteĪdd_action( 'genesis_before_header', 'utility_bar' ) To do that you will need to add few lines of code in your function.php file.īelow is the code that you will need to add to your function.php file to display the utility bar everywhere on your WordPress site. Once you have a widget area defined in your genesis child theme, the next big thing that you need to do is to display it before the header. Once you add the above code in your function.php file, you can go to Appearance > Widgets and you’ll see your new widget areas. 'description' => 'Utility Left Sidebar before header registration', 'description' => 'Utility Right Sidebar before header registration', Below is the code that you will need to copy and paste into your function.php file to define two these two widget areas: //*Genesis Utility Side Bar Registartion One will be Right Utility Bar and Left Utility bar. In our case, we will define two widget areas in genesis child theme. Id – Sidebar id – Must be all in lowercase, with no spaces.ĭescription – Text description of what/where the sidebar is. Name – This is the name of your sidebar name. Below is the sample code that you would need to add to your function.php file. Registering a new widget area in genesis theme is very simple. Register A New Widget Area to Genesis Child Theme Below are the steps that you would need to follow: There are basically three steps to create top utility bar above the header. Just follow these steps and you will be able to add a full-width “Utility Bar” above the header in your Genesis child theme. See below image: Using this tutorial you will be able to add exactly the same utility bar on your website as shown below: Have you ever thought of adding utility bar above the header in Genesis Child Theme? In this tutorial, I will show you how you can do this on your blog in 3 easy steps. Add Utility Bar Above the Header in Genesis Child Theme
0 Comments
Leave a Reply. |