I recently wrote a blog post confessing my dying love for WordPress. I addressed some common concerns that we sometimes hear from clients, and then we put those myths to rest.
However, I’d be lying if I said WordPress didn’t come with complications here and there. Quite often, WordPress will test your technical skills to the tipping point.
When you build and edit a site on WordPress, you are basically creating a global layout for the entire website, and then just editing each page’s content. So what happens when you need one particular page to be formatted differently?
Here at Kite Media, we often face this challenge when building custom landing pages for clients. If they need a different tracking phone number or if they have a different address to put in the footer, we don’t want to create an entirely new site. Instead, we’ll just create a custom WordPress page template!
WordPress.org explains that a page template is “ a specific type of template file that can be applied to a specific page or groups of pages”. In other words, your custom template will only apply to the pages that you specify, rather than the entire website. This is especially useful when having to create a custom footer or header that will only apply to a certain page. Let’s get started…
NOTE: We’ll be working with a few snippets of code throughout this tutorial. We HIGHLY suggest backing up your website before changing a bunch of code. Although we’re making only minor changes, one line of code can break an entire page, or even site.
Step 1: Access your site’s file directory
First off, get to your WordPress website’s file directory (all of the site’s files). You can either use FTP, or you can do this directly through your web hosting’s file manager (most basic hosts use cPanel).
Navigate to your themes folder. Generally, the file path will be similar to:
public_html/example.com/wp-content/themes/yourTheme
Step 2: Create a new PHP file
Once you’re inside the active theme’s folder, create a new file. This file will be the new custom page template we’re creating.
For this example, we’ll call our custom page template newCustomTemplate.php. You can name your template whatever you’d like (with the exception of page.php), just make sure it ends in .php.
Copy and paste the code below at the top of your newly created file. Change ‘New Custom Template’ to whatever you want your template to be called.
<?php /* Template Name: New Custom Template */ ?>
Step 3: Find your new template
Log in to your WordPress Dashboard and add a new page.
On the right sidebar of the newly created page, click the ‘template’ dropdown menu, and select the template page you created (it will show up as you named it in the code pasted from above).
There you go! Your new template will be applied to the new page you’re creating. Let’s add something to it so you’re not stuck with a white blank page of nothing…
Step 4: Connecting it to your site’s content
From here, you could technically write your own html and PHP code in the new file you created and it will show up on the new page you made. However, you most likely want to keep the majority of the existing site’s layout and just tweak some things.
If you want to create just a custom page (not change the header or footer), you’ll want to take code from your page.php file in your site directory. This file contains the layout for each page on your WordPress site. Once again, we’ll be accessing your website’s file directory. Navigate to:
public_html/example.com/wp-content/themes/yourTheme
This time, open and edit your website’s page.php file. Copy ALL of the code in that file.
Open the new custom template we created a minute ago (it should be in the same folder). Paste the code you just copied from page.php. Make sure you paste the new code below the line of code we added earlier at the top.
From here, it’s going to be entirely up to you what you change. If you need to rebuild a column, find that particular column in the HTML code and make the change. Or, if you want to entirely rebuild the page, start writing the new code in place of the pasted code.
Note: If you don’t see any HTML where you think the content should be, your page is probably pulling the content from a different function in a different file. If this is the case, you’ll have to search for that function and change it there. Or, you can simply erase the function and write new HTML in its place.
If all you’re changing is the page’s layout, your new custom page template should be ready to go! Save the file, make sure it’s uploaded back to the server, and test your site.
Step 5: Point the page to a new header or footer
If you’re wanting to create a custom header or footer template, we have a couple more quick steps to go.
First, create a new page template and copy all of the code from page.php into the newly created template file, just like we did in Step 4.
Now, you’ll need to create an additional template file that will be used for either the header or footer. Just like before, create a new PHP file and place it in the ‘yourTemplate’ folder. For this example, we’ll call the file header-secondary.php. Make sure to name it something that follows header-.
Just like before, copy and paste this snippet into the top of your newly created template file:
<?php /* Template Name: Header Secondary */ ?>
Name the file whatever you’d like, but make it easy to find for future reference.
We’ll now be changing one line of code near the top that says something similar to:
get_header(); ?>
Erase that single line of code and paste the following line of code in its place:
get_header( 'secondary' ); ?>
Notice that this is specific to my example, because I named my file ‘header-secondary.php’. Replace ‘secondary’ with however you named your new header template. For example, if I named my new custom template header-newHeader.php, I would replace ‘secondary’ with ‘newHeader’.
Now this new custom template will pull anything from your newly created header-secondary.php file.
This is the exact same process for the footer, but you would change the line of code that says:
<?php get_footer(); ?>
Simply add ‘secondary-footer’, or however you named your custom footer template, in the parenthesis and it will pull the code from that other template file you created.
As with the page.php process, you’ll copy the code from your website’s header.php or footer.php file, and paste it into your new custom header or footer template. You can now edit the code in your custom template however you’d like.
Step 5: Test your site
Once you’ve saved all those files and uploaded them back to the server, choose the new custom page template on your new WordPress page and you should see any changes that you made to the code in your new template files.
Just like that you’ve created your very own WordPress template. Pat yourself on the back. You earned it, champ.
Confused?
If you have questions or if your site isn’t quite working, feel free to leave a comment below and we’ll do our best to steer you in the right direction.
If you’re not comfortable writing code but you want to start customizing your WordPress site, it might be worth brushing up on your HTML and to learn some PHP. CodeSchool is a great free resource, or you can check out WPMU Dev’s blog to learn WordPress specific coding practices.
Or, if you’d rather avoid all of this, you can always hire a WordPress developer (the much faster, easier route). Hit us up at Kite Media for any WordPress projects you have for your business! Kite Media is always looking to work with new, exciting businesses.
Happy coding!