Wordpress Series: Creating Templates

Today we present another key aspect of wordpress' almost-never-ending tweaking capabilities..Templates!
We will aim in this session to explain what templates are, why would we need them, how to create your own and use it under your current wordpress installation.
If you missed our prior Wordpress tutorial series, you can find relevant links at the end of this post

What are templates?

If we look out the template definition in merriam-webster, templates are defined as:

a gauge, pattern, or mold (such as a thin plate or board) used as a guide to the form of a piece being made^[1]

1. Merriam-Webster

In wordpress terminology, templates do not drift away from that definition; they essentially serve the exact same purpose, by providing you with the means to create or utilize a custom recurring display format for your data. Whether this is to display data regarding posts, custom queries, custom post type data,... templates are there to help.
And you can either rely on any built-in templates within wordpress themes, or practically create your own custom templates.

Creating a template

Creating a template as a reusable component is such an easy and basic task to do. You would basically need to do the following:

• Create a new PHP file (for example mytemplate.php)
• Place that file under your current active theme directory. So for example if you are using the standard twenty-sixteen of twenty-seventeen default themes, you would need to place this new file under this structure:
  
• In order for wordpress to properly identify this file as a template, you would need to include within the header special statement that follows the pattern:

/* Template Name: My Template
 * Version: 0.1.0
 */

Notice that the keyword is Template Name: followed by the actual name of your template. Version is not a necessity, yet that would definitely be helpful to you to keep track of your versioning changes to the template file.
Also notice that this info is placed as a PHP comment, within the /* */ and is required to be at the start of your PHP file.

• Follow the standard structure of your theme files. By this we mean that due to templates being complete representations of a single display of your data, you will need to include the complete layout structure for your data display following how your current active theme is rendering the info.
  To break down this info further, in wordpress theme file standards, we normally have 3 sections of data being shown: header, body, and footer. While the body of the content is normally left out to be displayed and manipulated by the template file(s), the header and footer sections are re-used (clearly for ease of modifications , reusability, and better overall structure).
  Below are examples of very basic header section and footer sections
  Header section:
  
  Footer section:
  
  So, in order to maintain this structure in our templates, we also normally rely on pre-built wordpress functions, consecutively for headers and footers:

get_header();

get_footer();

Those essentially minimize your re-work and enable you to include the standard header and footer into your current template. Keep in mind though, some theme files expand on header and footer sections, and you might also need to add in few other details to cover the whole display pattern on the site.

• Include your recurring custom content. This is where you actually put in the content you would like to display within your template. Again, you would normally need to follow the standard content approach of your theme, this includes what divs they use, whether they have a main tag or not, etc... YET this is NOT required.
  You can create whatever content and structure you would like, it just might not fit exactly with how your current theme works.
  You can for example create a container div for your content

<div id="primary" class="content-area">
</div>

and within that div include all your required data.
At this stage, it is really up to you to decide what content goes in here, yet it is the norm to utilize THE_LOOP (which is the standard wordpress approach to access content relevant to your current post or page) and then perform any needed action. For example, below we use the loop to display the actual data of the current post and render it to our users under a new div

<div class="entry-content">
                <?php while ( have_posts() ) : the_post(); ?>
                    <?php the_content(); ?>
                <?php endwhile; ?>
</div>

The while loop fetches the currently available posts, and grabs the_content which is the text saved within this post and sends it to display within the template's div.

Using the template

Putting the template in use can actually be accomplished via utilizing a pre-built functionality within wordpress which allows selecting the template pattern from a drop-down option when you are creating a new page or post.
If you are on the create or edit page screen, you will notice to the right sidebar, and within the Page Attributes, a drop down called Template, this is where your existing and custom templates will apppear.
You can actually notice in the screenshot below that as we created our new template, it is now showing as an option to use - last entry

Once picked, this will customize, on display, the content of your current page or post according to that selected template.
That's it!
Now you can create your own custom wordpress templates following the above hopefully straightforward approach.

If you have any questions, feel free to reach out!

Photo Credits:
Images in this post are either self-created, or are CC images publicly available and labeled for reuse under google search.

Prior entries in this series:
If you missed them, here they are !
Wordpress Series: Creating a Custom Post Type (Part 3)
Wordpress Series: Creating a Custom Post Type (Part 2)
Wordpress Series: Creating a Custom Post Type (Part 1)
Wordpress Series: Coding Your Way Via Plugins
How To Properly Customize Your Wordpress Installation .. Via Coding
Securing Your Wordpress Installation

---

Founder of Arab Steem:
Arab Steem is a community project to expand Steemit to the Arab world, by supporting the existing Arab steemians and promoting others to join.
You can connect with us on @arabsteem or via discord channel https://discord.gg/g98z2Ya
Your support is well appreciated!

Proud Member Of:

• steemSTEM: SteemSTEM is a project that aims to increase both the quality as well as visibility of Science, Technology, Engineering and Mathematics (and Health). You can check out some great scientific articles via visiting the project tag #steemSTEM , project page @steemstem, or connecting with us on chat https://steemit.chat/channel/steemSTEM
• MAP(Minnows Accelerator Project): MAP is a growing community helping talented minnows accelerate their growth on Steemit.
  To join, check out the link at the home page of @accelerator account
• Steemitbloggers: #Steemitbloggers is a community supporting bloggers with authentic and awesome content!
  To join check out the discord channel https://discordapp.com/invite/gRypnga

---

Thanks again!

@mcfarhat

---

Posted on Utopian.io - Rewarding Open Source Contributors

---