When you have a monthly newsletter page, or when you need to create a page with the exact same structure every month or week or even every day it’s time-consuming and a waste of energy.
As an example, one of our clients has a page template that she needs to publish every month, so that would mean that she has to re-do the design every month so we have applied our page templates strategy and now she just needs to add the written content in the needed custom fields and she can publish it. So from a few hours of designing the page every month she is just spending a few minutes to introduce the written content.
In this article, I’m going to show you how to work with WordPress page templates to make that task really simple and fast.
A page template is basically a file with a predefined design where we add some custom fields where we put our data and it displays it in our predefined design automatically. That means that we make the layout once and then just add content to our predefined fields.
In order to get that done we have to follow these steps:
- Installing Advanced Custom Fields
- Creating the needed custom fields
- Adding the template file to the child theme
- Adding the fields code to our design
- Start using the template
Let’s begin our step by step guide.
Installing Advanced Custom Fields
In order to install the plugin, we have to either follow this link and to download the plugin files and install them to your WordPress installation.
Or if you prefer to install it directly using the “Add New Plugin” functionality of WordPress you just have to search the name of the plugin “Advanced Custom Fields” and the first result should be the one we need. Here is a screenshot with how the plugin looks in the search results.
Now we should be all set with the plugin installation. Let’s start using it in our next step.
Creating the needed custom fields
Now that our plugin is installed, we have to start creating our custom fields. To do that we have to hover our mouse cursor over the “Custom Fields” menu item from our left sidebar in our WordPress dashboard and click on “Add New”.
Here we should see a page with the custom field group settings. We have to add the title of the custom fields group and then start adding the actual fields by pressing “Add Field”.
Now we have to add our name and details for the field, the form has instructions for every field. Here is how our example setup looks like.
Now that we have our field ready we need to configure the conditional rules for its use. That means that we have to set up where it can be used on what kind of pages or even on a specific page template. In our case we will make it available on all the top level pages, that means it will be available on all the pages that do not have a parent page.
We are all set with the custom field, we just have to publish it.
After publishing the Field Group we are ready for our third step of the guide.
Adding the template file to the child theme
Now we need to get our hands dirty with some PHP coding. First of all, we have to create our file and define it as a page template. To do that we have to open our favorite code editor and make a new file. For our example, I will be using PHPStorm which is a premium IDE but you can also use a free editor like Brackets or Visual Studio Code.
Also, for this step, we need to have a custom child theme or a custom theme. Here you have an article written by Dositej on How to create a Divi child theme. In the article, Dositej is explaining how to create a child theme for Divi which is one of the most used WordPress themes, but the technique can be applied to any theme.
In our example, we will use the newest basic theme in WordPress called Twenty Nineteen. Let’s create our PHP file, I’ll call it “memberfix-page-template.php” you are free to call it however you prefer.
To define the actual template so that WordPress knows that it can be used as a page template we have to add a comment at the begining of the file with the template name, in our case the code is this one:
Or as you can see in the following screenshot.
We are all set with this step, we have our page template created. Let’s actually use it in the next step.
Adding the fields code to our design
Now we code our page layout however we prefer. In our example, we will just copy the layout of the default page template which is called page.php and will edit it to match our needs. Here is how the page.php code looks like in our example.
Here is how our example template file looks like now.
In our example, we will use our custom field to add a heading at the beginning of the page. To do that we need to add the following code at the beginning of the section:
As I mentioned, we add it at the beginning of the main section.
Our example is pretty simple, but it’s just to show you how to add the custom fields into your design. That being said, we are done with the coding and with this step of the guide. Let’s use our template in the next step.
Start using the template
We have to open the “Page Attributes” tab and select our page template from the “Template” dropdown.
Our last action is to actually fill the field with our content.
And we are done, we have a new page template and a predefined layout to work with. Here is how our example page looks now.
Of course in our example, we didn’t really do any styling or formatting to our custom field. But in your case, you probably need to stylize your fields.
To do that you will need some HTML/CSS knowledge. You can either do it yourself or you can outsource it since it shouldn’t be so expensive (you can learn about working with me and the rest of our team here). But still, if you are my kind of person and you like to do things yourself and you like to always learn new things you can study some HTML and some CSS. Here you have some resources for that.
To read more about HTML you can do so on W3School’s website since that’s one of the oldest learning platforms for programming and it has really well-explained articles, here is the link to the HTML course.
Also, they have a course about CSS, here is the link to it.
But if you are like me and you prefer a video course, here you have a link to the course I recommend.
Whoever ends up doing the styling, the good news is that it only has to be done once. After that, every time you reuse the page template it will have the styling you specified for your fields. You can even have different styles and choose from them by adding different so-called “CSS classes” to each custom field. But that’s a little bit beyond the scope of this particular tutorial!
Please let us know in the comments section if this article was helpful and also if you would like to share your page templates design with us please do so in the comments section.