Twenty Seventeen is among the maximum flexible default subject matters WordPress has ever noticed. Alternatively, the choices constructed into the theme depart a couple of issues to be desired.
On this publish, I’ll display you 5 hacks you’ll be able to use to make Twenty Seventeen uniquely your personal. We’ll get started with the fundamentals and transfer directly to more difficult and impactful customizations.
Ahead of we get into the code, take a handy guide a rough take a look at the customizations we’re going quilt. If one catches your eye pass forward and head immediately for that segment!
-
- 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 point we’re accomplished, you’ll have the ability to flip Twenty Seventeen into a phenomenal and trendy web page for industry or running a blog. Don’t consider me? Take a look. Right here’s what you’ll construct when you put into effect all 5 of those hacks:
Able to start out 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 this can be a customization to make Twenty Seventeen uniquely your personal so we’re going to hide it.
Twenty Seventeen comprises a ravishing social hyperlinks menu within the web page footer.
The issue is that quite a lot of customers have reported having bother working out methods to upload their social community hyperlinks to this menu. Fortunately, it’s truly lovely easy as soon as you understand how to do it.
All you need to do is create a menu with hyperlinks for your social networks and assign it to the Social Hyperlinks Menu location.
Let’s stroll throughout the procedure.
- Get started via opening the customizer (Look > Customise).
- Make a selection the Menus choice and click on the button to Create New Menu.
- Title it one thing glaring, like “Social Hyperlinks Menu”.
- Make a selection the checkbox subsequent to Social Hyperlinks Menu within the Menu Location segment, then click on Subsequent.
- Click on on + Upload Pieces, and upload a hyperlink to every of your social community accounts the usage of the Customized Hyperlinks choice.
While you’re accomplished, your menu will have to glance one thing like this:
The remaining step is to click on the Put up 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 exhausting. Let’s transfer directly to one thing a marginally more difficult.
#2. Trade “Proudly powered via WordPress”
There are two the explanation why chances are you’ll need to exchange the textual content within the footer stating that your website online is “Proudly powered via WordPress.”
- Possibly you need to enlarge on it and say one thing like “Proudly powered via WordPress, designed via WebPress Designs, and hosted via LAMPress Website hosting.”
- Possibly you need to move the opposite course and say one thing truly catchy like “Copyright 2022 MyBiz | All Rights Reserved.” Great.
No matter your causes or targets, we received’t pass judgement on. We’ll simply let you know methods to get the task accomplished.
The very first thing you’ll want to do is to create and activate a child theme.
When you’ve created and activated your kid theme, replica the footer.php document over from Twenty Seventeen into your kid theme listing. Subsequent, open up footer.php and search for this little bit of code:
get_template_part( ‘template-parts/footer/website online’, ‘data’ );
Now you’ve got a few choices. You’ll be able to merely remark out that line via including // simply ahead of the code, or you might want to believe changing it with your personal customized footer textual content. Right here’s the code I added to create the footer textual content you spot within the symbol above:
#3. Dynamic One Web page Navigation (Advanced!)
In my previous post about Twenty Seventeen I integrated a easy jQuery script you might want to use to construct dynamic one web page navigation linking to the other entrance web page sections. That script were given the task accomplished, nevertheless it did want a bit of refinement.
On this publish, we’re taking issues two steps additional. Along with developing practical one-page navigation, we’re additionally going to mend the navigation menu hover impact and upload easy scrolling to toughen the entire enjoy.
First, let’s get started with the brand new jQuery that you simply’ll want to upload for your website online:
It’s essential to upload this code to a JavaScript document loaded via a kid theme (which is what I did) or use a plugin that lets you upload JavaScript for your website online (which is what I advisable in my earlier publish on Twenty Seventeen). Simply you should definitely load the code after jQuery has already loaded.
The primary a part of the code is unchanged from the former instructional. The remainder of the code fixes the navigation hyperlink highlighting. Check out the feedback within the code to get a whole image of what’s going on.
As well as, we will be able to make the motion to every segment so much smoother via putting in and activating a loose plugin: Easy Smooth Scroll Links Smooth Scrolling Anchor.
After all, you’ll nonetheless want to construct your navigation menu via including a customized hyperlink to every segment the usage of the title of the web page displayed in that segment.
For instance, to hyperlink to the “About” segment, you may create a customized hyperlink and use “#about” because the hyperlink anchor. For complete main points, see How to Customize the Free Twenty Seventeen WordPress Theme.
It takes a bit of doing, however the effort is definitely value it. No longer satisfied? Check out the effects:
Beautiful great, even supposing I do say so myself.
#4. Upload a Customized Sidebar to Each and every Entrance Web page Phase and Web page
Twenty Seventeen makes nice use of whitespace, however I do know what some are you might be considering. You’re considering that possibly there’s a bit of an excessive amount of whitespace. You already know what may well be truly helpful? If you might want to upload other sidebar widgets to every entrance web page segment and in addition upload sidebars to pages.
For instance, say you sought after so as to add a seek box, class drop down record, and further widgets to the weblog segment of your homepage. It certain can be great with the intention to do one thing like this:
After all, you wouldn’t need those self same widgets displayed within the about segment. No, you’d need to upload one thing other in that segment. Now that I take into accounts it, it might be truly great with the intention to show one sidebar at the about segment of the entrance web page, however a other sidebar on the real /about web page.
Pal, I’ve excellent information. You’ll be able to upload customized sidebar sections to every entrance web page segment after which reuse the similar sidebars or fully other sidebars on each and every web page of your website online. Alternatively, this isn’t an easy hack. We’re again in kid theme territory right here and we’re additionally going to want to use a plugin.
Through default, Twenty Seventeen doesn’t upload sidebars to the entrance web page segment — or to any pages for that subject. It does show a sidebar on person posts, however pages have a stark, wide-open, nearly empty glance.
So as to exchange that and upload sidebar spaces to pages, we want to do a couple of issues:
- Reproduction over the template information that Twenty Seventeen makes use of to show pages and entrance web page sections.
- Upload sidebar code to the web page template and to every entrance web page segment via editing the template information.
- Set up Custom Sidebars.
- Create a customized sidebar for every entrance web page segment and for every web page the place we need to show a sidebar.
- Upload a sidebar to every web page the place you need to show a sidebar.
Let’s stroll throughout the steps one after the other.
Step 1: Reproduction content-page.php, content-front-page.php, and content-front-page-panels.php for your kid theme.
You’ll to find those information via going to wp-contentthemestwentyseventeentemplate-partspage. In that listing, you’ll see 3 information. Reproduction all 3.
You’ll want to recreate the similar listing construction on your kid theme via including a template-parts listing for your kid theme and nesting a web page listing within it. Then paste the information into the web page listing.
While you’re accomplished, your kid theme listing construction will have to appear to be this:
Step 2: Upload sidebar code to every template document.
First, open up content-page.php and upload simply ahead of the remaining header tag, like this:
2d, open up the opposite two template information, content-front-page.php and content-front-page-panels.php, and drop the next code simply ahead of the remaining header tag in every document:
After placing that code, right here’s what content-front-page.php and content-front-page-panels.php will have to appear to be with the important code added:
Step 3: Set up Customized Sidebars.
The loose Custom Sidebars plugin from WPMU DEV is to be had from WordPress.org.
Step 4: Create a customized sidebar for every entrance web page segment.
Head to Look > Widgets and create a brand new sidebar for every entrance web page segment.
Now concentrate, as it’s essential that you simply get this subsequent section correct on your entrance web page sidebars to be displayed. Practice those steps to create every sidebar:
- Click on Create a brand new sidebar. Title every sidebar the usage of the actual similar title because the web page title. As an example, if one in every of your entrance web page sections is populated from a web page with the identify “About”, then create a sidebar with the very same title: “About”.
The code added to the entrance web page templates in Step 2 will stay up for a fit between the segment identify and sidebar identify to grasp which sidebar to show.
- Click on Complex – Edit customized wrapper code and upload the next code:
- Within the first field, Ahead of Name, upload
- In the second one field, After Name, upload
- Within the 3rd field, Ahead of Widget, upload
- Within the fourth field, After Widget, upload
This code suits what Twenty Seventeen provides ahead of and after every widget and widget identify. Through wrapping your customized sidebar content material on this code, you’ll be sure that the default Twenty Seventeen styling is carried out for your entrance web page sidebar content material.
- Now you’re in a position so as to add content material for your sidebars. Make a selection from the to be had widgets and construct out the customized sidebars you need to look displayed in every segment.
While you’re accomplished. Your record of customized sidebars will have to glance one thing like this, with every sidebar named to compare probably the most entrance web page sections:
Be aware: The Fresh Posts widget doesn’t paintings with this customization. For those who do upload it to any of the entrance web page sidebar spaces, you’ll understand that the segment the place it seems that will load the house web page content material relatively than the customized web page content material.
Step 5: Upload 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 spot the Sidebars admin meta field within the right-hand column. From the drop-down, make a selection the sidebar you want to show.
Scroll again up, click on Replace and consider the web page. You’ll see that the sidebar you decided on is now displayed slightly below the web page identify.
#5. Upload a Massive Featured Symbol to Each and every Web page
I really like the best way the full-height header symbol or video appears at the homepage of Twenty Seventeen. Alternatively, I truly don’t love the best way featured photographs are rendered all over the place else. As a substitute, I’d a lot relatively show the featured symbol of every web page or publish the usage of the total peak show used at the homepage.That’s what this hack is all about and it’s a customization that falls solidly into the hack class. I’m no longer going to lie, the code you’re about to look isn’t stunning, however — and that is the essential section — it really works!
The very first thing you’ll want to do is to duplicate over header.php from Twenty Seventeen into your kid theme. Then, you’ll want to exchange all of the contents of the header tag with the next code:
Subsequent, we want to upload a bit of of CSS to our kid theme to copy the styling constructed into the Twenty Seventeen homepage and use it on our customized header photographs.
Simply paste that CSS into your kid theme’s taste.css document.
The brand new header.php code and the styling added to taste.css will drive the picture to the total peak. Alternatively, as a result of the best way categories are carried out and got rid of dynamically in Twenty Seventeen, the sticky navigation doesn’t paintings slightly correct. We’re going to want to upload a bit of of jQuery to our theme to get the sticky navigation to act itself.
This code may well be added to a kid theme JavaScript document or with a plugin, simply ensure it’s loaded after the jQuery core has loaded.
Superior. Now, while you upload a featured symbol to a publish or web page, it is going to be displayed the usage of the total peak of the viewport, identical to the total peak header at the homepage.
All of the Hacks in One Kid Theme
We’ve coated a large number of flooring and getting any any such hacks to paintings correctly could be a bit difficult. So as to make issues more straightforward on you, I’ve rolled all of those changes into a kid theme and tossed it up on GitHub. For those who simply need to get all of those changes running with out going throughout the procedure of creating the kid theme your self, simply download the release zip folder, add it for your website online, and turn on it.
As well as, you’ll need to set up two plugins — Custom Sidebars and Easy Smooth Scroll Links Smooth Scrolling Anchor — to get get entry to to the the entire customizations described on this instructional.
Then, simply stroll throughout the technique of putting in your entrance web page sections and customized one-page navigation menu described in our previous Twenty Seventeen tutorial. Then customise your social media menu, craft the footer textual content for your liking, upload entrance web page segment sidebars, and also you’ll get the total impact of all 5 hacks for Twenty Seventeen.
Editor’s Be aware: This publish has been up to date for accuracy and relevancy.
[Originally Published: December 2106/ Revised: March 2022]