I was recently asked about customizing the Fun theme to give some of the look of the Pretty Darn Cute Design “Pretty” Theme; specifically, moving the primary navigation to above the header, as it appears on the Pretty theme, and relocating the subscription widget.
In the Fun theme, the subscription widget appears on every page above the header; on the Pretty Theme, it’s on the home page area, below the first widget.
So, how to accomplish this?
Firstly, we’ll want to move the location of the Primary Navigation. Using this code snippet from StudioPress, we can move the Primary Navigation from below the header to above the header. This code will be added to the bottom of the functions.php file.
//* Reposition the primary navigation menu remove_action( ‘genesis_after_header’, ‘genesis_do_nav’ );
add_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
Once the menu has been updated, we will want to adjust the styling of the navigation. If you already own the Pretty theme, it’s as simple as copying the Primary Navigation section in the Pretty theme, and replacing that in the Fun theme. If you don’t have the Pretty theme, you’ll need to make some of your own adjustments. Here’s the update I made:
/* ## Primary Navigation
——————————————— */
.nav-primary {
background-color: #fff;
border-bottom: 1px solid #eee;
}
.nav-primary .genesis-nav-menu a {
color: #2c2c2c;
text-decoration: none;
}
.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu a:focus,
.nav-primary .genesis-nav-menu .current-menu-item > a {
color: #ddd;
}
.nav-primary .genesis-nav-menu .sub-menu a {
color: #3c4143;
}
.nav-primary .genesis-nav-menu .sub-menu a:hover,
.nav-primary .genesis-nav-menu .sub-menu a:focus,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a {
color: #ffb7be;
}
Next, we’re going to change the location of the subscription widget:
Open up your functions.php file, and look for this:
//* Subscribe Widget
add_action( ‘genesis_before_header’, ‘custom_subscribe_widget’ );
function custom_subscribe_widget() {
genesis_widget_area( ‘subscribewidget’, array(
‘before’ => ‘<div class=subscribe-widget widget-area”>’,
‘after’ => ‘</div>’,
) );
}
Remove this section completely.
Then, open up your front-page.php file, and add this:
add_action( ‘genesis_after_header’, ‘custom_subscribe_widget’ );
function custom_subscribe_widget() {
if ( is_home() || is_front_page() ) {
genesis_widget_area( ‘subscribewidget’, array(
‘before’ => ‘<div class=”subscribe-widget”><div class=”wrap”>’,
‘after’ => ‘</div></div>’,
) );
}
}
The location for this will be between your Fun Home Featured (Home Top) widget, and your Home Products widget. Here’s a screenshot of the front-page.php file when done:
Again, we can do a little styling of our CSS; the subscription widget on the Fun theme demo has a gray background; on the Pretty theme, it’s a white background, so you’ll need to adjust your CSS to change the color of the widget background and widget title. You can adjust your CSS further to change colors etc. to match the Pretty theme if you like. Here’s a screenshot of the final result:
The Pretty theme has a sticky navigation, and a widget for the Simple Social icons – this is not covered in this tutorial.
If you don’t have access to your WordPress dashboard (some hosting companies disable this functionality), you will need to access your functions.php and front-page.php, and stylesheet files via cPanel or FTP to make the update.
As a reminder: Any time you are making adjustments to a PHP file, you will want to have a fresh file available to upload to your site via cPanel or FTP – a misstep when updating your functions.php file will result in crashing your site; if you do that, you will need to upload a new functions.php file via cPanel or FTP (it cannot be fixed via your WordPress dashboard.
* Why is this outside the scope of theme support you may ask? Theme support for any of the Pretty Darn Cute Design themes is limited to setting up the site to look and function like the demo; making any further adjustments to the look and functionality of the theme is customization.
Have you purchased the FUN theme, but not yet installed it? Did you know I offer a theme setup service? I can have your site set up to match the theme’s demo settings in under 24 hours. You can learn more here: (24 hour theme setup)
If you’ve already installed the theme, and just want assistance with making tweaks? I’m available to do that, too! Just ask here: (talk to Susan!)
Leave a Reply