Twenty Seventeen is likely one of the most versatile default themes WordPress has ever seen. Nevertheless, the choices constructed into the theme go away a couple of issues to be desired.
On this publish, I’ll present you 5 hacks you should utilize to make Twenty Seventeen uniquely your individual. We’ll begin with the fundamentals and transfer on to tougher and impactful customizations.
Earlier than we get into the code, take a fast have a look at the customizations we’re going cowl. If one catches your eye go forward and head straight for that part!
Hack #1: How you can create the social hyperlinks menu
Hack #2: How you can change “Proudly powered by WordPress”
Hack #3: How you can use dynamic one-page navigation (improved!)
Hack #4: How you can add a customized sidebar to every entrance web page part and every web page
Hack #5: How you can add an enormous featured picture to every publish and web page
By the point we’re performed, you’ll be capable of flip Twenty Seventeen into an exquisite and trendy web site for enterprise or running a blog. Don’t consider me? Take a look. Right here’s what you’ll construct in the event you implement all 5 of those hacks:
Prepared to begin slinging code? Let’s get to it.
#1. Create a Social Hyperlinks Menu
Alright, so this primary one is extra of a tip than a hack. However it’s a customization to make Twenty Seventeen uniquely your individual so we’re going to cowl it.
Twenty Seventeen contains a lovely social hyperlinks menu within the web page footer.
The Twenty Seventeen WordPress theme’s social hyperlinks within the footer.
The issue is that various customers have reported having bother determining the best way to add their social community hyperlinks to this menu. Fortunately, it’s actually fairly easy as soon as you understand how to do it.
All you must do is create a menu with hyperlinks to your social networks and assign it to the Social Hyperlinks Menu location.
Let’s stroll by means of the method.
Begin by opening the customizer (Look > Customise).
Choose the Menus possibility and click on the button to Create New Menu.
Identify it one thing apparent, like “Social Hyperlinks Menu”.
Choose the checkbox subsequent to Social Hyperlinks Menu within the Menu Location part, then click on Subsequent.
Click on on + Add Objects, and add a hyperlink to every of your social community accounts utilizing the Customized Hyperlinks possibility.
Once you’re performed, your menu ought to look one thing like this:
Updating social hyperlinks within the Twenty Seventeen WordPress theme.
The final step is to click on the Publish button within the Customizer to avoid wasting the brand new menu. Your social community hyperlinks will now be displayed within the footer menu.
That wasn’t onerous. Let’s transfer on to one thing a contact tougher.
#2. Change “Proudly powered by WordPress”
There are two explanation why you would possibly need to change the textual content within the footer declaring that your website is “Proudly powered by WordPress.”
Perhaps you need to broaden on it and say one thing like “Proudly powered by WordPress, designed by WebPress Designs, and hosted by LAMPress Internet hosting.”
Perhaps you need to go the opposite route and say one thing actually catchy like “Copyright 2022 MyBiz | All Rights Reserved.” Good.
No matter your causes or targets, we gained’t decide. We’ll simply inform you the best way to get the job performed.
The very first thing you’ll have to do is to create and activate a baby theme.
When you’ve created and activated your baby theme, copy the footer.php file over from Twenty Seventeen into your baby theme listing. Subsequent, open up footer.php and search for this little bit of code:
get_template_part( ‘template-parts/footer/website’, ‘data’ );
Now you could have a few choices. You possibly can merely remark out that line by including // simply earlier than the code, or you can think about changing it with your individual customized footer textual content. Right here’s the code I added to create the footer textual content you see within the picture above:
#3. Dynamic One Web page Navigation (Improved!)
In my earlier publish about Twenty Seventeen I included a easy jQuery script you can use to construct dynamic one web page navigation linking to the totally different entrance web page sections. That script obtained the job performed, however it did want somewhat refinement.
On this publish, we’re taking issues two steps additional. Along with creating purposeful one-page navigation, we’re additionally going to repair the navigation menu hover impact and add clean scrolling to enhance the general expertise.
First, let’s begin with the brand new jQuery that you just’ll want so as to add to your website:
You may add this code to a JavaScript file loaded by a baby theme (which is what I did) or use a plugin that means that you can add JavaScript to your website (which is what I really helpful in my earlier publish on Twenty Seventeen). Simply be sure to load the code after jQuery has already loaded.
The primary a part of the code is unchanged from the earlier tutorial. The remainder of the code fixes the navigation hyperlink highlighting. Check out the feedback within the code to get an entire image of what’s going on.
As well as, we are able to make the motion to every part rather a lot smoother by putting in and activating a free plugin: Straightforward Easy Scroll Hyperlinks Easy Scrolling Anchor.
After all, you’ll nonetheless have to construct your navigation menu by including a customized hyperlink to every part utilizing the identify of the web page displayed in that part.
For instance, to hyperlink to the “About” part, you’ll create a customized hyperlink and use “#about” because the hyperlink anchor. For full particulars, see How you can Customise the Free Twenty Seventeen WordPress Theme.
It takes somewhat doing, however the effort is effectively value it. Not satisfied? Check out the outcomes:
Fairly good, even when I do say so myself.
#4. Add a Customized Sidebar to Every Entrance Web page Part and Web page
Twenty Seventeen makes nice use of whitespace, however I do know what some are you’re considering. You’re considering that perhaps there’s a bit an excessive amount of whitespace. You recognize what could be actually helpful? Should you might add totally different sidebar widgets to every entrance web page part and in addition add sidebars to pages.
For instance, say you wished so as to add a search discipline, class drop down checklist, and extra widgets to the weblog part of your homepage. It positive could be good to have the ability to do one thing like this:
Weblog part customized sidebar.
After all, you wouldn’t need those self same widgets displayed within the about part. No, you’d need to add one thing totally different in that part. Now that I give it some thought, it could be very nice to have the ability to show one sidebar on the about part of the entrance web page, however a totally different sidebar on the precise /about web page.
Buddy, I’ve excellent news. You possibly can add customized sidebar sections to every entrance web page part after which reuse the identical sidebars or totally totally different sidebars on each web page of your website. Nevertheless, this isn’t a quite simple hack. We’re again in baby theme territory right here and we’re additionally going to want to make use of a plugin.
By default, Twenty Seventeen doesn’t add sidebars to the entrance web page part — or to any pages for that matter. It does show a sidebar on particular person posts, however pages have a stark, wide-open, virtually empty look.
To be able to change that and add sidebar areas to pages, we have to do a couple of issues:
Copy over the template recordsdata that Twenty Seventeen makes use of to show pages and entrance web page sections.
Add sidebar code to the web page template and to every entrance web page part by modifying the template recordsdata.
Set up Customized Sidebars.
Create a customized sidebar for every entrance web page part and for every web page the place we need to show a sidebar.
Add a sidebar to every web page the place you need to show a sidebar.
Let’s stroll by means of the steps separately.
Step 1: Copy content-page.php, content-front-page.php, and content-front-page-panels.php to your baby theme.
You’ll discover these recordsdata by going to wp-contentthemestwentyseventeentemplate-partspage. In that listing, you’ll see three recordsdata. Copy all three.
You’ll have to recreate the identical listing construction in your baby theme by including a template-parts listing to your baby theme and nesting a web page listing inside it. Then paste the recordsdata into the web page listing.
Once you’re performed, your baby theme listing construction ought to seem like this:
Web page template recordsdata.
Step 2: Add sidebar code to every template file.
First, open up content-page.php and add <?php get_sidebar(); ?> simply earlier than the closing header tag, like this:
Content material web page code added.
Second, open up the opposite two template recordsdata, content-front-page.php and content-front-page-panels.php, and drop the next code simply earlier than the closing header tag in every file:
After inserting that code, right here’s what content-front-page.php and content-front-page-panels.php ought to seem like with the mandatory code added:
Entrance web page sidebar code.
Step 3: Set up Customized Sidebars.
The free Customized Sidebars plugin from WPMU DEV is obtainable from WordPress.org.
Step 4: Create a customized sidebar for every entrance web page part.
Head to Look > Widgets and create a brand new sidebar for every entrance web page part.
Now concentrate, as a result of it’s vital that you just get this subsequent half proper in your entrance web page sidebars to be displayed. Comply with these steps to create every sidebar:
Click on Create a brand new sidebar. Identify every sidebar utilizing the precise similar identify because the web page identify. As an example, if certainly one of your entrance web page sections is populated from a web page with the title “About”, then create a sidebar with the very same identify: “About”.
Naming the customized sidebar.
The code added to the entrance web page templates in Step 2 will look ahead to a match between the part title and sidebar title to know which sidebar to show.
Click on Superior – Edit customized wrapper code and add the next code:
Within the first field, Earlier than Title, add <h2 class=”widget-title”>.
Within the second field, After Title, add </h2>.
Within the third field, Earlier than Widget, add <part id=”%1$s” class=”widget %2$s”>.
Within the fourth field, After Widget, add </part>.
Widget wrapper.
This code matches what Twenty Seventeen provides earlier than and after every widget and widget title. By wrapping your customized sidebar content material on this code, you’ll make sure that the default Twenty Seventeen styling is utilized to your entrance web page sidebar content material.
Now you’re prepared so as to add content material to your sidebars. Choose from the out there widgets and construct out the customized sidebars you need to see displayed in every part.
Once you’re performed. Your checklist of customized sidebars ought to look one thing like this, with every sidebar named to match one of many entrance web page sections:
Customized sidebars checklist.
Observe: The Latest Posts widget doesn’t work with this customization. Should you do add it to any of the entrance web page sidebar areas, you’ll discover that the part the place it seems will load the house web page content material quite than the customized web page content material.
Step 5: Add a sidebar to every web page the place you need to show a sidebar.
Now, head to any web page the place you need to show a sidebar and open up the web page editor. Scroll down till you see the Sidebars admin meta field within the right-hand column. From the drop-down, choose the sidebar you want to show.
Sidebars admin meta field.
Scroll again up, click on Replace and examine the web page. You’ll see that the sidebar you chose is now displayed slightly below the web page title.
Web page with sidebar.
#5. Add a Big Featured Picture to Every Web page
The Twenty Seventeen theme with an enormous characteristic picture.
I like the way in which the full-height header picture or video appears to be like on the homepage of Twenty Seventeen. Nevertheless, I actually don’t love the way in which featured pictures are rendered all over the place else. As an alternative, I’d a lot quite show the featured picture of every web page or publish utilizing the total top show used on the homepage.That’s what this hack is all about and it’s a customization that falls solidly into the hack class. I’m not going to lie, the code you’re about to see isn’t stunning, however — and that is the vital half — it really works!
The very first thing you’ll have to do is to repeat over header.php from Twenty Seventeen into your baby theme. Then, you’ll want to switch the whole contents of the header tag with the next code:
Subsequent, we have to add a little bit of CSS to our baby theme to duplicate the styling constructed into the Twenty Seventeen homepage and apply it to our customized header pictures.
Simply paste that CSS into your baby theme’s type.css file.
The brand new header.php code and the styling added to type.css will pressure the picture to the total top. Nevertheless, due to the way in which courses are utilized and eliminated dynamically in Twenty Seventeen, the sticky navigation doesn’t work fairly proper. We’re going to want so as to add a little bit of jQuery to our theme to get the sticky navigation to behave itself.
This code may very well be added to a baby theme JavaScript file or with a plugin, simply be sure it’s loaded after the jQuery core has loaded.
Superior. Now, if you add a featured picture to a publish or web page, it will likely be displayed utilizing the total top of the viewport, identical to the total top header on the homepage.
All of the Hacks in One Baby Theme
We’ve coated a whole lot of floor and getting any certainly one of these hacks to work correctly could be a bit tough. To be able to make issues simpler on you, I’ve rolled all of those modifications into a baby theme and tossed it up on GitHub. Should you simply need to get all of those modifications working with out going by means of the method of constructing the kid theme your self, simply obtain the discharge zip folder, add it to your website, and activate it.
As well as, you’ll need to set up two plugins — Customized Sidebars and Straightforward Easy Scroll Hyperlinks Easy Scrolling Anchor — to get entry to the the entire customizations described on this tutorial.
Then, simply stroll by means of the method of establishing your entrance web page sections and customized one-page navigation menu described in our earlier Twenty Seventeen tutorial. Then customise your social media menu, craft the footer textual content to your liking, add entrance web page part sidebars, and also you’ll get the total impact of all 5 hacks for Twenty Seventeen.
Editor’s Observe: This publish has been up to date for accuracy and relevancy.
[Originally Published: December 2106/ Revised: March 2022]
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!