{"id":124289,"date":"2014-01-08T08:00:28","date_gmt":"2014-01-08T13:00:28","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=124289"},"modified":"2014-01-08T08:00:28","modified_gmt":"2014-01-08T13:00:28","slug":"how-to-make-twenty-fourteen-or-any-other-wp-theme-super","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/how-to-make-twenty-fourteen-or-any-other-wp-theme-super\/","title":{"rendered":"How To Make Twenty Fourteen (Or Any Other WP Theme!) Super"},"content":{"rendered":"<p>In a <a title=\"WordPress Twenty Fourteen Theme: A Flawed Beauty\" href=\"https:\/\/wpmudev.com\/blog\/wordpress-twentyfourteen-theme-a-flawed-beauty\/\" target=\"_blank\" rel=\"noopener\">recent review of WordPress&#8217; latest default theme<\/a>, WPMU DEV&#8217;s Chris Knowles called Twenty Fourteen a &#8220;flawed beauty.&#8221;<\/p>\n<p>In that article, Chris recommended a number of potential improvements, and together we&#8217;ve put together this ultimate guide to addressing those flaws.<\/p>\n<p>And what&#8217;s more, these tips and techniques can be used in<strong> practically any WordPress theme<\/strong>.<\/p>\n<p>So, break out the cape, fire up your favorite editor, and give Twenty Fourteen a superhero makeover.<\/p>\n<p>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:<\/p>\n<ol>\n<li>Centering the design, instead of the default left-alignment<\/li>\n<li>Adding a slide-out sidebar for mobile devices, rather than simply moving the default sidebar below the content<\/li>\n<li>Improving the header bar so that logos and other elements can be included<\/li>\n<li>Enhancing the featured content functions in order to:\n<ul>\n<li>allow a different layout on a mobile device<\/li>\n<li>specify how many posts should be used for each layout<\/li>\n<li>include custom post types in the layouts<\/li>\n<li>automatically scroll the slider<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p>In working your way through these four main areas, you&#8217;ll not only have a truly functional, great looking Twenty Fourteen, but you&#8217;ll also have picked up plenty of tips and tricks that you can apply to virtually any other WordPress theme.<\/p>\n<p>And to make your life even easier we&#8217;ve given you two paths to glory:<\/p>\n<p>1. <a href=\"#partay\">Skip to the end of this article<\/a> and download the new zipped theme file<br \/>\n2. Create it yourself using the following awesome tutorial, and learn as you go<\/p>\n<p>Still here? Great! So let&#8217;s begin&#8230;<\/p>\n<h2>Before We Begin : Create a Child Theme<\/h2>\n<p>As we know, if we want to customize a theme, then it&#8217;s essential to use a child theme. We&#8217;ll be creating quite a few files in this tutorial, so go and create a child theme now, including:<\/p>\n<ul>\n<li>The mandatory <em>style.css<\/em> file<\/li>\n<li><em>\/js<\/em> and <em>css<\/em> folders<\/li>\n<li>An empty <em>functions.php<\/em> file in the theme folder<\/li>\n<\/ul>\n<p>If you don&#8217;t know how to create a child theme then be sure to <a title=\"How to Create a WordPress Child Theme\" href=\"https:\/\/wpmudev.com\/blog\/create-wordpress-child-theme\/\" target=\"_blank\">read Rae&#8217;s excellent tutorial on how to create a child theme<\/a>. The child theme&#8217;s style.css needs to point to the original Twenty Fourteen theme:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\/*\r\nTheme Name: Awesome Twenty Fourteen\r\nTemplate: twentyfourteen\r\n*\/\r\n@import url(&quot;..\/twentyfourteen\/style.css&quot;);\r\n\/* Theme customization starts here *\/\r\n<\/pre>\n<p>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.<\/p>\n<h2>1. How To Center Twenty Fourteen<\/h2>\n<h3>What&#8217;s The Problem?<\/h3>\n<p>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.<\/p>\n<h3>How To Fix It?<\/h3>\n<p>A simple update to the stylesheet to center the design.<\/p>\n<figure id=\"attachment_124578\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-124578\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-centred.jpg\" alt=\"Screenshot of Twenty Fourteen centred rather than left-aligned\" width=\"700\" height=\"407\" \/><figcaption class=\"wp-caption-text\">Centering fixed-width designs do seem to make them feel more balanced<\/figcaption><\/figure>\n<h3>The Solution&#8230;<\/h3>\n<h4>Centering With Style<\/h4>\n<p>The outermost container of the theme&#8217;s design has the class <em>site,<\/em> and so we can center it by using the standard method of setting the container&#8217;s\u00a0<em>margin<\/em> to <em>0 auto<\/em>.<\/p>\n<p>Add the following to the <em>style.css<\/em> you just created in your child theme:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n.site {\r\nmargin: 0 auto;\r\n}\r\n<\/pre>\n<p>If you want to play with the background color, then you can set this in the theme options available from the <em>Appearance<\/em> &gt; <em>Customize<\/em> menu option.<\/p>\n<p>If you would like to customize the colors further, take a look at the\u00a0<a href=\"http:\/\/wordpress.org\/plugins\/fourteen-colors\/\" rel=\"noopener\" target=\"_blank\">Fourteen Colors<\/a>\u00a0plugin. It\u00a0allows the modification of the theme&#8217;s color scheme, automatically adjusting contrast to maintain accessibility and legibility.<\/p>\n<h2>2. How To Add a Slideout Sidebar<\/h2>\n<h3>What&#8217;s The Problem?<\/h3>\n<p>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.<\/p>\n<h3>How To Fix It?<\/h3>\n<p>Add a mobile-specific sidebar to the theme that slides out. We&#8217;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.<\/p>\n<figure id=\"attachment_124579\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-124579\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-slideout.jpg\" alt=\"Screenshot of slide-out menu on a tablet\" width=\"700\" height=\"538\" \/><figcaption class=\"wp-caption-text\">A slide-out menu is far more useful on mobile devices<\/figcaption><\/figure>\n<p>Using a mobile-specific sidebar also allows greater flexibility when targeting content to a platform.<\/p>\n<h3>The Solution&#8230;<\/h3>\n<p>We are going to implement the slide-out sidebar using\u00a0Alberto Valero&#8217;s <a title=\"Visit Alberto's Sidr jQuery plugin page\" href=\"http:\/\/www.berriart.com\/sidr\/\" rel=\"noopener\" target=\"_blank\">Sidr<\/a>\u00a0plugin for jQuery. If you are interested in adding a slide-out sidebar to any theme then check out <a title=\"Read more about how to add side menus to any WordPress theme\" href=\"https:\/\/wpmudev.com\/blog\/how-to-add-side-menus-to-a-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">Chris&#8217;s earlier tutorial<\/a>.<\/p>\n<p>Before we get to the plugin itself, though, we have to set up the components for the new sidebar.<\/p>\n<h4>Create a New Mobile Widget Area<\/h4>\n<p>Add the following code to your <em>functions.php<\/em> file to add a separate widget area for the new slide-out sidebar:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/\/Add mobile sidebar\r\nfunction awesome_2014_mobile_widget_area() {\r\nregister_sidebar( array(\r\n&#039;name&#039; =&gt; __( &#039;Mobile Sidebar&#039;, &#039;awesome_2014&#039; ),\r\n&#039;id&#039; =&gt; &#039;sidebar-mobile&#039;,\r\n&#039;description&#039; =&gt; __( &#039;Slideout sidebar for mobile devices.&#039;, &#039;awesome_2014&#039; ),\r\n&#039;before_widget&#039; =&gt; &#039;\r\n&lt;aside id=&quot;%1$s&quot; class=&quot;widget %2$s mobile-widget&quot;&gt;&#039;,\r\n&#039;after_widget&#039; =&gt; &#039;&lt;\/aside&gt;\r\n\r\n&#039;,\r\n&#039;before_title&#039; =&gt; &#039;\r\n&lt;h1 class=&quot;widget-title&quot;&gt;&#039;,\r\n&#039;after_title&#039; =&gt; &#039;&lt;\/h1&gt;\r\n\r\n&#039;,\r\n) );\r\n}\r\nadd_action( &#039;widgets_init&#039;, &#039;awesome_2014_mobile_widget_area&#039; );\r\n\r\n<\/pre>\n<p>Notice that the class <em>mobile-widget<\/em> is added to the widget&#8217;s container to allow these widgets to be styled separately from the other widgets in the theme.<\/p>\n<h4>Add A Mobile-only Menu Location<\/h4>\n<p>As we are hijacking the header&#8217;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&#8217;ll add a &#8220;mobile&#8221; option to the existing menu locations which allow us to assign a specific mobile menu if we wish.<\/p>\n<p>Add the following code to <em>functions.php<\/em>:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/\/add mobile menu\r\nfunction awesome_2014_setup() {\r\nregister_nav_menus( array(\r\n&#039;mobile&#039; =&gt; __( &#039;Mobile menu in left sidebar&#039;, &#039;awesome_2014&#039; ),\r\n) );\r\n}\r\nadd_action( &#039;after_setup_theme&#039;, &#039;awesome_2014_setup&#039; );\r\n\r\n<\/pre>\n<p>This simply registers the new location and allows you to assign a menu to the location. Go to <em>Themes<\/em> &gt; <em>Menus<\/em> in the WordPress Admin interface and add a menu to the mobile menu location.<\/p>\n<h4>Outputting the Mobile Sidebar<\/h4>\n<p>Now that we have the new widget area and the new menu, it&#8217;s time to create ensure that the correct sidebar is output.<\/p>\n<p>What we are actually going to do is override Twenty Fourteen&#8217;s <em>sidebar.php<\/em> template and use the <em>wp_is_mobile()<\/em> function to output the slideout sidebar if appropriate.<\/p>\n<p>Copy the <em>sidebar.php<\/em> template from the Twenty Fourteen folder to the child theme folder, open it and replace the existing code with the following:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&lt;?php \/** * The Sidebar containing the main widget area * *\/ ?&gt;\r\n\r\n&lt;?php if ( wp_is_mobile() ) : \/\/ display mobile sidebar ?&gt;\r\n&lt;div id=&quot;slideout&quot; class=&quot;sidr&quot;&gt;\r\n&lt;div id=&quot;slideout-top&quot;&gt;&lt;?php $description = get_bloginfo( &#039;description&#039;, &#039;display&#039; ); if ( ! empty ( $description ) ) : ?&gt;\r\n&lt;h2 class=&quot;site-description&quot;&gt;&lt;?php echo esc_html( $description ); ?&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n&lt;div class=&quot;search-toggle&quot;&gt;&lt;a class=&quot;screen-reader-text&quot; href=&quot;#search-container&quot;&gt;&lt;?php _e( &#039;Search&#039;, &#039;twentyfourteen&#039; ); ?&gt;\r\n\r\n&lt;div id=&quot;search-container&quot; class=&quot;search-box-wrapper hide&quot;&gt;\r\n&lt;div class=&quot;search-box&quot;&gt;&lt;?php get_search_form(); ?&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;?php if ( has_nav_menu( &#039;mobile&#039; ) ) : ?&gt;\r\n\r\n&lt;nav class=&quot;navigation site-navigation&quot; role=&quot;navigation&quot;&gt;&lt;?php wp_nav_menu( array( &#039;theme_location&#039; =&gt; &#039;mobile&#039; ) ); ?&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n\r\n&lt;?php if ( is_active_sidebar( &#039;sidebar-mobile&#039; ) ) : ?&gt;\r\n&lt;div id=&quot;mobile-sidebar&quot; class=&quot;widget-area&quot; role=&quot;complementary&quot;&gt;&lt;?php dynamic_sidebar( &#039;sidebar-mobile&#039; ); ?&gt;\r\n\r\n&lt;!-- #mobile-sidebar --&gt;\r\n&lt;?php endif;?&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;!-- #seconday-mobile --&gt;\r\n\r\n&lt;?php else: \/\/ display normal sidebar ?&gt;\r\n&lt;div id=&quot;secondary&quot;&gt;&lt;?php if ( has_nav_menu( &#039;secondary&#039; ) ) : ?&gt;\r\n\r\n&lt;?php wp_nav_menu( array( &#039;theme_location&#039; =&gt; &#039;secondary&#039; ) ); ?&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n\r\n&lt;?php if ( is_active_sidebar( &#039;sidebar-1&#039; ) ) : ?&gt;\r\n&lt;div id=&quot;primary-sidebar&quot; class=&quot;primary-sidebar widget-area&quot; role=&quot;complementary&quot;&gt;&lt;?php dynamic_sidebar( &#039;sidebar-1&#039; ); ?&gt;\r\n\r\n&lt;!-- #primary-sidebar --&gt;\r\n&lt;?php endif; ?&gt;\r\n\r\n&lt;\/div&gt;\r\n&lt;!-- #secondary --&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n\r\n<\/pre>\n<p>This new sidebar uses the device detection function <em>wp_is_mobile()<\/em> 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 <a href=\"https:\/\/wpmudev.com\/blog\/how-to-adapt-your-wordpress-theme-layout-for-different-devices\/\" target=\"_blank\" rel=\"noopener\">adaptive layout changes for WordPress themes<\/a>.<\/p>\n<p>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.<\/p>\n<p>The mobile sidebar also places the id of <em>#slideout<\/em> and the class of <em>sidr<\/em> on the outermost container of the sidebar.<\/p>\n<h4>Rearranging The Header<\/h4>\n<p>Much like we did with the sidebars, we are going to use\u00a0<em>wp_is_mobile()<\/em>\u00a0to output two different headers, depending on the device making the request.<\/p>\n<p>Whilst the desktop header will remain unchanged, the mobile header will allow the slide-out action\u00a0to be triggered by the menu icon and prevent the default mobile menu from displaying.<\/p>\n<p>This time we need to override the parent header\u00a0template, so create a <em>header.php<\/em> file in the child theme root folder and add the following:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&lt;?php\r\n\/**\r\n* The Header for our theme\r\n*\r\n* Displays all of the &lt;head&gt; section and everything up till \r\n&lt;div id=&quot;main&quot;&gt;\r\n*\/\r\n?&gt;&lt;!DOCTYPE html&gt;\r\n&lt;!--&#x5B;if IE 7]&gt;\r\n&lt;html class=&quot;ie ie7&quot; &lt;?php language_attributes(); ?&gt;&gt;\r\n&lt;!&#x5B;endif]--&gt;\r\n&lt;!--&#x5B;if IE 8]&gt;\r\n&lt;html class=&quot;ie ie8&quot; &lt;?php language_attributes(); ?&gt;&gt;\r\n&lt;!&#x5B;endif]--&gt;\r\n&lt;!--&#x5B;if !(IE 7) | !(IE 8) ]&gt;&lt;!--&gt;\r\n&lt;html &lt;?php language_attributes(); ?&gt;&gt;\r\n&lt;!--&lt;!&#x5B;endif]--&gt;\r\n&lt;head&gt;\r\n&lt;meta charset=&quot;&lt;?php bloginfo( &#039;charset&#039; ); ?&gt;&quot;&gt;\r\n&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n&lt;title&gt;&lt;?php wp_title( &#039;|&#039;, true, &#039;right&#039; ); ?&gt;&lt;\/title&gt;\r\n&lt;link rel=&quot;profile&quot; href=&quot;http:\/\/gmpg.org\/xfn\/11&quot;&gt;\r\n&lt;link rel=&quot;pingback&quot; href=&quot;&lt;?php bloginfo( &#039;pingback_url&#039; ); ?&gt;&quot;&gt;\r\n&lt;!--&#x5B;if lt IE 9]&gt;\r\n&lt;img src=&quot;data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7&quot; data-wp-preserve=&quot;%3Cscript%20src%3D%22%26lt%3B%3Fphp%20echo%20get_template_directory_uri()%3B%20%3F%26gt%3B%2Fjs%2Fhtml5.js%22%3E%3C%2Fscript%3E&quot; data-mce-resize=&quot;false&quot; data-mce-placeholder=&quot;1&quot; class=&quot;mce-object&quot; width=&quot;20&quot; height=&quot;20&quot; alt=&quot;&lt;script&gt;&quot; title=&quot;&lt;script&gt;&quot; \/&gt;\r\n&lt;!&#x5B;endif]--&gt;\r\n&lt;?php wp_head(); ?&gt;\r\n&lt;\/head&gt;\r\n\r\n&lt;body &lt;?php body_class(); ?&gt;&gt;\r\n\r\n&lt;div id=&quot;page&quot; class=&quot;hfeed site&quot;&gt;\r\n&lt;?php if ( get_header_image() ) : ?&gt;\r\n\r\n&lt;div id=&quot;site-header&quot;&gt;\r\n&lt;a href=&quot;&lt;?php echo esc_url( home_url( &#039;\/&#039; ) ); ?&gt;&quot; rel=&quot;home&quot;&gt;\r\n&lt;img src=&quot;&lt;?php header_image(); ?&gt;&quot; width=&quot;&lt;?php echo get_custom_header()-&gt;width; ?&gt;&quot; height=&quot;&lt;?php echo get_custom_header()-&gt;height; ?&gt;&quot; alt=&quot;&quot;&gt;\r\n&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n\r\n&lt;?php if ( wp_is_mobile() ) : ?&gt;\r\n\r\n\r\n&lt;header id=&quot;masthead&quot; class=&quot;site-header&quot; role=&quot;banner&quot;&gt;\r\n\r\n&lt;div class=&quot;header-main&quot;&gt;\r\n\r\n&lt;h1 class=&quot;site-title&quot;&gt;&lt;a href=&quot;&lt;?php echo esc_url( home_url( &#039;\/&#039; ) ); ?&gt;&quot; rel=&quot;home&quot;&gt;&lt;?php bloginfo( &#039;name&#039; ); ?&gt;&lt;\/a&gt;&lt;\/h1&gt;\r\n\r\n&lt;?php $description = get_bloginfo( &#039;description&#039;, &#039;display&#039; ); if ( ! empty ( $description ) ) : ?&gt;\r\n\r\n&lt;h2 class=&quot;topbar-description&quot;&gt;&lt;?php echo esc_html( $description ); ?&gt;&lt;\/h2&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;a class=&quot;screen-reader-text skip-link&quot; href=&quot;#content&quot;&gt;&lt;?php _e( &#039;Skip to content&#039;, &#039;twentyfourteen&#039; ); ?&gt;&lt;\/a&gt;\r\n&lt;a id=&quot;menu-toggle&quot; class=&quot;second&quot; title=&quot;&lt;?php _e( &#039;Click To Show Sidebar&#039;, &#039;awesome_2014&#039; ); ?&gt;&quot; href=&quot;#slideout&quot;&gt;&lt;span class=&quot;genericon genericon-menu&quot;&gt;&lt;\/span&gt;&lt;\/a&gt;\r\n&lt;\/header&gt;\r\n\r\n&lt;!-- #masthead --&gt;\r\n\r\n&lt;?php else: ?&gt;\r\n\r\n\r\n&lt;header id=&quot;masthead&quot; class=&quot;site-header&quot; role=&quot;banner&quot;&gt;\r\n\r\n&lt;div id=&quot;big-top&quot;&gt;\r\n\r\n&lt;div class=&quot;header-main&quot;&gt;\r\n\r\n&lt;h1 class=&quot;site-title&quot;&gt;&lt;a href=&quot;&lt;?php echo esc_url( home_url( &#039;\/&#039; ) ); ?&gt;&quot; rel=&quot;home&quot;&gt;&lt;?php bloginfo( &#039;name&#039; ); ?&gt;&lt;\/a&gt;&lt;\/h1&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n&lt;?php $description = get_bloginfo( &#039;description&#039;, &#039;display&#039; ); if ( ! empty ( $description ) ) : ?&gt;\r\n\r\n&lt;h2 class=&quot;topbar-description&quot;&gt;&lt;?php echo esc_html( $description ); ?&gt;&lt;\/h2&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n\r\n&lt;nav id=&quot;primary-navigation&quot; class=&quot;site-navigation primary-navigation&quot; role=&quot;navigation&quot;&gt;\r\n\r\n&lt;div class=&quot;search-toggle&quot;&gt;\r\n&lt;a href=&quot;#search-container&quot; class=&quot;screen-reader-text&quot;&gt;&lt;?php _e( &#039;Search&#039;, &#039;twentyfourteen&#039; ); ?&gt;&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;div id=&quot;search-container&quot; class=&quot;search-box-wrapper hide&quot;&gt;\r\n\r\n&lt;div class=&quot;search-box&quot;&gt;\r\n&lt;?php get_search_form(); ?&gt;\r\n&lt;\/div&gt;\r\n\r\n&lt;\/div&gt;\r\n\r\n\r\n&lt;h1 class=&quot;menu-toggle&quot;&gt;&lt;?php _e( &#039;Primary Menu&#039;, &#039;twentyfourteen&#039; ); ?&gt;&lt;\/h1&gt;\r\n\r\n&lt;a class=&quot;screen-reader-text skip-link&quot; href=&quot;#content&quot;&gt;&lt;?php _e( &#039;Skip to content&#039;, &#039;twentyfourteen&#039; ); ?&gt;&lt;\/a&gt;\r\n&lt;?php wp_nav_menu( array( &#039;theme_location&#039; =&gt; &#039;primary&#039;, &#039;menu_class&#039; =&gt; &#039;nav-menu&#039;, &#039;container_class&#039; =&gt; &#039;topbar-menu&#039;, ) ); ?&gt;\r\n\r\n&lt;\/nav&gt;\r\n\r\n\r\n&lt;\/header&gt;\r\n\r\n&lt;!-- #masthead --&gt;\r\n\r\n&lt;?php endif; ?&gt;\r\n\r\n\r\n&lt;div id=&quot;main&quot; class=&quot;site-main&quot;&gt;\r\n\r\n&lt;div id=&quot;page&quot; class=&quot;hfeed site&quot;&gt;\r\n\r\n&lt;div id=&quot;main&quot; class=&quot;site-main&quot;&gt;\r\n\r\n<\/pre>\n<p>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&#8217;t worry about that for now.<\/p>\n<h4>Yet More Style Fine-Tuning<\/h4>\n<p>In order to get the correct layout for the mobile header, we need to fine-tune the styling. Go back to the <em>style.css<\/em> and add the following:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/* Make room for the search toggle and site description in mobile sidebar *\/\r\n#slideout-top {\r\nheight:48px;\r\n}\r\n\r\n#slideout-top .site-description {\r\ndisplay: block;\r\ntext-align: left;\r\nfont-family: lato;\r\nwidth: 205px;\r\noverflow: hidden;\r\n}\r\n\r\n#slideout-top .search-toggle {\r\nmargin-right: 0;\r\n}\r\n\r\n\/* Override Sidr Style For 2014 Search *\/\r\n#slideout-top .search-box .search-field {\r\nbackground-color: white;\r\ncolor: black;\r\n}\r\n\r\n\/* Keep mobile toggle on the right and resize the genricon *\/\r\n#menu-toggle {\r\nfloat: right;\r\ndisplay: inline;\r\n}\r\n\r\n#menu-toggle .genericon {\r\nfont-size: 48px;\r\npadding: 0 1em 0 0;\r\nz-index: 999;\r\n}\r\n\r\n\/* enhancing the topbar *\/\r\n#big-top {\r\ndisplay: block; }\r\n\r\n#masthead {\r\nheight: 88px;\r\nposition: fixed;\r\ntop: 0;\r\n}\r\n\r\n.header-main {\r\ndisplay: inline;\r\n}\r\n\r\n.site-title{\r\nmargin: 0 0 0 20px;\r\n}\r\n\r\nnav#primary-navigation {\r\nwidth: 100%;\r\ndisplay: block;\r\ntop: 40px;\r\nleft: 0px;\r\nposition: absolute;\r\npadding-left: 30px;\r\n}\r\n\r\n.topbar-description {\r\ncolor: #fff;\r\ndisplay: inline;\r\nfont-weight: bold;\r\nfont-size: 100%;\r\ntext-transform: lowercase;\r\nline-height: 50px;\r\nvertical-align: baseline;\r\nmargin-left: 20px;\r\nfont-style: italic;\r\n}\r\n\r\n<\/pre>\n<p>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 <em>#menu-toggle .genericon<\/em>. It also carves out a space for the site description and search toggle at the top of the of the slide-out sidebar.<\/p>\n<h4>Activating The Slideout Sidebar<\/h4>\n<p>Now that we&#8217;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\u00a0<a title=\"Download the Sidr jQuery plugin\" href=\"https:\/\/github.com\/artberri\/sidr-package\/archive\/1.2.1.zip\" rel=\"noopener\" target=\"_blank\">download the plugin<\/a>, unzip it, rename the folder\u00a0<em>sidr<\/em>\u00a0and copy it to the\u00a0<em>js<\/em>\u00a0folder in the child theme.<\/p>\n<p>Create a new file in the <em>\/js<\/em> folder called <em>slideout.js<\/em> and add the following javascript:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/* hook up the Sidr functionality *\/\r\n\r\n(function($) {\r\n\r\n$(document).ready(function(){\r\n\r\n\/\/ hook up the left side menu\r\n\r\n$(&quot;#menu-toggle&quot;).sidr({\r\nname: &quot;slideout&quot;,\r\nside: &quot;left&quot;,\r\ndisplace: false,\r\n});\r\n\r\n});\r\n\r\n})(jQuery);\r\n\r\n<\/pre>\n<p>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.<\/p>\n<h4>Adding the Javascript and CSS<\/h4>\n<p>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.<\/p>\n<p>Add the following code to the functions.php file:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/**\r\n* Add slideout Sidebar\r\n*\/\r\n\/\/ Enqueue the css\/js for slideout\r\nfunction awesome_2014_add_slideout() {\r\nwp_enqueue_script( &#039;sidr&#039;, get_stylesheet_directory_uri().&#039;\/js\/sidr\/jquery.sidr.min.js&#039;, array(&#039;jquery&#039;), null, true );\r\nwp_enqueue_script( &#039;slideout&#039;, get_stylesheet_directory_uri().&#039;\/js\/slideout.js&#039;, array(&#039;sidr&#039;), null, true );\r\nwp_enqueue_style( &#039;slideout&#039;, get_stylesheet_directory_uri().&#039;\/js\/sidr\/stylesheets\/jquery.sidr.dark.css&#039;);\r\n}\r\n\r\n\/\/ add only if is mobile\r\nif ( wp_is_mobile() ) {\r\nadd_action( &#039;wp_enqueue_scripts&#039;, &#039;awesome_2014_add_slideout&#039;, 10 );\r\n}\r\n\r\n<\/pre>\n<p>This uses the wp_enqueue_scripts action to ensure that the necessary javavscript and CSS files are output. You&#8217;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.<\/p>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Make sure you&#8217;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 (<a title=\"How To Test WordPress On Tablets And Mobiles You Don\u2019t Own\" href=\"https:\/\/wpmudev.com\/blog\/how-to-test-wordpress-on-tablets-and-mobiles-you-dont-own\/\" target=\"_blank\" rel=\"noopener\">or on an emulator if you are working locally<\/a>). 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.<\/p>\n<h2>3. How To Improve the Header<\/h2>\n<h3>What&#8217;s The Problem?<\/h3>\n<p>It&#8217;s too short. You&#8217;ll have a hard time getting a logo in there or any other elements such as links to social media presences; there&#8217;s not even any room for the site&#8217;s tagline.<\/p>\n<h3>How To Fix It?<\/h3>\n<p>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.<\/p>\n<figure id=\"attachment_124580\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-124580\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-header-big.jpg\" alt=\"Screenshot of the expanded Twenty Fourteen header\" width=\"700\" height=\"90\" \/><figcaption class=\"wp-caption-text\">The initial header view is now much more accommodating<\/figcaption><\/figure>\n<figure id=\"attachment_124581\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-124581\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-header-small.jpg\" alt=\"Screenshot of the header at normal size after a page scroll\" width=\"700\" height=\"56\" \/><figcaption class=\"wp-caption-text\">The header now contracts to its original size when the page scrolls<\/figcaption><\/figure>\n<h3>The Solution&#8230;<\/h3>\n<h4>Preparing The Header<\/h4>\n<p>We don&#8217;t actually need to do anything for the header because we incorporated the changes we need into the <em>header.php<\/em> template when we updated it for the slide-out sidebar. So, on to the next step.<\/p>\n<h4>Outputting The Required CSS and Javascript<\/h4>\n<p>Since this will only affect non-mobile devices, we&#8217;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.<\/p>\n<p>This requires creating a Javascript file in the child theme&#8217;s <em>js<\/em> directory and adding some CSS to the style.css. We&#8217;ll then <em>enqueue<\/em> the new Javascript file in it&#8217;s own function hooked to the <em>wp_enqueue_scripts<\/em> action that is only added if\u00a0<em>wp_is_mobile()<\/em>\u00a0does 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.<\/p>\n<p>Add the following code to the <em>functions.php<\/em> file:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\/\/enqueue topbar js\r\nfunction awesome_2014_add_topbarjs() {\r\nwp_enqueue_script( &#039;topbarjs&#039;, get_stylesheet_directory_uri().&#039;\/js\/topbar.js&#039;, array(&#039;jquery&#039;), null, true );\r\n}\r\n\/\/add if is not mobile\r\nif ( !wp_is_mobile() ) {\r\nadd_action( &#039;wp_enqueue_scripts&#039;, &#039;awesome_2014_add_topbarjs&#039; );\r\n}\r\n<\/pre>\n<h4>Creating the CSS file<\/h4>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>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 <em>@media<\/em> query.<\/p>\n<p>Once again, add this code to the <em>style.css<\/em> file:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/**Adjustments for the desktop topbar when screen is small**\/\r\n@media screen and (max-width: 768px) {\r\n.search-toggle {\r\nposition: absolute;\r\ntop: -8px;\r\nright: 0px;\r\n}\r\n#masthead {\r\nheight: 80px;\r\n}\r\n.topbar-menu {\r\ndisplay: block;\r\nbackground-color: black;\r\n}\r\n.primary-navigation.toggled-on {\r\ndisplay: block;\r\npadding: 48px 0 0 0px;\r\nbackground-color: black;\r\n}\r\n.nav-toggled {\r\npadding-top: 48px !important;\r\npadding-left: 0px !important;\r\n}\r\nh2.topbar-description {\r\ndisplay:none;\r\n}\r\n}\r\n<\/pre>\n<h4>Creating The Javascript File<\/h4>\n<p>The script that will rearrange the header when not scrolled the whole way to the top is powered by jQuery&#8217;s <em>scrollTop()<\/em>\u00a0function.<\/p>\n<p>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.<\/p>\n<p>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 <em>#masthead<\/em> and <em>#wpadmin<\/em> bar can change based on scroll position and screen width. We can easily calculate their heights using jQuery&#8217;s\u00a0<em>height()<\/em>\u00a0function and then use those values to add top margins with\u00a0<em>css()<\/em>.<\/p>\n<p>Save the following code in the <em>\/js<\/em> folder as <em>topbar.js<\/em>:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\njQuery(document).ready(function($) {\r\n\/\/set element ID\/classes in vars\r\nvar social = &#039;.topbar-description&#039;;\r\nvar nav = &#039;nav#primary-navigation&#039;;\r\nvar headerMain = &#039;.header-main&#039;;\r\nvar header = &#039;#masthead&#039;;\r\nvar main = &#039;#main&#039;;\r\n\r\n\/\/margin fix for masthead function\r\nvar mastFix = function() {\r\n$(header).css({\r\nmarginTop: $(&#039;#wpadminbar&#039;).height() + &#039;px&#039;\r\n});\r\n};\r\nmastFix();\r\n\/\/ensure that #wpadminbar doesn&#039;t move\r\n$(&#039;#wpadminbar&#039;).css( &#039;position&#039;, &#039;fixed&#039; );\r\n\r\n\/\/function for changing sizes\r\n$(function(){\r\n$(header).data(&#039;size&#039;,&#039;big&#039;);\r\n});\r\n\r\n\/\/the main scroll function\r\n$(window).scroll(function(){\r\n\/\/set container of the nav element\r\nvar $nav = $(header);\r\n\/\/when scrolled away from top\r\nif ($(\u2018body\u2019).scrollTop() || $(\u2018html\u2019).scrollTop() &gt; 0) {\r\nif ($nav.data(&#039;size&#039;) == &#039;big&#039;) {\r\nmastFix();\r\n$( social ).css(&#039;display&#039;, &#039;none&#039;);\r\n$( nav ).css({\r\ndisplay: &#039;inline&#039;,\r\ntop: &#039;0px&#039;,\r\n});\r\n$( headerMain ).fadeOut(&quot;fast&quot;);\r\n$( nav ).animate({\r\npaddingLeft: $( &#039;h1.site-title&#039; ).width() + 45 + &#039;px&#039;,\r\n}), {queue:false, duration:600};\r\n$( nav ).css(&#039;top&#039;, &#039;0px&#039;);\r\n$nav.data(&#039;size&#039;,&#039;small&#039;).stop().animate({\r\nheight:&#039;48px&#039;\r\n}, 600);\r\n$( headerMain ).animate({\r\nleft:200, opacity:&quot;show&quot;}, 600);\r\n};\r\n}\r\n\/\/when scrolled back\r\nelse {\r\nif ($nav.data(&#039;size&#039;) == &#039;small&#039;) {\r\nmastFix();\r\n$( social ).css(&#039;display&#039;, &#039;inline&#039;);\r\n$( nav ).animate({\r\ndisplay: &#039;block&#039;,\r\ntop: &#039;40px&#039;,\r\n}), {queue:false, duration:600}; ;\r\n$( nav ).animate({\r\npaddingLeft: &#039;30px&#039;,\r\n}), {queue:false, duration:600};\r\n$nav.data(&#039;size&#039;,&#039;big&#039;).stop().animate({\r\nheight:&#039;88px&#039;\r\n}, 600);\r\n}\r\n}\r\n});\r\n\/\/Function to fixing margin for #main\r\nvar marginFix = function() {\r\n$(main).css({\r\nmarginTop: $(header).height() + &#039;px&#039;,\r\n});\r\n};\r\n\/\/do marginFix and again on window resize along with mastFix\r\nmarginFix();\r\n$( window ).resize(function() {\r\nmarginFix();\r\nmastFix();\r\n});\r\n\r\n}); \/\/end jQuery noConflict wrapper\r\n<\/pre>\n<h2>4. How To Make Featured Content More Flexible<\/h2>\n<h3>What&#8217;s The Problem?<\/h3>\n<p>For many people, the implementation of the featured content in Twenty Fourteen is too basic. You can only specify a layout&#8211;grid or slider&#8211;for all platforms. You can&#8217;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&#8217; Flexslider jQuery plugin. The Twenty Fourteen development team chose to remove all of the functionality that they didn&#8217;t need from the plugin. This created a smaller file, but removes some of the cool features that Flexslider provides.<\/p>\n<h3>How To Fix It?<\/h3>\n<p>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.<\/p>\n<p>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.<\/p>\n<figure id=\"attachment_124583\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-124583\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-tablet.jpg\" alt=\"Screenshot of Twenty Fourteen on tablet showing slider\" width=\"700\" height=\"538\" \/><figcaption class=\"wp-caption-text\">Use a grid on a desktop and slider, that auto-scrolls, on your tablet<\/figcaption><\/figure>\n<h3>The Solution&#8230;<\/h3>\n<h4>Adding Options To The Theme &gt; Customize Panel<\/h4>\n<p>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.<\/p>\n<p>We&#8217;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 &gt; Customize).<\/p>\n<p>Open up your <em>functions.php<\/em> file and add the following code:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\nfunction awesome_2014_customize_register() {\r\n\r\nglobal $wp_customize;\r\n\r\n\/\/add extended featured content section\r\n\r\n\/\/add controls\r\n$wp_customize-&gt;add_setting( &#039;num_posts_grid&#039;, array( &#039;default&#039; =&gt; &#039;6&#039; ) );\r\n$wp_customize-&gt;add_setting( &#039;num_posts_slider&#039;, array( &#039;default&#039; =&gt; &#039;6&#039; ) );\r\n$wp_customize-&gt;add_setting( &#039;layout_mobile&#039;, array( &#039;default&#039; =&gt; &#039;grid&#039; ) );\r\n\r\n$wp_customize-&gt;add_control( &#039;num_posts_grid&#039;, array(\r\n&#039;label&#039; =&gt; __( &#039;Number of posts for grid&#039;, &#039;text-domain&#039;),\r\n&#039;section&#039; =&gt; &#039;featured_content&#039;,\r\n&#039;settings&#039; =&gt; &#039;num_posts_grid&#039;,\r\n) );\r\n\r\n$wp_customize-&gt;add_control( &#039;num_posts_slider&#039;, array(\r\n&#039;label&#039; =&gt; __( &#039;Number of posts for slider&#039;, &#039;text-domain&#039;),\r\n&#039;section&#039; =&gt; &#039;featured_content&#039;,\r\n&#039;settings&#039; =&gt; &#039;num_posts_slider&#039;,\r\n) );\r\n\r\n$wp_customize-&gt;add_control( &#039;layout_mobile&#039;, array(\r\n&#039;label&#039; =&gt; __( &#039;Layout for mobile devices&#039;, &#039;text-domain&#039;),\r\n&#039;section&#039; =&gt; &#039;featured_content&#039;,\r\n&#039;settings&#039; =&gt; &#039;layout_mobile&#039;,\r\n&#039;type&#039; =&gt; &#039;select&#039;,\r\n&#039;choices&#039; =&gt; array(\r\n&#039;grid&#039; =&gt; &#039;Grid&#039;,\r\n&#039;slider&#039; =&gt; &#039;Slider&#039;,\r\n),\r\n) );\r\n}\r\n\r\nadd_action( &#039;customize_register&#039;, &#039;awesome_2014_customize_register&#039; );\r\n\r\n<\/pre>\n<p><a rel=\"lightbox[124289]\" class=\"blog-thumbnail\" href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-fc-options-312x563.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2013\/12\/2014-fc-options-312x563.jpg\" alt=\"Screenshot of the Featured Content options\" width=\"312\" height=\"563\" \/><\/a>This code adds three new settings, with defaults, to the existing featured_content panel:<\/p>\n<ol>\n<li><em>num_posts_grid<\/em> &#8211; the number of posts to appear in the grid<\/li>\n<li><em>num_posts_slider<\/em> &#8211; the number of posts to appear in the slider<\/li>\n<li><em>layout_mobile<\/em> &#8211; which layout (grid or slider) to use on mobile devices<\/li>\n<\/ol>\n<p>We can now get the value of these settings simply by calling <em>get_theme_mod<\/em> which offers far more flexibility than hardcoding the options into our <em>functions.php<\/em>.<\/p>\n<h4>Specifying A Different Layout For Mobile Devices<\/h4>\n<p>Now that we&#8217;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.<\/p>\n<p>The key is to make sure that any call to <em>get_theme_mod<\/em> for the <em>featured_content_layout<\/em> setting returns the correct layout for the device. As always, there&#8217;s a filter for that.<\/p>\n<p>A filter can actually be set for every customization option by using the filter name <em>theme_mod_[option name]<\/em>, so in our case we&#8217;ll be using the filter <em>theme_mod_featured_content_layout.<\/em><\/p>\n<p>Add this code to your <em>functions.php<\/em>:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\nfunction awesome_2014_theme_mod( $value ) {\r\n\r\nif ( wp_is_mobile() ){\r\nreturn get_theme_mod( &#039;layout_mobile&#039;, &#039;grid&#039; );\r\n} else {\r\nreturn $value;\r\n}\r\n}\r\n\r\nadd_filter( &#039;theme_mod_featured_content_layout&#039;, &#039;awesome_2014_theme_mod&#039; );\r\n\r\n<\/pre>\n<p>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 <em>grid<\/em>, if no <em>theme_mod<\/em> is set. If not, it returns the original value.<\/p>\n<p>Add the above code to your <em>functions.php<\/em>, change the option for the mobile layout so that its different to the original layout, and view the site on a tablet or mobile.<\/p>\n<h4>Setting the Number of Posts For Each Layout<\/h4>\n<p>To bring back the number of posts as specified in the theme options we need to utilize another filter, this time <em>twentyfourteen_get_featured_posts,<\/em>\u00a0to redo the query that generates the list of posts for the featured content.<\/p>\n<p>Again, add this code to functions.php:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\nfunction awesome_2014_get_featured_posts( $posts ){\r\n\r\n$fc_options = (array) get_option( &#039;featured-content&#039; );\r\n\r\nif ( $fc_options ) {\r\n$tag_name = $fc_options&#x5B;&#039;tag-name&#039;];\r\n} else {\r\n$tag_name = &#039;featured&#039;;\r\n}\r\n\r\n$layout = get_theme_mod( &#039;featured_content_layout&#039; );\r\n$max_posts = get_theme_mod( &#039;num_posts_&#039; . $layout, 2 );\r\n\r\n$args = array(\r\n&#039;tag&#039; =&gt; $tag_name,\r\n&#039;posts_per_page&#039; =&gt; $max_posts,\r\n&#039;order_by&#039; =&gt; &#039;post_date&#039;,\r\n&#039;order&#039; =&gt; &#039;DESC&#039;,\r\n&#039;post_status&#039; =&gt; &#039;publish&#039;,\r\n);\r\n\r\n$new_post_array = get_posts( $args );\r\n\r\nif ( count($new_post_array) &gt; 0 ) {\r\nreturn $new_post_array;\r\n} else {\r\nreturn $posts;\r\n}\r\n\r\n}\r\n\r\nadd_filter( &#039;twentyfourteen_get_featured_posts&#039;, &#039;awesome_2014_get_featured_posts&#039;, 999, 1 );\r\n\r\n<\/pre>\n<p>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 <em>get_theme_mod<\/em>. Instead it is contained in an array stored in a regular WordPress option.<\/p>\n<p>Once the tag name is identified, the number of posts to return is determined by first finding out which layout is being displayed (our <em>theme_mod<\/em> filter above will kick in here and alter the layout if a mobile device) and then get the layout specific theme option.<\/p>\n<p>The number of posts is then inserted into the query arguments and the\u00a0query is executed. If posts are found, then these are used for the featured content. Otherwise, the original list of posts is used.<\/p>\n<p>Add the above code to your <em>functions.php<\/em> file, change the number of posts for the grid and slider, and browse to the home page to see the number of posts change.<\/p>\n<h4>Including Custom Post Types In Post Selection<\/h4>\n<p>Now that we&#8217;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.<\/p>\n<p>Add this element to the <em>$args<\/em> array definition:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n&#039;post_type&#039; =&gt; array( &#039;post&#039;, &#039;&#x5B;custom post type]&#039;),\r\n\r\n<\/pre>\n<p>This is simply a comma separated list, so add as many custom post types as you have. I haven&#8217;t included this as a theme customization option as it felt more development orientated.<\/p>\n<h4>Making the Slider Auto-Scroll<\/h4>\n<p>When WooThemes&#8217; Flexslider was cut-down for use in Twenty Fourteen, one of the things that was removed was the slideshow functionality.<\/p>\n<p>The &#8220;fix&#8221; 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 <a title=\"Download Flexislider from WooThemes\" href=\"http:\/\/www.woothemes.com\/flexslider\/\" rel=\"noopener\" target=\"_blank\">download Flexslider<\/a>\u00a0and move the<em> jquery.flexslider-min.js<\/em> into the child theme&#8217;s<em> js<\/em> folder.<\/p>\n<p>Now, add this code to<em> functions.php<\/em>:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/\/dequeue\/enqueue scripts\r\nfunction awesome_2014_featured_content_scripts() {\r\nwp_dequeue_script( &#039;twentyfourteen-script&#039; );\r\nwp_dequeue_script( &#039;twentyfourteen-slider&#039; );\r\n\r\nwp_enqueue_script( &#039;awesome_2014-script&#039;, get_stylesheet_directory_uri() . &#039;\/js\/functions.js&#039;, array( &#039;jquery&#039; ), &#039;&#039; , true );\r\nif ( is_front_page() &amp;&amp; &#039;slider&#039; == get_theme_mod( &#039;featured_content_layout&#039; ) ) {\r\nwp_enqueue_script( &#039;awesome_2014-slider&#039;, get_stylesheet_directory_uri() . &#039;\/js\/jquery.flexslider-min.js&#039;, array( &#039;jquery&#039;, &#039;awesome_2014-script&#039; ), &#039;&#039; , true );\r\nwp_localize_script( &#039;awesome_2014-slider&#039;, &#039;featuredSliderDefaults&#039;, array(\r\n&#039;prevText&#039; =&gt; __( &#039;Previous&#039;, &#039;awesome_2014&#039; ),\r\n&#039;nextText&#039; =&gt; __( &#039;Next&#039;, &#039;awesome_2014&#039; )\r\n) );\r\n}\r\n}\r\nadd_action( &#039;wp_enqueue_scripts&#039; , &#039;awesome_2014_featured_content_scripts&#039; , 999 );\r\n\r\n<\/pre>\n<p>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.<\/p>\n<p>This code also removes both of the parent theme&#8217;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&#8217;s functions.js file. Copy that file to the child theme&#8217;s \/<em>js<\/em> folder, open it up and at the bottom replace the Initialize Featured Content Slider code with the following:<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">\r\n\r\n\/\/ Initialize Featured Content slider.\r\n_window.load( function() {\r\nif ( body.is( &#039;.slider&#039; ) ) {\r\n$( &#039;.featured-content&#039; ).flexslider( {\r\nselector: &#039;.featured-content-inner &gt; article&#039;,\r\ncontrolsContainer: &#039;.featured-content&#039;,\r\nslideshow: true,\r\nslideshowSpeed: 4500,\r\nnamespace: &#039;slider-&#039;,\r\n} );\r\n}\r\n} );\r\n\r\n<\/pre>\n<p>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.\u00a0This 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.<\/p>\n<p>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.<\/p>\n<p>Refresh your home page and, assuming you&#8217;ve specified &#8220;slider&#8221; as your layout, you should find that your slider is now automatically scrolling.<\/p>\n<h2>You Made It!<\/h2>\n<p>This is a big post, and there&#8217;s a lot to digest, but it&#8217;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.<\/p>\n<p>In Chris&#8217; original review he called Twenty Fourteen a &#8220;flawed beauty.&#8221; With those flaws addressed, this child theme is now simply a &#8220;beauty,&#8221; and in my opinion, it is awesome.<\/p>\n<p><a name=\"partay\" target=\"_blank\"><\/a>Download the Twenty Fourteen child theme:\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2014\/01\/awesome_2014.zip\" target=\"_blank\">awesome_2014.zip<\/a>.<\/p>\n<p>Alternatively, I have been working on a Twenty Fourteen child theme that includes many of these changes, with the Star Wars inspired name of &#8220;The Falcon&#8221; which you can download from <a title=\"Download The Falcon Twenty Fourteen Child Theme\" href=\"https:\/\/github.com\/Shelob9\/thefalcon\" rel=\"noopener\" target=\"_blank\">GitHub<\/a>.<\/p>\n<p>Photo credit: <a title=\"View the original photo on JD Hancock's site\" href=\"http:\/\/photos.jdhancock.com\/photo\/2013-07-04-004152-happy-fourth-of-july-2013.html\" rel=\"noopener\" target=\"_blank\">JD Hancock<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the ultimate guide to giving the default WordPress theme, Twenty Fourteen, a superhero makeover. And what&#8217;s more, these tips and techniques can be used in practically any WordPress theme.<\/p>\n","protected":false},"author":4,"featured_media":159563,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[34,263],"tags":[35,684,9781,9782,335],"tutorials_categories":[],"class_list":["post-124289","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-themes","category-tutorials","tag-seo","tag-child-themes","tag-default-theme","tag-twenty-fourteen","tag-wordpressorg"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/124289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=124289"}],"version-history":[{"count":5,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/124289\/revisions"}],"predecessor-version":[{"id":173937,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/124289\/revisions\/173937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/159563"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=124289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=124289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=124289"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=124289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}