{"id":161636,"date":"2016-12-29T13:00:52","date_gmt":"2016-12-29T13:00:52","guid":{"rendered":"https:\/\/premium.wpmudev.org\/blog\/?p=161636"},"modified":"2022-03-22T03:28:03","modified_gmt":"2022-03-22T03:28:03","slug":"five-hacks-twenty-seventeen","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/five-hacks-twenty-seventeen\/","title":{"rendered":"5 Excellent Ways to Hack the Twenty Seventeen WordPress Theme"},"content":{"rendered":"<p>Twenty Seventeen is one of the most versatile default themes WordPress has ever seen. However, the options built into the theme leave a few things to be desired.<\/p>\n<p>In this post, I&#8217;ll show you five hacks you can use to make Twenty Seventeen uniquely your own. We&#8217;ll start with the basics and move on to more challenging and impactful customizations.<\/p>\n<p>Before we get into the code, take a quick look at the customizations we&#8217;re going cover. If one catches your eye go ahead and head straight for that section!<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Hack #1:\u00a0<a href=\"#social\">How to create the social links menu<\/a><\/li>\n<li>Hack #2:\u00a0<a href=\"#proud\">How to change &#8220;Proudly powered by WordPress&#8221;<\/a><\/li>\n<li>Hack #3:\u00a0<a href=\"#dynamic\">How to use dynamic one-page navigation (improved!)<\/a><\/li>\n<li>Hack #4:\u00a0<a href=\"#sidebars\">How to add a custom sidebar to each front page section and each page<\/a><\/li>\n<li>Hack #5:\u00a0<a href=\"#huge-header\">How to add a huge featured image to each post and page<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>By the time we&#8217;re done, you&#8217;ll be able to turn Twenty Seventeen into a beautiful and modern website for business or blogging. Don&#8217;t believe me? Have a look. Here&#8217;s what you&#8217;ll build if you implement all five of these hacks:<\/p>\n<p><iframe loading=\"lazy\" title=\"hacking-twenty-seventeen-wordpress-theme Video\" src=\"https:\/\/fast.wistia.net\/embed\/iframe\/mkdm10jwo5?dnt=1\" allow=\"autoplay; fullscreen\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" msallowfullscreen width=\"640\" height=\"412\"><\/iframe><script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script><\/p>\n<p>Ready to start slinging code? Let&#8217;s get to it.<\/p>\n<h2 id=\"social\">#1. Create a Social Links Menu<\/h2>\n<p>Alright, so this first one is more of a tip than a hack. But it is a customization to make Twenty Seventeen uniquely your own so we&#8217;re going to cover it.<\/p>\n<p>Twenty Seventeen includes an attractive social links menu in the page footer.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/twenty-seventeen-social-links.png\" alt=\"The Twenty Seventeen WordPress theme's social links in the footer.\" width=\"600\" height=\"269\" \/><figcaption class=\"wp-caption-text\">The Twenty Seventeen WordPress theme&#8217;s social links in the footer.<\/figcaption><\/figure>\n<p>The problem is that more than a few users have reported having trouble figuring out how to add their social network links to this menu. Thankfully, it&#8217;s really pretty simple once you know how to do it.<\/p>\n<p>All you have to do is create a menu with links to your social networks and assign it to the Social Links Menu location.<\/p>\n<p>Let&#8217;s walk through the process.<\/p>\n<ul>\n<li>Start by opening the customizer (<strong>Appearance &gt; Customize<\/strong>).<\/li>\n<li>Select the <strong>Menus<\/strong> option and click the button to <strong>Create New Menu<\/strong>.<\/li>\n<li>Name it something obvious, like &#8220;Social Links Menu&#8221;.<\/li>\n<li>Select the checkbox next to <strong>Social Links Menu<\/strong> in the <strong>Menu Location<\/strong> section, then click <strong>Next<\/strong>.<\/li>\n<li>Click on <strong>+ Add Items<\/strong>, and add a link to each of your social network accounts using the <strong>Custom Links<\/strong> option.<\/li>\n<\/ul>\n<p>When you&#8217;re done, your menu should look something like this:<\/p>\n<figure id=\"attachment_205702\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-205702\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/add-social-links-1050x747.png\" alt=\"Add social links in theme 2017\" width=\"1050\" height=\"747\" \/><figcaption class=\"wp-caption-text\">Updating social links in the Twenty Seventeen WordPress theme.<\/figcaption><\/figure>\n<p>The last step is to click the <strong>Publish<\/strong> button in the Customizer to save the new menu. Your social network links will now be displayed in the footer menu.<\/p>\n<p>That wasn&#8217;t hard. Let&#8217;s move on to something a touch more challenging.<\/p>\n<h2 id=\"proud\">#2. Change &#8220;Proudly powered by WordPress&#8221;<\/h2>\n<p>There are two reasons why you might want to change the text in the footer declaring that your site is &#8220;Proudly powered by WordPress.&#8221;<\/p>\n<ul>\n<li>Maybe you want to expand on it and say something like <em>&#8220;Proudly powered by WordPress, designed by WebPress Designs, and hosted by LAMPress Hosting.&#8221;<\/em><\/li>\n<li>Maybe you want to go the other direction and say something really catchy like <em>&#8220;Copyright 2022 MyBiz | All Rights Reserved.&#8221;<\/em> Nice.<\/li>\n<\/ul>\n<p>Whatever your reasons or goals, we won&#8217;t judge. We&#8217;ll just tell you how to get the job done.<\/p>\n<p>The first thing you&#8217;ll need to do is to <a href=\"https:\/\/wpmudev.com\/blog\/how-to-create-wordpress-child-theme\/\" target=\"_blank\" rel=\"noopener\">create and activate a child theme<\/a>.<\/p>\n<p>Once you&#8217;ve created and activated your child theme, copy the <em>footer.php<\/em> file over from Twenty Seventeen into your child theme directory. Next, open up <em>footer.php<\/em> and look for this bit of code:<\/p>\n<p><em>get_template_part( &#8216;template-parts\/footer\/site&#8217;, &#8216;info&#8217; );<\/em><\/p>\n<p>Now you have a couple of options. You can simply comment out that line by adding <code>\/\/<\/code> just before the code, or you could consider replacing it with your own custom footer text. Here&#8217;s the code I added to create the footer text you see in the image above:<\/p>\n<div class=\"gist\" data-gist=\"2754983da5aa610319d7725cd4c20635\" data-gist-file=\"customize-footer-text-twenty-seventeen.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/2754983da5aa610319d7725cd4c20635.js?file=customize-footer-text-twenty-seventeen.php\">Loading gist 2754983da5aa610319d7725cd4c20635<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<h2 id=\"dynamic\">#3. Dynamic One Page Navigation (Improved!)<\/h2>\n<p>In <a href=\"https:\/\/wpmudev.com\/blog\/twenty-seventeen-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">my previous post about Twenty Seventeen<\/a> I included a simple jQuery script you could use to build dynamic one page navigation linking to the different front page sections. That script got the job done, but it did need a little refinement.<\/p>\n<p>In this post, we&#8217;re taking things two steps further. In addition to creating functional one-page navigation, we&#8217;re also going to fix the navigation menu hover effect and add smooth scrolling to improve the overall experience.<\/p>\n<p>First, let&#8217;s start with the new jQuery that you&#8217;ll need to add to your site:<\/p>\n<div class=\"gist\" data-gist=\"101b800b4f93cb12a75281e216a57e5b\" data-gist-file=\"one-page-nav.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/101b800b4f93cb12a75281e216a57e5b.js?file=one-page-nav.js\">Loading gist 101b800b4f93cb12a75281e216a57e5b<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>You could add this code to a JavaScript file loaded by a child theme (which is what I did) or use a plugin that allows you to add JavaScript to your site (which is what I recommended in my previous post on Twenty Seventeen). Just make sure to load the code <em>after<\/em> jQuery has already loaded.<\/p>\n<p>The first part of the code is unchanged from the previous tutorial. The rest of the code fixes the navigation link highlighting. Take a look at the comments in the code to get a complete picture of what is going on.<\/p>\n<p>In addition, we can make the movement to each section a lot smoother by installing and activating a free plugin: <a href=\"https:\/\/wordpress.org\/plugins\/easy-smooth-scroll-links\/\" target=\"_blank\">Easy Smooth Scroll Links Smooth Scrolling Anchor<\/a>.<\/p>\n<p>Of course, you&#8217;ll still need to build your navigation menu by adding a custom link to each section using the name of the page displayed in that section.<\/p>\n<p>For example, to link to the <em>&#8220;About&#8221;<\/em> section, you would create a custom link and use <em>&#8220;#about&#8221;<\/em> as the link anchor. For full details, see <a href=\"https:\/\/wpmudev.com\/blog\/twenty-seventeen-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">How to Customize the Free Twenty Seventeen WordPress Theme<\/a>.<\/p>\n<p>It takes a little doing, but the effort is well worth it. Not convinced? Take a look at the results:<\/p>\n<p><iframe loading=\"lazy\" title=\"twenty-seventeen-one-page-navigation Video\" src=\"https:\/\/fast.wistia.net\/embed\/iframe\/fd6lx2908b?dnt=1\" allow=\"autoplay; fullscreen\" allowtransparency=\"true\" frameborder=\"0\" scrolling=\"no\" class=\"wistia_embed\" name=\"wistia_embed\" msallowfullscreen width=\"640\" height=\"414\"><\/iframe><script src=\"https:\/\/fast.wistia.net\/assets\/external\/E-v1.js\" async><\/script><br \/>\nPretty nice, even if I do say so myself.<\/p>\n<h2 id=\"sidebars\">#4. Add a Custom Sidebar to Each Front Page Section and Page<\/h2>\n<p>Twenty Seventeen makes great use of whitespace, but I know what some are you are thinking. You&#8217;re thinking that maybe there&#8217;s a bit <em>too much<\/em> whitespace. You know what might be really useful? If you could add different sidebar widgets to each front page section and also add sidebars to pages.<\/p>\n<p>For example, say you wanted to add a search field, category drop down list, and additional widgets to the blog section of your homepage. It sure would be nice to be able to do something like this:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/blog-section-custom-sidebar-1.png\" alt=\"Blog section custom sidebar.\" width=\"600\" height=\"289\" \/><figcaption class=\"wp-caption-text\">Blog section custom sidebar.<\/figcaption><\/figure>\n<p>Of course, you wouldn&#8217;t want those same widgets displayed in the about section. No, you&#8217;d want to add something different in that section. Now that I think about it, it would be really nice to be able to display one sidebar on the about section of the front page, but a <em>different<\/em> sidebar on the actual <em>\/about<\/em> page.<\/p>\n<p>Friend, I have good news. You can add custom sidebar sections to each front page section and then reuse the same sidebars or entirely different sidebars on every page of your site. However, this isn&#8217;t a very simple hack. We&#8217;re back in child theme territory here and we&#8217;re also going to need to use a plugin.<\/p>\n<p>By default, Twenty Seventeen doesn&#8217;t add sidebars to the front page section \u2014 or to any pages for that matter. It does display a sidebar on individual posts, but pages have a stark, wide-open, almost empty look.<\/p>\n<p>In order to change that and add sidebar areas to pages, we need to do a few things:<\/p>\n<ul>\n<li>Copy over the template files that Twenty Seventeen uses to display pages and front page sections.<\/li>\n<li>Add sidebar code to the page template and to each front page section by modifying the template files.<\/li>\n<li>Install <a href=\"https:\/\/wordpress.org\/plugins\/custom-sidebars\/\" rel=\"noopener\" target=\"_blank\">Custom Sidebars<\/a>.<\/li>\n<li>Create a custom sidebar for each front page section and for each page where we want to display a sidebar.<\/li>\n<li>Add a sidebar to each page where you want to display a sidebar.<\/li>\n<\/ul>\n<p>Let&#8217;s walk through the steps one at a time.<\/p>\n<h3><strong>Step 1: Copy <em>content-page.php<\/em>, <em>content-front-page.php<\/em>, and <em>content-front-page-panels.php<\/em> to your child theme.<\/strong><\/h3>\n<p>You&#8217;ll find these files by going to <em>\\wp-content\\themes\\twentyseventeen\\template-parts\\page<\/em>. In that directory, you&#8217;ll see three files. Copy all three.<\/p>\n<p>You&#8217;ll need to recreate the same directory structure in your child theme by adding a <em>template-parts<\/em> directory to your child theme and nesting a <em>page<\/em> directory inside of it. Then paste the files into the <em>page<\/em> directory.<\/p>\n<p>When you&#8217;re done, your child theme directory structure should look like this:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/page-template-files-1.png\" alt=\"Page template files.\" width=\"600\" height=\"113\" \/><figcaption class=\"wp-caption-text\">Page template files.<\/figcaption><\/figure>\n<h3><strong>Step 2: Add sidebar code to each template file.<\/strong><\/h3>\n<p>First, open up <em>content-page.php<\/em> and add <code>&lt;?php get_sidebar(); ?&gt;<\/code> just before the closing <code>header<\/code> tag, like this:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/content-page-code-added-1.png\" alt=\"Content page code added.\" width=\"600\" height=\"72\" \/><figcaption class=\"wp-caption-text\">Content page code added.<\/figcaption><\/figure>\n<p><span style=\"font-size: 16px;\">Second, open up the other two template files, <\/span><em style=\"font-size: 16px;\">content-front-page.php<\/em><span style=\"font-size: 16px;\"> and <\/span><em style=\"font-size: 16px;\">content-front-page-panels.php<\/em><span style=\"font-size: 16px;\">, and drop the following code just before the closing <\/span><code style=\"font-size: 16px;\">header<\/code><span style=\"font-size: 16px;\"> tag in each file:<\/span><\/p>\n<div class=\"gist\" data-gist=\"94083437af5fc624a5072b5c2849b10a\" data-gist-file=\"front-page-panels.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/94083437af5fc624a5072b5c2849b10a.js?file=front-page-panels.php\">Loading gist 94083437af5fc624a5072b5c2849b10a<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>After inserting that code, here&#8217;s what <em>content-front-page.php<\/em> and <em>content-front-page-panels.php<\/em> should look like with the necessary code added:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/front-page-sidebar-code-2.png\" alt=\"Front page sidebar code.\" width=\"600\" height=\"162\" \/><figcaption class=\"wp-caption-text\">Front page sidebar code.<\/figcaption><\/figure>\n<h3><strong>Step 3: Install Custom Sidebars.<\/strong><\/h3>\n<p>The free <a href=\"https:\/\/wordpress.org\/plugins\/custom-sidebars\/\" rel=\"noopener\" target=\"_blank\">Custom Sidebars<\/a> plugin from WPMU DEV is available from WordPress.org.<\/p>\n<h3><strong>Step 4: Create a custom sidebar for each front page section.<\/strong><\/h3>\n<p>Head to <strong>Appearance &gt; Widgets<\/strong> and create a new sidebar for each front page section.<\/p>\n<p>Now pay attention, because it&#8217;s critical that you get this next part right for your front page sidebars to be displayed. Follow these steps to create each sidebar:<\/p>\n<ol>\n<li>Click <strong>Create a new sidebar<\/strong>. Name each sidebar using the <em>exact<\/em> same name as the page name. For instance, if one of your front page sections is populated from a page with the title <em>&#8220;About&#8221;<\/em>, then create a sidebar with the exact same name: <em>&#8220;About&#8221;<\/em>.<\/li>\n<\/ol>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/name-custom-sidebar-1.png\" alt=\"Naming the custom sidebar.\" width=\"600\" height=\"182\" \/><figcaption class=\"wp-caption-text\">Naming the custom sidebar.<\/figcaption><\/figure>\n<div class=\"mceTemp\"><\/div>\n<p>The code added to the front page templates in Step 2 will watch for a match between the section title and sidebar title to know which sidebar to display.<\/p>\n<ol start=\"2\">\n<li>Click <strong>Advanced &#8211; Edit custom wrapper code<\/strong> and add the following code:<\/li>\n<\/ol>\n<ul>\n<li>In the first box, <strong>Before Title<\/strong>, add <code>&lt;h2 class=\"widget-title\"&gt;<\/code>.<\/li>\n<li>In the second box, <strong>After Title<\/strong>, add <code>&lt;\/h2&gt;<\/code>.<\/li>\n<li>In the third box, <strong>Before Widget<\/strong>, add <code>&lt;section id=\"%1$s\" class=\"widget %2$s\"&gt;<\/code>.<\/li>\n<li>In the fourth box, <strong>After Widget<\/strong>, add <code>&lt;\/section&gt;<\/code>.<\/li>\n<\/ul>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/widget-wrapper-1.png\" alt=\"Widget wrapper.\" width=\"600\" height=\"208\" \/><figcaption class=\"wp-caption-text\">Widget wrapper.<\/figcaption><\/figure>\n<p><span style=\"font-size: 16px;\">This code matches what Twenty Seventeen adds before and after each widget and widget title. By wrapping your custom sidebar content in this code, you&#8217;ll ensure that the default Twenty Seventeen styling is applied to your front page sidebar content.<\/span><\/p>\n<ol start=\"3\">\n<li>Now you&#8217;re ready to add content to your sidebars. Select from the available widgets and build out the custom sidebars you want to see displayed in each section.<\/li>\n<\/ol>\n<p>When you&#8217;re done. Your list of custom sidebars should look something like this, with each sidebar named to match one of the front page sections:<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/custom-sidebars-list-1.png\" alt=\"Custom sidebars list.\" width=\"600\" height=\"404\" \/><figcaption class=\"wp-caption-text\">Custom sidebars list.<\/figcaption><\/figure>\n<p><strong style=\"font-size: 16px;\"><em>Note: The Recent Posts widget doesn&#8217;t work with this customization. If you do add it to any of the front page sidebar areas, you&#8217;ll notice that the section where it appears will load the home page content rather than the custom page content.<\/em><\/strong><\/p>\n<h3><strong>Step 5: Add a sidebar to each page where you want to display a sidebar.<\/strong><\/h3>\n<p>Now, head to any page where you want to display a sidebar and open up the page editor. Scroll down until you see the Sidebars admin meta box in the right-hand column. From the drop-down, select the sidebar you wish to display.<\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/sidebars-admin-meta-box-1.png\" alt=\"Sidebars admin meta box.\" width=\"600\" height=\"335\" \/><figcaption class=\"wp-caption-text\">Sidebars admin meta box.<\/figcaption><\/figure>\n<p><span style=\"font-size: 16px;\">Scroll back up, click <\/span><strong style=\"font-size: 16px;\">Update<\/strong><span style=\"font-size: 16px;\"> and view the page. You&#8217;ll see that the sidebar you selected is now displayed just below the page title.<\/span><\/p>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-600x600\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/page-with-sidebar-1.png\" alt=\"Page with sidebar.\" width=\"600\" height=\"307\" \/><figcaption class=\"wp-caption-text\">Page with sidebar.<\/figcaption><\/figure>\n<h2 id=\"huge-header\">#5. Add a Huge Featured Image to Each Page<\/h2>\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1050x1050\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/12\/feature-image-twenty-seventeen-wordpress-theme.jpg\" alt=\"The Twenty Seventeen theme with a huge feature image.\" width=\"1050\" height=\"437\" \/><figcaption class=\"wp-caption-text\">The Twenty Seventeen theme with a huge feature image.<\/figcaption><\/figure>\n<p><span style=\"font-size: 16px;\">I love the way the full-height header image or video looks on the homepage of Twenty Seventeen. However, I really don&#8217;t love the way featured images are rendered everywhere else. Instead, I&#8217;d much rather display the featured image of each page or post using the full height display used on the homepage.<\/span>That&#8217;s what this hack is all about and it&#8217;s a customization that falls <em>solidly<\/em> into the hack category. I&#8217;m not going to lie, the code you&#8217;re about to see isn&#8217;t beautiful, but \u2014 and this is the important part \u2014 it works!<\/p>\n<p>The first thing you&#8217;ll need to do is to copy over <em>header.php<\/em> from Twenty Seventeen into your child theme. Then, you&#8217;ll need to replace the entire contents of the <code>header<\/code> tag with the following code:<\/p>\n<div class=\"gist\" data-gist=\"b193fad7e8cddf32d8a85b5f1a968361\" data-gist-file=\"full-height-featured-images.php\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/b193fad7e8cddf32d8a85b5f1a968361.js?file=full-height-featured-images.php\">Loading gist b193fad7e8cddf32d8a85b5f1a968361<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Next, we need to add a bit of CSS to our child theme to duplicate the styling built into the Twenty Seventeen homepage and apply it to our custom header images.<\/p>\n<div class=\"gist\" data-gist=\"f866e75c8af39afecc9f96aaeac3fb5b\" data-gist-file=\"featured-image-css.css\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/f866e75c8af39afecc9f96aaeac3fb5b.js?file=featured-image-css.css\">Loading gist f866e75c8af39afecc9f96aaeac3fb5b<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Just paste that CSS into your child theme&#8217;s <em>style.css<\/em> file.<\/p>\n<p>The new <em>header.php<\/em> code and the styling added to <em>style.css<\/em> will force the image to the full height. However, because of the way classes are applied and removed dynamically in Twenty Seventeen, the sticky navigation doesn&#8217;t work quite right. We&#8217;re going to need to add a bit of jQuery to our theme to get the sticky navigation to behave itself.<\/p>\n<p>This code could be added to a child theme JavaScript file or with a plugin, just make sure it&#8217;s loaded after the jQuery core has loaded.<\/p>\n<div class=\"gist\" data-gist=\"67415187d6e7d893b509a75d5c970b6f\" data-gist-file=\"fix-nav.js\"><a class=\"loading\" href=\"https:\/\/gist.github.com\/67415187d6e7d893b509a75d5c970b6f.js?file=fix-nav.js\">Loading gist 67415187d6e7d893b509a75d5c970b6f<\/a><div class=\"gist-consent-notice\" style=\"display:none\"><p>Please <a href=\"javascript:Cookiebot.renew()\">update your cookie preferences<\/a> to enable preference cookies to view this gist.<\/p><\/div><\/div>\n<p>Awesome. Now, when you add a featured image to a post or page, it will be displayed using the full height of the viewport, just like the full height header on the homepage.<\/p>\n<h2 id=\"github\">All the Hacks in One Child Theme<\/h2>\n<p>We&#8217;ve covered a lot of ground and getting any one of these hacks to work properly can be a bit tricky. In order to make things easier on you, I&#8217;ve rolled all of these modifications into a child theme and <a href=\"https:\/\/github.com\/jpen365\/five-hacks-for-twenty-seventeen\" rel=\"noopener\" target=\"_blank\">tossed it up on GitHub<\/a>. If you just want to get all of these modifications working without going through the process of building the child theme yourself, just <a href=\"https:\/\/github.com\/jpen365\/five-hacks-for-twenty-seventeen\/releases\" rel=\"noopener\" target=\"_blank\">download the release zip folder<\/a>, upload it to your site, and activate it.<\/p>\n<p>In addition, you&#8217;ll want to install two plugins \u2014 <a href=\"https:\/\/wordpress.org\/plugins\/custom-sidebars\/\" rel=\"noopener\" target=\"_blank\">Custom Sidebars<\/a> and <a href=\"https:\/\/wordpress.org\/plugins\/easy-smooth-scroll-links\/\" target=\"_blank\">Easy Smooth Scroll Links Smooth Scrolling Anchor<\/a> \u2014 to get access to the all of the customizations described in this tutorial.<\/p>\n<p>Then, just walk through the process of setting up your front page sections and custom one-page navigation menu described in <a href=\"https:\/\/wpmudev.com\/blog\/twenty-seventeen-wordpress-theme\/\" target=\"_blank\" rel=\"noopener\">our previous Twenty Seventeen tutorial<\/a>. Then customize your social media menu, craft the footer text to your liking, add front page section sidebars, and you&#8217;ll get the full effect of all five hacks for Twenty Seventeen.<\/p>\n<p><em><strong>Editor\u2019s Note:<\/strong><\/em><em> This post has been updated for accuracy and relevancy.<br \/>\n[Originally Published: December 2106\/ Revised: March 2022]<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Twenty Seventeen is one of the most versatile default themes WordPress has ever seen. However, the options built into the theme leave a few things to be desired. In this post, I&#8217;ll show you five hacks you can use to make Twenty Seventeen uniquely your own. We&#8217;ll start with the basics and move on to [&hellip;]<\/p>\n","protected":false},"author":388460,"featured_media":161714,"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":[263],"tags":[684,9770,10579,10550],"tutorials_categories":[],"class_list":["post-161636","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-child-themes","tag-development-2","tag-twenty-seventeen","tag-wordpress-theme"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161636","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\/388460"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=161636"}],"version-history":[{"count":36,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161636\/revisions"}],"predecessor-version":[{"id":224487,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/161636\/revisions\/224487"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/161714"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=161636"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=161636"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=161636"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=161636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}