How To Make Twenty Fourteen (Or Any Other WP Theme!) Super

In a recent review of WordPress’ latest default theme, WPMU DEV’s Chris Knowles called Twenty Fourteen a “flawed beauty.”

In that article, Chris recommended a number of potential improvements, and together we’ve put together this ultimate guide to addressing those flaws.

And what’s more, these tips and techniques can be used in practically any WordPress theme.

So, break out the cape, fire up your favorite editor, and give Twenty Fourteen a superhero makeover.

Photo of Superman, Ironman, Wonder Woman and Captain America action figures
Give the WordPress default theme, Twenty Fourteen, a superhero makeover

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

In this article, we are going to build a child theme that implements the improvements that Chris recommended in his review of Twenty Fourteen, namely:

  1. Centering the design, instead of the default left-alignment
  2. Adding a slide-out sidebar for mobile devices, rather than simply moving the default sidebar below the content
  3. Improving the header bar so that logos and other elements can be included
  4. Enhancing the featured content functions in order to:
    • allow a different layout on a mobile device
    • specify how many posts should be used for each layout
    • include custom post types in the layouts
    • automatically scroll the slider

In working your way through these four main areas, you’ll not only have a truly functional, great looking Twenty Fourteen, but you’ll also have picked up plenty of tips and tricks that you can apply to virtually any other WordPress theme.

And to make your life even easier we’ve given you two paths to glory:

1. Skip to the end of this article and download the new zipped theme file
2. Create it yourself using the following awesome tutorial, and learn as you go

Still here? Great! So let’s begin…

Before We Begin : Create a Child Theme

As we know, if we want to customize a theme, then it’s essential to use a child theme. We’ll be creating quite a few files in this tutorial, so go and create a child theme now, including:

  • The mandatory style.css file
  • /js and css folders
  • An empty functions.php file in the theme folder

If you don’t know how to create a child theme then be sure to read Rae’s excellent tutorial on how to create a child theme. The child theme’s style.css needs to point to the original Twenty Fourteen theme:

1
2
3
4
5
6
/*
Theme Name: Awesome Twenty Fourteen
Template: twentyfourteen
*/
@import url("../twentyfourteen/style.css");
/* Theme customization starts here */

Once you have created your child theme, activate it just to make sure it works. Obviously, at this stage it should look and behave exactly like its parent.

Featured Plugin - WordPress Pop-Up Chat Plugin

No javascript required, no third part chat engine, just fully featured chat right in your own database on your own WP sites - couldn't be easier.
Find out more

1. How To Center Twenty Fourteen

What’s The Problem?

Unusually for a fixed-width design, Twenty Fourteen is left-aligned which can lead to large expanse of white space to the right in a large browser window and a distinctly lop-sided feel.

How To Fix It?

A simple update to the stylesheet to center the design.

Screenshot of Twenty Fourteen centred rather than left-aligned
Centering fixed-width designs do seem to make them feel more balanced

The Solution…

Centering With Style

The outermost container of the theme’s design has the class site, and so we can center it by using the standard method of setting the container’s margin to 0 auto.

Add the following to the style.css you just created in your child theme:

1
2
3
.site {
margin: 0 auto;
}

If you want to play with the background color, then you can set this in the theme options available from the Appearance > Customize menu option.

If you would like to customize the colors further, take a look at the Fourteen Colors plugin. It allows the modification of the theme’s color scheme, automatically adjusting contrast to maintain accessibility and legibility.

2. How To Add a Slideout Sidebar

What’s The Problem?

One of the big issues with the original Twenty Fourteen theme is that on mobile devices (including tablets) the sidebar becomes an initially invisible footer. Not a great response if you have essential content in the sidebar such as navigation.

How To Fix It?

Add a mobile-specific sidebar to the theme that slides out. We’ll also change the mobile menu button to activate the slide-out rather than show the menu and add a new mobile-specific menu location for easy inclusion of mobile-only navigation in the new sidebar.

Screenshot of slide-out menu on a tablet
A slide-out menu is far more useful on mobile devices

Using a mobile-specific sidebar also allows greater flexibility when targeting content to a platform.

The Solution…

We are going to implement the slide-out sidebar using Alberto Valero’s Sidr plugin for jQuery. If you are interested in adding a slide-out sidebar to any theme then check out Chris’s earlier tutorial.

Before we get to the plugin itself, though, we have to set up the components for the new sidebar.

Create a New Mobile Widget Area

Add the following code to your functions.php file to add a separate widget area for the new slide-out sidebar:

1
2
3
4
5
6
7
8
9
10
11
12
13
//Add mobile sidebar
function awesome_2014_mobile_widget_area() {
register_sidebar( array(
'name' => __( 'Mobile Sidebar', 'awesome_2014' ),
'id' => 'sidebar-mobile',
'description' => __( 'Slideout sidebar for mobile devices.', 'awesome_2014' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s mobile-widget">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title' => '</h1>',
) );
}
add_action( 'widgets_init', 'awesome_2014_mobile_widget_area' );

Notice that the class mobile-widget is added to the widget’s container to allow these widgets to be styled separately from the other widgets in the theme.

Add A Mobile-only Menu Location

As we are hijacking the header’s menu button to slide out our mobile specific sidebar instead of displaying the top bar navigation, we need to include a menu in the new sidebar sidebar. To provide maximum flexibility we’ll add a “mobile” option to the existing menu locations which allow us to assign a specific mobile menu if we wish.

Add the following code to functions.php:

1
2
3
4
5
6
7
//add mobile menu
function awesome_2014_setup() {
register_nav_menus( array(
'mobile' => __( 'Mobile menu in left sidebar', 'awesome_2014' ),
) );
}
add_action( 'after_setup_theme', 'awesome_2014_setup' );

This simply registers the new location and allows you to assign a menu to the location. Go to Themes > Menus in the WordPress Admin interface and add a menu to the mobile menu location.

Outputting the Mobile Sidebar

Now that we have the new widget area and the new menu, it’s time to create ensure that the correct sidebar is output.

What we are actually going to do is override Twenty Fourteen’s sidebar.php template and use the wp_is_mobile() function to output the slideout sidebar if appropriate.

Copy the sidebar.php template from the Twenty Fourteen folder to the child theme folder, open it and replace the existing code with the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<?php
/**
* The Sidebar containing the main widget area
*
*/
?>

<?php

if ( wp_is_mobile() ) :

// display mobile sidebar ?>
<div id="slideout" class="sidr">
<div id="slideout-top">
<?php
$description = get_bloginfo( 'description', 'display' );
if ( ! empty ( $description ) ) :
?>
<h2 class="site-description"><?php echo esc_html( $description ); ?></h2>
<?php endif; ?>
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
</div>

<?php if ( has_nav_menu( 'mobile' ) ) : ?>
<nav role="navigation" class="navigation site-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'mobile' ) ); ?>
</nav>
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-mobile' ) ) : ?>
<div id="mobile-sidebar" class="widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-mobile' ); ?>
</div><!-- #mobile-sidebar -->
<?php endif;?></div>

</div> <!-- #seconday-mobile -->

<?php
else:

// display normal sidebar ?>
<div id="secondary">
<?php if ( has_nav_menu( 'secondary' ) ) : ?>
<nav role="navigation" class="navigation site-navigation secondary-navigation">
<?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?>
</nav>
<?php endif; ?>

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>
</div><!-- #secondary -->

<?php
endif; ?>

This new sidebar uses the device detection function wp_is_mobile() to output a different sidebar for mobile devices. If you want to learn more about using device detection and learn how to modify this to only change on phones, but not tablets, check out our article on adaptive layout changes for WordPress themes.

The mobile sidebar outputs the mobile menu widget area and menus. It also contains the search toggle and search area HTML from the header, which we will remove from the mobile header in a later step.

The mobile sidebar also places the id of #slideout and the class of sidr on the outermost container of the sidebar.

Rearranging The Header

Much like we did with the sidebars, we are going to use wp_is_mobile() to output two different headers, depending on the device making the request.

Whilst the desktop header will remain unchanged, the mobile header will allow the slide-out action to be triggered by the menu icon and prevent the default mobile menu from displaying.

This time we need to override the parent header template, so create a header.php file in the child theme root folder and add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
/**
* The Header for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
</div>
<?php endif; ?>

<?php if ( wp_is_mobile() ) : ?>

<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( ! empty ( $description ) ) :
?>
<h2 class="topbar-description"><?php echo esc_html( $description ); ?></h2>
<?php endif; ?>
</div>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<a id="menu-toggle" class="second" title="<?php _e( 'Click To Show Sidebar', 'awesome_2014' ); ?>" href="#slideout"><span class="genericon genericon-menu"></span></a>
</header><!-- #masthead -->

<?php else: ?>

<header id="masthead" class="site-header" role="banner">
<div id="big-top">
<div class="header-main">
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<?php
$description = get_bloginfo( 'description', 'display' );
if ( ! empty ( $description ) ) :
?>
<h2 class="topbar-description"><?php echo esc_html( $description ); ?></h2>
<?php endif; ?>
</div>

<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<div class="search-toggle">
<a href="#search-container" class="screen-reader-text"><?php _e( 'Search', 'twentyfourteen' ); ?></a>
</div>
<div id="search-container" class="search-box-wrapper hide">
<div class="search-box">
<?php get_search_form(); ?>
</div>
</div>
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu', 'container_class' => 'topbar-menu', ) ); ?>

</nav>

</header><!-- #masthead -->

<?php endif; ?>

<div id="main" class="site-main">
<div class="hfeed site" id="page">
<div class="site-main" id="main">

You will notice that we have replaced the responsive menu toggle in the mobile header with our own toggle, which will be hooked up to open the slide-out sidebar. We have also removed the search toggle, which now appears in the slide-out sidebar.There are a few extra bits and pieces in here that we are going to make use of in the next part of this tutorial when we address the header bar, but don’t worry about that for now.

Yet More Style Fine-Tuning

In order to get the correct layout for the mobile header, we need to fine-tune the styling. Go back to the style.css and add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* Make room for the search toggle and site description in mobile sidebar */
#slideout-top {
height:48px;
}

#slideout-top .site-description {
display: block;
text-align: left;
font-family: lato;
width: 205px;
overflow: hidden;
}

#slideout-top .search-toggle {
margin-right: 0;
}

/* Override Sidr Style For 2014 Search */
#slideout-top .search-box .search-field {
background-color: white;
color: black;
}

/* Keep mobile toggle on the right and resize the genricon */
#menu-toggle {
float: right;
display: inline;
}

#menu-toggle .genericon {
font-size: 48px;
padding: 0 1em 0 0;
z-index: 999;
}

/* enhancing the topbar */
#big-top {
display: block; }

#masthead {
height: 88px;
position: fixed;
top: 0;
}

.header-main {
display: inline;
}

.site-title{
margin: 0 0 0 20px;
}

nav#primary-navigation {
width: 100%;
display: block;
top: 40px;
left: 0px;
position: absolute;
padding-left: 30px;
}

.topbar-description {
color: #fff;
display: inline;
font-weight: bold;
font-size: 100%;
text-transform: lowercase;
line-height: 50px;
vertical-align: baseline;
margin-left: 20px;
font-style: italic;
}

Among other things, this CSS keeps the icons the default Twenty Fourteen green color. You can change the color by adding a color property for #menu-toggle .genericon. It also carves out a space for the site description and search toggle at the top of the of the slide-out sidebar.

Activating The Slideout Sidebar

Now that we’ve created all the components for the sidebar, we can actually get around to adding the code to activate it. First, though, we need the plugin itself, so download the plugin, unzip it, rename the folder sidr and copy it to the js folder in the child theme.

Create a new file in the /js folder called slideout.js and add the following javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* hook up the Sidr functionality */

(function($) {

$(document).ready(function(){

// hook up the left side menu

$("#menu-toggle").sidr({
name: "slideout",
side: "left",
displace: false,
});

});

})(jQuery);

This javascript hooks up the menu toggle icon in the mobile header to the mobile slide-out sidebar. Tapping on the icon will slide the sidebar in or out depending on its current visibility.

Adding the Javascript and CSS

Almost there. Everything is now in place, we just need to let WordPress know about it which means enqueuing the Sidr javascript file, our activation javascript file and a stylesheet for the slide-out sidebar. We are going to just use the dark theme that comes with Sidr.

Add the following code to the functions.php file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
* Add slideout Sidebar
*/
// Enqueue the css/js for slideout
function awesome_2014_add_slideout() {
wp_enqueue_script( 'sidr', get_stylesheet_directory_uri().'/js/sidr/jquery.sidr.min.js', array('jquery'), null, true );
wp_enqueue_script( 'slideout', get_stylesheet_directory_uri().'/js/slideout.js', array('sidr'), null, true );
wp_enqueue_style( 'slideout', get_stylesheet_directory_uri().'/js/sidr/stylesheets/jquery.sidr.dark.css');
}

// add only if is mobile
if ( wp_is_mobile() ) {
add_action( 'wp_enqueue_scripts', 'awesome_2014_add_slideout', 10 );
}

This uses the wp_enqueue_scripts action to ensure that the necessary javavscript and CSS files are output. You’ll notice that there are dependencies, Sidr depends on jQuery, Slideout depends on Sidr and that the action is only called if a mobile device is making the call.

If you want to change the styling for the slide-out sidebar then best practice would be to copy the dark CSS to a new location, edit it there and then change the location in the call to wp_enqueue_style.

That was quite involved. We set up a new sidebar and menu location for the Admin interface, installed the Sidr plugin and added some styling to make it all work and look presentable.

Make sure you’ve assigned some widgets to the mobile sidebar and/or a menu to the mobile menu location, and then view your test site on a tablet or phone (or on an emulator if you are working locally). If all is well, then clicking on the 3-bar menu icon will slide out the menu, and clicking on the same icon will close it.

Featured Plugin - WordPress Google Maps Plugin

Simply insert google maps into posts, sidebars and pages - show directions, streetview, provide image overlays and do it all from a simple button and comprehensive widget.
Find out more

3. How To Improve the Header

What’s The Problem?

It’s too short. You’ll have a hard time getting a logo in there or any other elements such as links to social media presences; there’s not even any room for the site’s tagline.

How To Fix It?

Make it bigger when the page first loads and shrink when the user starts scrolling. When the header shrinks, elements that are not required will be hidden, and those that are remaining will be relocated, all with eye-catching animation.

Screenshot of the expanded Twenty Fourteen header
The initial header view is now much more accommodating
Screenshot of the header at normal size after a page scroll
The header now contracts to its original size when the page scrolls

The Solution…

Preparing The Header

We don’t actually need to do anything for the header because we incorporated the changes we need into the header.php template when we updated it for the slide-out sidebar. So, on to the next step.

Outputting The Required CSS and Javascript

Since this will only affect non-mobile devices, we’ll place the css and jQuery in separate files from the main theme Javascript and CSS and only add them when the site is not being shown on a mobile device.

This requires creating a Javascript file in the child theme’s js directory and adding some CSS to the style.css. We’ll then enqueue the new Javascript file in it’s own function hooked to the wp_enqueue_scripts action that is only added if wp_is_mobile() does not return true. No need to load additional Javascript on mobile devices when it is not needed, especially one such as this that makes continuous adjustments as the page is scrolled.

Add the following code to the functions.php file:

1
2
3
4
5
6
7
8
//enqueue topbar js
function awesome_2014_add_topbarjs() {
wp_enqueue_script( 'topbarjs', get_stylesheet_directory_uri().'/js/topbar.js', array('jquery'), null, true );
}
//add if is not mobile
if ( !wp_is_mobile() ) {
add_action( 'wp_enqueue_scripts', 'awesome_2014_add_topbarjs' );
}

Creating the CSS file

In order to get things to display properly when the page loads, we will do as much of the initial, full-size topbar as we can with CSS.

The basic strategy is to create two rows by ensuring #top-big is a block element, while the others are set to be inline elements. We actually set these rules when rearranging the header for the slide-out menu, so all we need to concern ourselves about now is resizing of the browser window.

Even though we are using an adaptive strategy for handling mobile navigation via the slide-out sidebar, we still need to ensure that our design responds to a user shrinking their desktop browser window which we can do by adding an appropriate @media query.

Once again, add this code to the style.css file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**Adjustments for the desktop topbar when screen is small**/
@media screen and (max-width: 768px) {
.search-toggle {
position: absolute;
top: -8px;
right: 0px;
}
#masthead {
height: 80px;
}
.topbar-menu {
display: block;
background-color: black;
}
.primary-navigation.toggled-on {
display: block;
padding: 48px 0 0 0px;
background-color: black;
}
.nav-toggled {
padding-top: 48px !important;
padding-left: 0px !important;
}
h2.topbar-description {
display:none;
}
}

Creating The Javascript File

The script that will rearrange the header when not scrolled the whole way to the top is powered by jQuery’s scrollTop() function.

This function returns the position of the vertical scroll for a container, which in this case is the body. This will allow us to condense the scrollbar whenever the page is scrolled away from the top of the page by testing if the scroll position of the body is greater than zero and to perform the reverse and put everything back when the scroll position gets back to zero.

This script also includes two functions for ensuring that the topbar does not overlap the main content and the WordPress admin bar does not overlap the topbar. These corrections have to be done via jQuery since the size of the #masthead and #wpadmin bar can change based on scroll position and screen width. We can easily calculate their heights using jQuery’s height() function and then use those values to add top margins with css().

Save the following code in the /js folder as topbar.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
jQuery(document).ready(function($) {
//set element ID/classes in vars
var social = '.topbar-description';
var nav = 'nav#primary-navigation';
var headerMain = '.header-main';
var header = '#masthead';
var main = '#main';

//margin fix for masthead function
var mastFix = function() {
$(header).css({
marginTop: $('#wpadminbar').height() + 'px'
});
};
mastFix();
//ensure that #wpadminbar doesn't move
$('#wpadminbar').css( 'position', 'fixed' );

//function for changing sizes
$(function(){
$(header).data('size','big');
});

//the main scroll function
$(window).scroll(function(){
//set container of the nav element
var $nav = $(header);
//when scrolled away from top
if ($(‘body’).scrollTop() || $(‘html’).scrollTop() > 0) {
if ($nav.data('size') == 'big') {
mastFix();
$( social ).css('display', 'none');
$( nav ).css({
display: 'inline',
top: '0px',
});
$( headerMain ).fadeOut("fast");
$( nav ).animate({
paddingLeft: $( 'h1.site-title' ).width() + 45 + 'px',
}), {queue:false, duration:600};
$( nav ).css('top', '0px');
$nav.data('size','small').stop().animate({
height:'48px'
}, 600);
$( headerMain ).animate({
left:200, opacity:"show"}, 600);
};
}
//when scrolled back
else {
if ($nav.data('size') == 'small') {
mastFix();
$( social ).css('display', 'inline');
$( nav ).animate({
display: 'block',
top: '40px',
}), {queue:false, duration:600}; ;
$( nav ).animate({
paddingLeft: '30px',
}), {queue:false, duration:600};
$nav.data('size','big').stop().animate({
height:'88px'
}, 600);
}
}
});
//Function to fixing margin for #main
var marginFix = function() {
$(main).css({
marginTop: $(header).height() + 'px',
});
};
//do marginFix and again on window resize along with mastFix
marginFix();
$( window ).resize(function() {
marginFix();
mastFix();
});

}); //end jQuery noConflict wrapper

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

4. How To Make Featured Content More Flexible

What’s The Problem?

For many people, the implementation of the featured content in Twenty Fourteen is too basic. You can only specify a layout–grid or slider–for all platforms. You can’t set how many posts are to be displayed, and custom post types cannot be included. The slider also only allows for manual scrolling. The javascript that powers the slider is based on WooThemes’ Flexslider jQuery plugin. The Twenty Fourteen development team chose to remove all of the functionality that they didn’t need from the plugin. This created a smaller file, but removes some of the cool features that Flexslider provides.

How To Fix It?

Add the capability to specify a layout for mobile devices, add the ability to specify how many posts should be displayed in each layout type, and extend the selection of featured content to include custom post types. To make it even more flexible, add these as options to the Featured Content section in the theme customization panel.

To address the automatic scrolling issue with the slider means replacing it with its original source code from WooThemes and tweaking the included functions.js file. It will also require creating a few more controls in the theme customizer.

Screenshot of Twenty Fourteen on tablet showing slider
Use a grid on a desktop and slider, that auto-scrolls, on your tablet

The Solution…

Adding Options To The Theme > Customize Panel

Adding these options will allow you to set the mobile layout and the number of posts for each layout in the Admin interface, removing the need for code changes if you want to change the settings.

We’ll achieve this by making use of the Customize API to add more options to the Featured Content section in the theme customize screen (Theme > Customize).

Open up your functions.php file and add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function awesome_2014_customize_register() {

global $wp_customize;

//add extended featured content section

//add controls
$wp_customize->add_setting( 'num_posts_grid', array( 'default' => '6' ) );
$wp_customize->add_setting( 'num_posts_slider', array( 'default' => '6' ) );
$wp_customize->add_setting( 'layout_mobile', array( 'default' => 'grid' ) );

$wp_customize->add_control( 'num_posts_grid', array(
'label' => __( 'Number of posts for grid', 'text-domain'),
'section' => 'featured_content',
'settings' => 'num_posts_grid',
) );

$wp_customize->add_control( 'num_posts_slider', array(
'label' => __( 'Number of posts for slider', 'text-domain'),
'section' => 'featured_content',
'settings' => 'num_posts_slider',
) );

$wp_customize->add_control( 'layout_mobile', array(
'label' => __( 'Layout for mobile devices', 'text-domain'),
'section' => 'featured_content',
'settings' => 'layout_mobile',
'type' => 'select',
'choices' => array(
'grid' => 'Grid',
'slider' => 'Slider',
),
) );
}

add_action( 'customize_register', 'awesome_2014_customize_register' );
Screenshot of the Featured Content options
New options to control
featured content layout

This code adds three new settings, with defaults, to the existing featured_content panel:

  1. num_posts_grid – the number of posts to appear in the grid
  2. num_posts_slider – the number of posts to appear in the slider
  3. layout_mobile – which layout (grid or slider) to use on mobile devices

We can now get the value of these settings simply by calling get_theme_mod which offers far more flexibility than hardcoding the options into our functions.php.

Specifying A Different Layout For Mobile Devices

Now that we’ve added the option to set which layout mobile devices use, we need to ensure that it gets used when the home page is viewed on a smartphone or a tablet.

The key is to make sure that any call to get_theme_mod for the featured_content_layout setting returns the correct layout for the device. As always, there’s a filter for that.

A filter can actually be set for every customization option by using the filter name theme_mod_[option name], so in our case we’ll be using the filter theme_mod_featured_content_layout.

Add this code to your functions.php:

1
2
3
4
5
6
7
8
9
10
function awesome_2014_theme_mod( $value ) {

if ( wp_is_mobile() ){
return get_theme_mod( 'layout_mobile', 'grid' );
} else {
return $value;
}
}

add_filter( 'theme_mod_featured_content_layout', 'awesome_2014_theme_mod' );

All the code does is check to see if the device is a mobile and, if it is, either the setting for the mobile layout is returned, or the default value of grid, if no theme_mod is set. If not, it returns the original value.

Add the above code to your functions.php, change the option for the mobile layout so that its different to the original layout, and view the site on a tablet or mobile.

Setting the Number of Posts For Each Layout

To bring back the number of posts as specified in the theme options we need to utilize another filter, this time twentyfourteen_get_featured_posts, to redo the query that generates the list of posts for the featured content.

Again, add this code to functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function awesome_2014_get_featured_posts( $posts ){

$fc_options = (array) get_option( 'featured-content' );

if ( $fc_options ) {
$tag_name = $fc_options['tag-name'];
} else {
$tag_name = 'featured';
}

$layout = get_theme_mod( 'featured_content_layout' );
$max_posts = get_theme_mod( 'num_posts_' . $layout, 2 );

$args = array(
'tag' => $tag_name,
'posts_per_page' => $max_posts,
'order_by' => 'post_date',
'order' => 'DESC',
'post_status' => 'publish',
);

$new_post_array = get_posts( $args );

if ( count($new_post_array) > 0 ) {
return $new_post_array;
} else {
return $posts;
}

}

add_filter( 'twentyfourteen_get_featured_posts', 'awesome_2014_get_featured_posts', 999, 1 );

The function starts by determining the tag name that is being used to identify featured content. For some reason, this is not stored with the other options and therefore is not accessible via the get_theme_mod. Instead it is contained in an array stored in a regular WordPress option.

Once the tag name is identified, the number of posts to return is determined by first finding out which layout is being displayed (our theme_mod filter above will kick in here and alter the layout if a mobile device) and then get the layout specific theme option.

The number of posts is then inserted into the query arguments and the query is executed. If posts are found, then these are used for the featured content. Otherwise, the original list of posts is used.

Add the above code to your functions.php file, change the number of posts for the grid and slider, and browse to the home page to see the number of posts change.

Including Custom Post Types In Post Selection

Now that we’ve added our own custom query for the featured posts, amending the code to include custom post types is as simple as adding one line of to the above code.

Add this element to the $args array definition:

1
'post_type' => array( 'post', '[custom post type]'),

This is simply a comma separated list, so add as many custom post types as you have. I haven’t included this as a theme customization option as it felt more development orientated.

Making the Slider Auto-Scroll

When WooThemes’ Flexslider was cut-down for use in Twenty Fourteen, one of the things that was removed was the slideshow functionality.

The “fix” is actually to use the full Flexslider code instead of the cut-down version, which is as simple as dequeuing the original slider javascript and enqueueing its replacement. But first you need to download Flexslider and move the jquery.flexslider-min.js into the child theme’s js folder.

Now, add this code to functions.php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//dequeue/enqueue scripts
function awesome_2014_featured_content_scripts() {
wp_dequeue_script( 'twentyfourteen-script' );
wp_dequeue_script( 'twentyfourteen-slider' );

wp_enqueue_script( 'awesome_2014-script', get_stylesheet_directory_uri() . '/js/functions.js', array( 'jquery' ), '' , true );
if ( is_front_page() && 'slider' == get_theme_mod( 'featured_content_layout' ) ) {
wp_enqueue_script( 'awesome_2014-slider', get_stylesheet_directory_uri() . '/js/jquery.flexslider-min.js', array( 'jquery', 'awesome_2014-script' ), '' , true );
wp_localize_script( 'awesome_2014-slider', 'featuredSliderDefaults', array(
'prevText' => __( 'Previous', 'awesome_2014' ),
'nextText' => __( 'Next', 'awesome_2014' )
) );
}
}
add_action( 'wp_enqueue_scripts' , 'awesome_2014_featured_content_scripts' , 999 );

This removes the default slider code and the functions script that, amongst other things, initiates the slider and replaces it with our versions. The Flexslider script will only be loaded if the slider is needed, which will avoid wasting resources to load it unnecessarily.

This code also removes both of the parent theme’s functions.js file. In order to get the slider to work seamlessly with the full version of Flexslider and ensure that the existing CSS is applied, we do need to make a small tweak to the theme’s functions.js file. Copy that file to the child theme’s /js folder, open it up and at the bottom replace the Initialize Featured Content Slider code with the following:

1
2
3
4
5
6
7
8
9
10
11
12
// Initialize Featured Content slider.
_window.load( function() {
if ( body.is( '.slider' ) ) {
$( '.featured-content' ).flexslider( {
selector: '.featured-content-inner > article',
controlsContainer: '.featured-content',
slideshow: true,
slideshowSpeed: 4500,
namespace: 'slider-',
} );
}
} );

This ensures that Flexslider is initiated and that slideshow (automatic scrolling) is switched on. Setting the namespace argument ensures that all the current styling for the slider in Twenty Fourteen gets applied to our new scroller. This code also sets the slideshow speed to 4.5 seconds. The default is 7 seconds, which is a bit long, but you can change this to your personal preference.

You will need to keep an eye on this file in the parent theme and check every time the theme is updated. If any new essential functionality is introduced, you will need to manually carry that across to your child theme version.

Refresh your home page and, assuming you’ve specified “slider” as your layout, you should find that your slider is now automatically scrolling.

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

You Made It!

This is a big post, and there’s a lot to digest, but it’s worthwhile because it makes for a pretty comprehensive makeover for the Twenty Fourteen theme and there are plenty of useful tips and techniques that are applicable to virtually any theme.

In Chris’ original review he called Twenty Fourteen a “flawed beauty.” With those flaws addressed, this child theme is now simply a “beauty,” and in my opinion, it is awesome.

Download the Twenty Fourteen child theme: awesome_2014.zip.

Alternatively, I have been working on a Twenty Fourteen child theme that includes many of these changes, with the Star Wars inspired name of “The Falcon” which you can download from GitHub.

Photo credit: JD Hancock

What do you think of this Twenty Fourteen child theme? What other tweaks would you like to see? What tweaks have you come up with yourself? Let us know in the comments. Be sure to include a link where you are showing off your own creation.

Comments (81)

  1. Interesting. Thanks.

    re: “And what’s more, these tips and techniques can be used in practically any WordPress theme.”

    Yes, agreed. With that said, much of this could have / should have been a plugin or at least a class that can be required_once() in the child.

    The “copy X, Y & Z into your theme’s functions.php…” is really – pardon me, I’m not trying to offend anyone – a pretty dated approach. At the very least a class + a plugin + theme-centric tweaks and stuff would make implementing and maintain this much more sensible. Agree?

    Otherwise, great ideas. I wish I had the time to frame out and repo what I just mentioned but I’m having mid-week motivation and productivity issues as it is. I certainly don’t need yet another distraction :)

    • I actually started this from my own Twenty Fourteen child theme (https://github.com/shelob9/thefalcon) which is mainly OOP. I rewrote the code into functional PHP for the tutorial as it makes it more universally useful. People who understand OOP can easily translate non-OOP code into OOP code, but when people who don’t understand OOP see OOP code they are lost.

      If you look at my theme and my post yesterday on child themeing (http://premium.wpmudev.org/blog/3-tricks-for-improved-child-theming-in-wordpress/) I think you will see that we largely agree on this. I’m in the process of making my own theme (https://github.com/Shelob9/_second_foundation) as extensible as possible.

      • Hey Josh –

        Point made. Sorry ’bout that. I’m certainly not Mr WP OOP. That said, once you commit – no techie pun intended ;) – to that approach it’s hard to look back. So when i read this I kept thinking, oh cool, imagine adding this as a class / submodule framework cand reuse as needed.

        Two thoughts:

        1) Perhaps that could in fact be another article? Something like: “How I took this traditional / procedural PHP effort and OOP’ed it” I think that would be great.

        2) If you’d like any help (read: would like to collaborate) on that please ping me on FB and we’ll sort it out.

        Speaking for myself, I’d like to see more stuff like this move towards becoming part of a WP framework (so to speak). More like 80% baked and then you just add your own custom magic for the last 20%. Sometimes I think everything being designed and dev’ed to be 100% complete can be a bit defeating if you’re using WP as a dev framework and not as a final turnkey total solution. If that makes sense.

        Thanks again.

  2. hi,
    about topbar.js, did you ever checked with Firefox?
    maybe you forgot body scrollTop works in Chrome but doesn’t work in Firefox (and maybe IE too?)
    Andrea

    • hi,
      the topbar doesnt shrink on firefox. I can confirm it. plus am not sure the pop out is working on my android browser.

      any chance the top bar can be full width, it looks very isolated on high resolutions 1600 to 1280

      thanks, for the great work on this josh

    • Andrea-
      You’re right, it doesn’t change properly when scrolling in Firefox. I think the problem is not with scrollTop() but with using scrollTop() on body. I’m testing on a mac now and I can solve the problem by changing line 29 from:

      if ($(‘body’).scrollTop() > 0) {

      to

      if ($(‘body’).scrollTop() || $(‘html’).scrollTop() > 0) {

      Thanks for pointing this out and if possible can you let me know if this helps for you and on what OS?

      • exactly, it’s scrollTop on body that’s known to fail in Firefox and IE
        btw I think Firefox and IE implementation is right and Chrome is wrong…
        As far as I see, they fixed it in Chrome so for latest versions “html” should work, see the jsfiddle example in this 12 months old jquery ticket
        http://bugs.jquery.com/ticket/13155
        if you test now with Chrome, you will see values correctly returned with both “html” and “body”.

        Just tested and for me Firefox still returns “0″ on body, same IE 8 and Opera 12.
        But Safari 5.1.7 on Windows returns “0″ on “html”.
        So, maybe the safer way is to use scrollTop on “document” as they suggest in the ticket?
        I was testing in XP.
        regards

  3. Hi Josh, thanks for the really helpful (and in-depth) walkthrough of this theme. I’m only in the beginning stages but it looks great with all of your adjustments.

    However, I know next to nothing in terms of coding and whatnot, and the top of my featured slider images are getting clipped on top. Here’s my site: http://chrissugidono.com/

    I’ve been trying to figure it out all day but obviously I have no idea what I’m doing. No worries if it’s too much to explain, though, and thanks again.

    • Chris-

      Glad you appreciated the article and are putting it to use.

      Check your Javascript console. You have several Javascript errors.

      One is caused by an error in topbar.js that got accidentally introduced the last time we updated the download. I just sent an email to get it fixed. You can see the correct code here: http://pastebin.com/sg5tGy1e

      Not sure about the other errors. Fix this one and then see what you can do about the others if they are still happening.

      Take care,
      Josh

  4. Gonna test it on my blog. But I advice users to get the github version because this version has a lot of bugs such as : ” if ( $(‘body’).scrollTop() || $(‘html’).scrollTop() > 0) ” which has no opening { and thus does not work.

    Thanks for this anyway.

  5. I can’t get the slideout menu to work. I’m using the ZIP files as a fresh theme, and the menu area “slides out”, but the menu isn’t located there. All I see is my site title and description, and the search box.

  6. Hi, I just tried to “install” these features but it seems there are some bugs or I just did it wrong?!

    The mobile style ist just awfull (iphone) > menue Button ist to big, search icon not working and so on …

    Desktop (small) version isn’t much better, search icon overlaps menue button, positions are messed, WP admin bar overlaps header and so on …

    Here’s the link to the page http://www.haus-klaric.com/wp/ it’s just a fresh install with an child, I’ve done everything exact like described. I tried to fix the desktop but endet up messing the mobile style even more so I went back to default which is not much better but so you can see the results I got here. Tested on firefox, chrome and mobile safari (iphone 5/5s)

    thanks
    greets HH

  7. Fantastic article over all, however; one point worth noting. The wp_is_mobile() method is not cache aware. It is a really bad idea to rely on this to perform your mobile detection if you have any sort of advanced caching like memcache or varnish in place as this method will never be called on a cached page. Relying on this method will greatly reduce your theme’s responsiveness and could break it completely.

    The twentyfourteen dev team explicitly rejected using wp_is_mobile() for this very reason in their theme.

    • Yah, I know, but I think this is a issue that caching plugins need to address. That said, I’m in the research phase of a way of dealing with this, not sure it that research will be another tutorial or a patch for wp_is_mobile() but I’m working on it.

  8. Hi Johs. I have downloaded your child theme from GitHub. I’m tring it. I have noticed that is not possible to change color in blog name. I can see correctly in the preview, but after save it, I see the default color. Any solution? Thanks and sorry my english, I’m italian.

    • Thanks for checking out my theme. I’m in them middle of making some decisions to how custom header styles are set. I’m leaning towards removing all custom header functionality, but I’m not sure. Right now (January 15, 2014) there is no output of custom header styles but the options are still in the customizer.

      You can always set the color of the blog name with CSS using the .site-title a & .site-title a:hover selectors.

  9. Can someone offer a me a little help please? Using the standard twentyfourteen theme when I click on the search button, the search box drops down and I’m able to type in a search term.

    If I activate the Amesome 2014 child theme downloaded from here (and unmodified), when I click the search icon, nothing happens.

    Does this happen to anyone else?

    • @Teesside
      that’s because the developer dequeued a script from the parent theme that’s needed for the toggle. Try this:
      in your awesome_2014 functions.php file, comment this line:
      wp_dequeue_script( ‘twentyfourteen-script’ );
      regards
      Andrea

      • Andrea thanks again for helping iron out the bugs on this.

        The reason why it was dequeued was because of the changes to the slider, which required a different initialization function. Removing that dequeue will break the slider.

        What I realized is that the way the new scripts were being enqueued was preventing the child theme functions.js from being included most of the time due to the way we had the dependency arguments in wp_enqueue_script. I’ve updated the code in the article and the download will be updated soon (I don’t have access to that.)

        On line 131 and on of functions.php, update it to look like this:

        //dequeue/enqueue scripts
        function awesome_2014_featured_content_scripts() {
        wp_dequeue_script( ‘twentyfourteen-script’ );
        wp_dequeue_script( ‘twentyfourteen-slider’ );

        wp_enqueue_script( ‘awesome_2014-script’, get_stylesheet_directory_uri() . ‘/js/functions.js’, array( ‘jquery’ ), ” , true );
        if ( is_front_page() && ‘slider’ == get_theme_mod( ‘featured_content_layout’ ) ) {
        wp_enqueue_script( ‘awesome_2014-slider’, get_stylesheet_directory_uri() . ‘/js/jquery.flexslider-min.js’, array( ‘jquery’, ‘awesome_2014-script’ ), ” , true );
        wp_localize_script( ‘awesome_2014-slider’, ‘featuredSliderDefaults’, array(
        ‘prevText’ => __( ‘Previous’, ‘awesome_2014′ ),
        ‘nextText’ => __( ‘Next’, ‘awesome_2014′ )
        ) );
        }
        }
        add_action( ‘wp_enqueue_scripts’ , ‘awesome_2014_featured_content_scripts’ , 999 );

  10. Awesome post, thanks Josh!

    I am using your instructions to child theme our Church site and all is great, except the featured content now seems to grab all posts. The sticky option seems to be gone. Is it possible to default back to the Sticky posts if no tag is provided?

  11. I’m having the same problem with the headers. On desktop the Header text gets cutoff as does the top of my header image. On a tablet it’s slightly worse. On mobile the header image doesn’t appear at all.

  12. In regard to centering… I used a plugin child theme configurator, which I have used before on Premium Themes.
    Usually to make adjustments to the .css I just go to the Appearance > editor and it is there. (for the child theme it is blank other than the @import…)
    But on this Twenty Fourteen, I don’t see that as an option. Do I have to go to the .css in my Cpanel to access it for this theme?

    • Thank you. I did not find Center Twenty Fourteen, but I did find Extend Twenty….. That was the first element front and center to change. Move page to Center. Interesting on the JetPack CSS vs a Child Theme. With a quick internet search, I found others that concur with you.
      I would love learn more about the differences. But should I ask on a separate thread?

      • Yes, that is the plugin I meant. Either ZGani changed the name or I remembered it wrong.

        Some will disagree with me, but I figure if you don’t need to change any templates, not the CSS, why add a child theme? JetPack CSS or a simple plugin to enqueue an extra style sheet or run wp_inline_style() on the primary stylesheet is easier to manage in my opinion. Biggest advantage is that the theme’s options or theme mods stay with the parent theme.

  13. Awesome post, Josh! Thanks for sharing.

    As for the topbar.js issues folks have been having: the whole thing (for me) was resolved when I noticed the apostrophe’s from line 29 of topbar.js were coming through as unicode curly quotes when copy/pasted straight from your article. Once I changed them to plain ‘ol single quotes everything worked flawlessly and I am a happy camper :)

    Thanks again!

  14. Great stuff, Josh. Thanks for sharing that. I do, however, have a design issue that I can’t seem to get around. Maybe you can help?

    I’ve added a new widget/sidebar area, which is supposed to go directly below the Featured posts (top). The default left sidebar is viewing fine.
    But the widget/sidebar that I’ve added to display below the Featured posts thumbs is viewing, but won’t scoot to the right of the left sidebar. It stays flushed to the left, behind the left sidebar. I’d like for it to line up with the rest of the content on that page.

    I’ve tried placing the “get sidebar” tag in Index.php, featured-content.php, and content.php, but none of them wants to play nice.

    Any suggestions?
    Thanks much,

  15. Hi!

    Hello!

    Would such a request. I really like this template but I would like to tile – grid were a little smaller. Do you give advice to do so was the ability to set the amount of the total number of posts num_posts_grid, and the amount of those posts in one line instead of 3, for example – 4 or 5 in the first line and just 4-5 in the second line a total of 10 posts on the main page .

    The second question. How to easily remove the category name under the photo in the grid layount post?

    thx

  16. Dear Josh

    thank you so much for sharing, it really makes a BIG difference to WP 2014, much nicer with your additions, but also they way you have take the time to detail out all the mods is really commendable.

    I have been playing with the theme and I have come with a couple of improvements myself. I have added to the Customizer the ability to define the slider speed as well as the delay time on the first slide. I would be happy to send you my changes if you wish to include them.

    kind regards
    Vrata

  17. Dear Josh

    yes, it’s on my GitHub repo, however please note that the changes I made (functions.php, js/functions.js) which allow for the additional flexslider settings to be adjusted are part of a child theme I am working on which is to align 2014 to the right (Sidebar + header).

    You can find my child theme: Awesome_2014_right – https://github.com/syllogic-consultants/awesome_2014_right/tree/master

    1 Question: Josh, the flexslider is in version 2 and has the ability to set the slide animation to slide or fade in the js init function. When I tried to do this on Awesome 2014, it broke the slider. Are you using an older version of the flexslider?

    Dear Mateusz

    you can find the first draft of the theme (it works as a child theme of 2014) in my git repo (link above). I am putting a few more touches to the theme today and then will be applying it to our new site under dev. I will give you our dev site for you to have a first feel for it by eof or tomorrow.

    best

    Vrata

    • forgot to add that I have also modified the order in which the featured posts are returned, I use the slug of the post, allowing me to order by slides with more ease by renaming the featured slug to slide1, slide2, slide3 and so on… so briefly, my changes are:

      - set slide speed
      - set first slide delay time before animation starts
      - set slide order by renaming your featured posts slugs

      happy blog’in!

  18. Love the child theme, so much sleeker than Twentyfourteen alone. I am having a problem trying to figure out how to adjust the grid sizes in the featured-content-inner as they are way too wide for what I’m trying to do and the header-entry section cuts off the featured image. If someone could point me in the right direction for tweaking this section, I would forever grateful.

  19. Brilliant post and excellent work my man!

    I followed along with good results, but in the end downloaded the child theme from Github.

    Using it to build a personal project now and with a few added CSS changes, I love it!

    Thought I would miss the big header image since I did have a kick ass image for that area, but it’s an acceptable loss for all of the other benefits of the theme.

    Thank you for all your hard work here. It is much appreciated.

  20. Out of sequence question… but how much would you or someone else you know charge to just make the changes for someone? Not sure how much time it would take… if this should be adjusted or it would be cheaper to be replaced with a purchased theme. I can tell you that I am not going to do these changes myself. Don’t feel like applying myself to it… would rather spend my energies elsewhere. I’m going to use this as it is for now. http://www.graceexplosion.com. Thanks.

  21. Hi Josh,

    Great job on the article! I wasn’t able to get the modifications working through the step by step instructions, but the “Twenty Fourteen child theme” download worked great!

    I did go through and remove parts 1,3 and 4 from the files so my site could benefit from the awesome mobile slider menu. The only issue was it cause modifications to my themes desktop menu bar. Is there a way to apply the mobile menu modification without effecting the desktop version of the theme? I performed the theme changes on a test site here; http://mobile.backpackersjournal.com/.

    Thanks again for writing the article, great information!

    -Carl

    • Just figured it out! For others who want to implement the slide-out menu without any of the other header changes; starting at the ” down, needs to be replaced in your header file with the code below. Then you need to remove all the style.css from the ‘/* enhancing the topbar */’ section. Sorry it’s not properly formatted for code, but I hope this helps a few.

      <a href="” rel=”home”>


      <a id="menu-toggle" class="second" title="” href=”#slideout”>

      <a href="” rel=”home”>


      ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>

  22. I am still new at learning to edit WordPress, although I’ve used it for my blogs for years. I am really appreciating your tutorials as they go step by step and you explain what each piece is doing.

    I am having an issue on the second functions.php edit on Step 2, where you say, “This simply registers the new location and allows you to assign a menu to the location. Go to Themes > Menus in the WordPress Admin interface and add a menu to the mobile menu location.”

    When I try to go to Themes here, I get this message: “Fatal error: Cannot redeclare twentyfourteen_content_width() (previously declared in /…/exploringeso.com/wp-content/themes/twentyfourteen-child/functions.php:128) in /…/exploringeso.com/wp-content/themes/twentyfourteen/functions.php on line 131″.

    Neither line (128 or 131) has been altered in the editing, but if I remove the edit, I don’t get the error message anymore (and this is the first time I’ve edited twenty fourteen, so that’s not a factor).

    I really appreciate you sharing a download of your child theme. I will probably use it for now, but I am trying to learn as I go along, so any help or explanation of what I’ve done wrong to get the error above would be greatly appreciated.

    Thanks again for sharing your tutorial. :)

  23. Hello,

    apparently upgrading WP to 3.9 broke something as the slider/grid is now taking the latest post irrespective for the “featured” tag.

    Any hint?

    Cheers

  24. Josh, I feel pretty stupid asking this, but I can’t seem to get the posts onto a Home page that also shows in my nav bar. When the site opens, it opens to the front page with the blog grid and then the posts, but if one clicks off to another page, they can’t get back Home, as there isn’t one in the nav. I can, of course, add Home to the menu and make a page, but it isn’t the frontpage Home with posts.

    Also, my header image is still cropped at the top despite my apostrophe’s not being curly on line 30 (not 29 fro me), and my image is exactly the specified size. Can you help me?
    My site is at http://www.sydneyjanebaily.com.
    Thanks.

  25. Ive just created a child theme for twenty fourteen and have the fourteen colours plugin installed that allows me to manipulate colours however the plugin seems to only affect the parent theme and not the child even though in child view the changes are shown to be made. Does that make sense, and is anyone able to advise on how to correct this?

  26. I know this is a bit dated now, now what f I dont want the grid view ? is there a way i can completely disable it ? I guess Im confused looking at the code.

  27. @mirko_grewing
    “apparently upgrading WP to 3.9 broke something as the slider/grid is now taking the latest post irrespective for the “featured” tag.”

    Try to change
    this :
    $fc_options = (array) get_option( ‘featured-content’ );
    to this :
    $fc_options = get_option( ‘featured-content’ );
    in “functions.php” line 99.

    Seems to work for me…

Participate