In an effort to start unpacking all things WordPress, I decided to start first with understanding how a few basic WP dashboard tools are working on the backend. Today I’m looking at Page Templates.
Now it’s one thing to troubleshoot the WordPress file system in little spurts as tickets present themselves, and another thing entirely to build out your own page template. So while this may seem like basic knowledge to some, is was quite empowering for me!
For this post and likely others, I’m playing with a WordPress install at https://labrumfield.com/custom/. The theme I’m using is called Aileron. (This is a completely random choice, but I did like that it was pretty simple in terms of overall design– I was looking for a blank slate to work with.)
You can use FTP or File Manager for this one. I’ll work in File Manager since this is pretty simple! I started first by navigating to the wp-content folder of my WordPress install, and then going further into my theme folder at themes>aileron.
The first thing I did was create a new file in the theme folder called laurenstemplate.php. I know very little about php, but I do know that every file needs a title. I added the following to my new file:
<?php /* Template Name: Lauren's Template */ ?>
After clicking save, I went back to my WordPress dashboard, created a new Page, and selected Lauren’s Template from the dropdown that now magically existed under Page attributes:
Now the live version of my new page looked like this:
…which makes sense, right? Because my laurenstemplate.php file is completely empty.
I didn’t want to recreate the wheel when adding content, and I know that WordPress is already looking to a template for pages called page.php, so I started by cloning that to my new file.
As shown in the gif above, you’ll want to copy the full page.php content, aside from the top title/description into your new template.php file. Make sure to remove you ?> from your top php opener if you need to, and then click save! Now when I reload my WordPress page using Lauren’s Template, this is what I see:
Woo! Now we’ve have something to work with. (Feel free to stop reading here if you don’t care about design changes for this specific theme.) But let’s say I want to remove the sidebar and center the page content. There’s a section in my code that’s calling the sidebar right here:
By simply removing the highlighted line the sidebar goes away, but the content is still pushed to the left. I’ve added some text (and an awesome gif that inspired our Roadshow) to the page to see the changes a little more clearly:
Upon inspecting the page further (I used right-click>Inspect Element in Google Chrome) I noticed that the content area of my site was pulling in columns, which also explained why simple CSS to make the site width set to 100% wasn’t changing anything:
In the code that I copied over to laurenstemplate.php, this is what I saw next to my content-area class:
I removed the aileron_layout_class so my code looked like this:
After clicking save, those changes to the template are now applied:
