Twenty Seventeen is the most versatile default theme WordPress has ever seen. However, the options built into the theme leave a few things to be desired.
In this post, I’ll show you five hacks you can use to make Twenty Seventeen uniquely your own. We’ll start with the basics and move on to more challenging and impactful customizations.
Before we get into the code, take a quick look at the customizations we’re going cover. If one catches your eye go ahead and head straight for that section!
By the time we’re done, you’ll be able to turn Twenty Seventeen into a beautiful and modern website for business or blogging. Don’t believe me? Have a look. Here’s what you’ll build if you implement all five of these hacks:
Ready to start slinging code? Let’s get to it.
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’re going to cover it.
Twenty Seventeen includes an attractive social links menu in the page footer.
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’s really pretty simple once you know how to do it.
All you have to do is create a menu with links to your social networks and assign it to the Social Links Menu location.
Let’s walk through the process.
When you’re done, your menu should look something like this:
The last step is to click the Save & Publish button in the Customizer to save the new menu. Your social network links will now be displayed in the footer menu.
That wasn’t hard. Let’s move on to something a touch more challenging.
There are two reasons why you might want to change the text in the footer declaring that your site is “Proudly powered by WordPress.”
Whatever your reasons or goals, we won’t judge. We’ll just tell you how to get the job done.
The first thing you’ll need to do is to create and activate a child theme (hint: if you want the really easy button, just go download the pre-built child theme).
Once you’ve created and activated your child theme, copy the footer.php file over from Twenty Seventeen into your child theme directory. Next, open up footer.php and look for this bit of code:
get_template_part( 'template-parts/footer/site', 'info' );.
Now you have a couple of options. You can simply comment out that line by adding
// just before the code, or you could consider replacing it with your own custom footer text. Here’s the code I added to create the footer text you see in the image above:
In my previous post about Twenty Seventeen 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.
In this post, we’re taking things two steps further. In addition to creating functional one-page navigation, we’re also going to fix the navigation menu hover effect and add smooth scrolling to improve the overall experience.
First, let’s start with the new jQuery that you’ll need to add to your site:
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.
In addition, we can make the movement to each section a lot smoother by installing and activating a free plugin: jQuery Smooth Scroll (thanks to Bojan from our support team for this excellent suggestion).
Of course, you’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.
For example, to link to the “About” section, you would create a custom link and use “#about” as the link anchor. For full details, see How to Customize the Free Twenty Seventeen WordPress Theme for Business.
It takes a little doing, but the effort is well worth it. Not convinced? Take a look at the results:
Pretty nice, even if I do say so myself.
Twenty Seventeen makes great use of whitespace, but I know what some are you are thinking. You’re thinking that maybe there’s a bit too much 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.
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:
Of course, you wouldn’t want those same widgets displayed in the about section. No, you’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 different sidebar on the actual /about page.
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’t a very simple hack. We’re back in child theme territory here and we’re also going to need to use a plugin.
By default, Twenty Seventeen doesn’t add sidebars to the frontpage section — 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.
In order to change that and add sidebar areas to pages, we need to do a few things:
Let’s walk through the steps one at a time.
Step 1: Copy content-page.php, content-front-page.php, and content-front-page-panels.php to your child theme.
You’ll find these files by going to \wp-content\themes\twentyseventeen\template-parts\page. In that directory, you’ll see three files. Copy all three.
You’ll need to recreate the same directory structure in your child theme by adding a template-parts directory to your child theme and nesting a page directory inside of it. Then paste the files into the page directory.
When you’re done, your child theme directory structure should look like this:
First, open up content-page.php and add
just before the closing
header tag, like this:
Second, open up the other two template files, content-front-page.php and content-front-page-panels.php, and drop the following code just before the closing
header tag in each file:
After inserting that code, here’s what content-front-page.php and content-front-page-panels.php should look like with the necessary code added:
The free Custom Sidebars plugin from WPMU DEV is available from WordPress.org, so you can find it by searching for “Custom Sidebars” from Plugins > Add New. Of course, if you’re a WPMU DEV member and you have the WPMU DEV Dashboard installed, you can install Custom Sidebars from WPMU DEV > Plugins.
Head to Appearance > Widgets and create a new sidebar for each front page section.
Now pay attention, because it’s critical that you get this next part right for your front page sidebars to be displayed. Follow these steps to create each sidebar:
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.
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’ll ensure that the default Twenty Seventeen styling is applied to your front page sidebar content.
When you’re done. Your list of custom sidebars should look something like this, with each sidebar named to match one of the front page sections:
Note: The Recent Posts widget doesn’t work with this customization. If you do add it to any of the front page sidebar areas, you’ll notice that the section where it appears will load the home page content rather than the custom page content.
Step 5: Add a sidebar to each page where you want to display a sidebar.
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.
Scroll back up, click Update and view the page. You’ll see that the sidebar you selected is now displayed just below the page title.