Converting the Genesis Site-Title Area to A Widget

by | May 16, 2016 | Programming, WordPress

genesis-2-devicesIf you build WordPress sites for a living, like we do, chances are you’re either using, have used, or have had to work with the outstanding line of Genesis Framework themes by StudioPress. The Genesis themes come with built-in widget areas, tools, and great ‘hooks’ to exercise your programming chops on – but occasionally you run into a problem or customization where it’s not obvious what you’d want to do.

One of my favorite themes is Minimum Pro, and I’ve based a number of client sites off of it. In this tutorial I’m going to show you how to quickly and easily convert the Minimum Pro site-tagline region to a widget area so you can insert menus, buttons, search bars or whatever else you may need to please that demanding client.

Normally, the site tagline area will look something like this:

tagline-vanilla

But my client wants me to get rid of that tagline on the left, put in a call to action instead, and add a search bar to the right, like this:

tagline-new

Not only that, but the call to action button can’t be hardcoded in – they need it as a widget they can easily update, add text before it, and so on. What they want is that tagline area to be converted into a widget area that mirrors the functionality of the other, pre-defined Minimum Pro widget areas. This might seem daunting, or that you’d need a masters course in PHP and WordPress, but it turns out that Genesis is set up very nicely to let us do this; we just need three steps to accomplish it all:

  • Remove existing code in functions.php that puts the site description in place
  • Register the left tagline area to be a widget area, also in functions.php
  • Modify the styles.css file to help the widget fit properly into the theme

First: Replace the Site Description With a Widget


siteidentity

Image A

The first thing we are going to do is remove the existing code that adds a site description line in the header bar.  The code we are looking to modify is in functions.php, about halfway down.  There you’ll see the function minimum_site_tagline(). Within that function, look for this line: printf( ‘<p %s>%s</p>’, genesis_attr( ‘site-description’ ), esc_html( get_bloginfo( ‘description’ ) ) );

This line is responsible for including the Genesis hook of the ‘site-description’ tagline attribute on the left side of our tagline, under the header. You can set this in the customizer, under the ‘Site Identity’ menu (see image A). That tagline can be used anywhere else you want, simply by adding a line similar to the one that we just deleted. One of 43Folders’ custom themes inserts it into the footer, along with some social media icons, for example.

Now that we’ve removed the default Genesis theme usage for that space, we’ll want to replace it with our new widget area.  For that to occur, we can use the predefined Genesis function for registering widgets, aptly named genesis_widget_area. Insert that code right where the old code was deleted, and add an ID that you want to use as an argument.  We’ll add additional code later, also in functions.php, that will make use of this so make sure it’s something that makes sense and you’ll remember.

Since we have a ‘site-tagline-right’ in there, I’ll call our widget ‘site-tagline-left’ and the function call will look like this:  genesis_widget_area( ‘site-tagline-left’ );

The complete updated function, with our modifications, is here:

function minimum_site_tagline() {
printf( '<div %s>', genesis_attr( 'site-tagline' ) );
     genesis_structural_wrap( 'site-tagline' );
     printf( '<div %s>', genesis_attr( 'site-tagline-left' ) );
          //* --- this is the area we updated ---
          genesis_widget_area( 'site-tagline-left' );
     echo '</div>';

     printf( '<div %s>', genesis_attr( 'site-tagline-right' ) );
          genesis_widget_area( 'site-tagline-right' );
     echo '</div>';

     genesis_structural_wrap( 'site-tagline', 'close' );
echo '</div>';
}

 Second: Register the Left Tagline as a Widget


The last thing left to do to is actually register that new widget when WordPress loads. The genesis()  page function runs on load, and when it does it will cycle through all of the genesis_register_sidebar arrays, so we’ll need to add one of those with the same ID as we defined earlier (I did tell you to remember that ID, didn’t I?).

The widget registration area is down on the bottom of the functions.php  file, and you will see all of the predefined widgets registered there by ID and name.  As I named our new widget ‘site-tagline-left’ because we already had a ‘site-tagline-right’ it was easy to simply copy that one and change the ID, name, and description fields like so:

//* Register widget areas
genesis_register_sidebar( array(
     'id' => 'site-tagline-left',
     'name' => __( 'Site Tagline Left', 'minimum' ),
     'description' => __( 'This is the site tagline left section.', 'minimum' ),
) );

genesis_register_sidebar( array(
     'id' => 'site-tagline-right',
     'name' => __( 'Site Tagline Right', 'minimum' ),
     'description' => __( 'This is the site tagline right section.', 'minimum' ),
) );

At this point, once you’ve saved the file the work is done – you’ve just created and registered a brand new Genesis theme widget!

 

Last: Update Your CSS File


There’s one last thing we need to do – go into our custom style sheet (you are using a custom style sheet, right?) or style.css and update spacing and size of the areas to match your needs.

For this client, with CTA text and a button on the left and a search bar on the right I needed sizing of 70/30, respectively. Additionally I want to force the widget on the right to be right-aligned so it stays out of the way.  To accomplish that, I added this block of code to the end of my style sheet:

.site-tagline-left {
 float: left;
 width: 70%;
}
.site-tagline-right {
 float: right;
 text-align: right;
 width: 30%;
}

 That’s All, Folks!


Really, that’s all there is to it … a little PHP, a dash of CSS and you can add widget areas to any of the Genesis Framework themes!  If you need some help making this happen, or would like to schedule a call to discuss redesigning and re-envision your current site don’t hesitate to contact us today for reasonable rates and professional updates.

I’d love to get any suggestions or feedback in the comments section too!

0 Comments