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’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!
-
- Hack #1: How to create the social links menu
- Hack #2: How to change “Proudly powered by WordPress”
- Hack #3: How to use dynamic one-page navigation (improved!)
- Hack #4: How to add a custom sidebar to each front page section and each page
- Hack #5: How to add a huge featured image to each post and page
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.
#1. Create a Social Links Menu
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.
- Start by opening the customizer (Appearance > Customize).
- Select the Menus option and click the button to Create New Menu.
- Name it something obvious, like “Social Links Menu”.
- Select the checkbox next to Social Links Menu in the Menu Location section, then click Next.
- Click on + Add Items, and add a link to each of your social network accounts using the Custom Links option.
When you’re done, your menu should look something like this:
The last step is to click the 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.
#2. Change “Proudly powered by WordPress”
There are two reasons why you might want to change the text in the footer declaring that your site is “Proudly powered by WordPress.”
- Maybe you want to expand on it and say something like “Proudly powered by WordPress, designed by WebPress Designs, and hosted by LAMPress Hosting.”
- Maybe you want to go the other direction and say something really catchy like “Copyright 2022 MyBiz | All Rights Reserved.” Nice.
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.
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:
#3. Dynamic One Page Navigation (Improved!)
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:
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 after jQuery has already loaded.
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: Easy Smooth Scroll Links Smooth Scrolling Anchor.
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.
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.
#4. Add a Custom Sidebar to Each Front Page Section and Page
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 front page 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:
- Copy over the template files that Twenty Seventeen uses to display pages and front page sections.
- Add sidebar code to the page template and to each front page section by modifying the template files.
- Install Custom Sidebars.
- Create a custom sidebar for each front page section and for each page where we want to display a sidebar.
- Add a sidebar to each page where you want to display a sidebar.
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-contentthemestwentyseventeentemplate-partspage. 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:
Step 2: Add sidebar code to each template file.
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:
Step 3: Install Custom Sidebars.
The free Custom Sidebars plugin from WPMU DEV is available from WordPress.org.
Step 4: Create a custom sidebar for each front page section.
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:
- Click Create a new sidebar. Name each sidebar using the exact same name as the page name. For instance, if one of your front page sections is populated from a page with the title “About”, then create a sidebar with the exact same name: “About”.
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.
- Click Advanced – Edit custom wrapper code and add the following code:
- In the first box, Before Title, add
- In the second box, After Title, add
- In the third box, Before Widget, add
- In the fourth box, After Widget, add
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.
- Now you’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.
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.
#5. Add a Huge Featured Image to Each Page
I love the way the full-height header image or video looks on the homepage of Twenty Seventeen. However, I really don’t love the way featured images are rendered everywhere else. Instead, I’d much rather display the featured image of each page or post using the full height display used on the homepage.That’s what this hack is all about and it’s a customization that falls solidly into the hack category. I’m not going to lie, the code you’re about to see isn’t beautiful, but — and this is the important part — it works!
The first thing you’ll need to do is to copy over header.php from Twenty Seventeen into your child theme. Then, you’ll need to replace the entire contents of the header tag with the following code:
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.
Just paste that CSS into your child theme’s style.css file.
The new header.php code and the styling added to style.css 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’t work quite right. We’re going to need to add a bit of jQuery to our theme to get the sticky navigation to behave itself.
This code could be added to a child theme JavaScript file or with a plugin, just make sure it’s loaded after the jQuery core has loaded.
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.
All the Hacks in One Child Theme
We’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’ve rolled all of these modifications into a child theme and tossed it up on GitHub. If you just want to get all of these modifications working without going through the process of building the child theme yourself, just download the release zip folder, upload it to your site, and activate it.
In addition, you’ll want to install two plugins — Custom Sidebars and Easy Smooth Scroll Links Smooth Scrolling Anchor — to get access to the all of the customizations described in this tutorial.
Then, just walk through the process of setting up your front page sections and custom one-page navigation menu described in our previous Twenty Seventeen tutorial. Then customize your social media menu, craft the footer text to your liking, add front page section sidebars, and you’ll get the full effect of all five hacks for Twenty Seventeen.
Editor’s Note: This post has been updated for accuracy and relevancy.
[Originally Published: December 2106/ Revised: March 2022]
Tags:
