WordPress Custom Page Template

WordPress Custom Page Template

 

We’ll show you how to create a custom page template.

By the end of the article, you’ll know what a custom page means, how to create one and where to find it in your WordPress, and also how to edit a custom page you added in WordPress.

 

What is a custom page template?

 

By default, WordPress allows you to create posts and pages. The layout and appearance of those posts and pages are controlled due to a template file named page.php.

However, you might not want all pages and posts look the same. This is when you need a custom page template.

 

Do you know where to find page templates in WordPress?

Login to your WordPress Admin Dashboard.

In the left-hand menu, go to Pages/Posts.

 

 

Choose a page and click Quick Edit.

 

 

In the Template category, click on the drop-down menu and you’ll have the list of templates provided by WordPress:

  • Default Template
  • Boxed Page with Navigation Only
  • Front Page Template
  • Landing Page
  • Page with Left Sidebar
  • Page with Navigation Only
  • Page with Right Sidebar, etc.

 

How to Create a WordPress Custom Page Template?

 

You need to create a file you’ll open with a text editor like Notepad (right-click on the file). In the blank file, you need to add the following line of code:

 

<?php /* Template Name: CustomPageT1 */ ?>

 

This will be a template file corresponding to your custom page.

Give the file any name you want for the new page template and pay attention to save it with the .php extension.

Next, connect to your website using an FTP client. Go to your theme or a child theme folder.

You will find it in /wp-content/themes/ directory.

 

Upload your template file to your theme.

Now, you can login again to your WordPress Admin Dashboard. In the left-hand menu, go to Pages/Posts. Click on Quick Edit.

 

 

Next to the Template category, click on the drop-down menu and search for the page template you’ve just uploaded to the theme. Click on it and select that page template.

When visiting this page, you’ll see it is blank, with no content on it.

 

How to edit a custom page template in WordPress?

 

You can add HTML or PHP code to the newly uploaded file.

The simplest way to edit the new custom page is to start from the code of an already existing page template.

Open the FTP client and go to the theme folder -> find the page.php file. Download this file to your computer and open it with a text editor like Notepad (right-click to open it). Copy the content of the already existing page template, leaving apart the header (the part that is commented):

 

 

Next, paste the copied code to your new custom page template file you saved on your computer. Then, upload it again to the theme folder using FTP.

This means you’ve duplicated an existing page template.

 

What code to add for editing different Custom Pages in WordPress?

 

Please note that, whereas creating custom pages is pretty simple, editing those pages might require some technical knowledge.

 

  1. Code lines for Custom Archives Page

Code for adding a list of pages

<?php wp_list_pages( ‘title_li=’ ); ?>

Code for adding a list of authors

<?php wp_list_authors( ‘exclude_admin=0&optioncount=1’ ); ?>

Code for adding recent posts

<?php wp_get_archives(‘type=postbypost&limit=10’); ?>

Code for adding a tag cloud

<p><strong>Tags Cloud:</strong></p>

<?php wp_tag_cloud(); ?>

 

  1. Code for Custom Front Page

Example of code for a custom front page template (it has code for the header, the content of the page, and the footer):

 

<?php

/*

* Template Name: Front Page Template

*/

mesmerize_get_header(‘homepage’);

?>

 

<div class=”page-content”>

<div class=”<?php mesmerize_page_content_wrapper_class(); ?>”>

<?php

while (have_posts()) : the_post();

the_content();

endwhile;

?>

</div>

</div>

 

<?php get_footer(); ?>

 

  1. Code for Custom Search Form

Example of code for a custom search form page (you have values for the method of retrieving data (get) and values for the input field):

 

<form role=”search” method=”get” class=”search-form” action=”<?php echo esc_url(home_url(‘/’)); ?>”>

<label>

<span class=”screen-reader-text”><?php _ex(‘Search for:’, ‘label’, ‘mesmerize’); ?></span>

<input type=”search” class=”search-field” placeholder=”<?php esc_attr_e(‘Search &hellip;’, ‘mesmerize’); ?>” value=”<?php echo get_search_query(); ?>” name=”s”/>

</label>

</form>

 

  1. Code for Custom Post Page

Example of code for a custom post page (you have conditional rules for display of the posts):

 

<?php mesmerize_get_header(); ?>

<div class=”content post-page”>

<div class=”gridContainer”>

<div class=”row”>

<div class=”col-xs-12 <?php mesmerize_posts_wrapper_class(); ?>”>

<div class=”post-item”>

<?php

if ( have_posts() ):

while ( have_posts() ):

the_post();

get_template_part( ‘template-parts/content’, ‘single’ );

endwhile;

else :

get_template_part( ‘template-parts/content’, ‘none’ );

endif;

?>

</div>

</div>

<?php get_sidebar(); ?>

</div>

</div>

 

</div>

<?php get_footer(); ?>

 

  1. Code for landing page

Example of code for landing page (it is pretty much the same as for the front-page, except that it has no code for the header):

 

<?php

/*

Template Name: Landing Page

*/

 

add_filter(‘mesmerize_footer’, function ($footer) {

$footerTemplate = ’empty’;

 

return $footerTemplate;

}, 20, 1);

add_filter(‘mesmerize_full_width_page’, ‘__return_true’);

 

mesmerize_get_header(’empty’);

?>

<div class=”landing page-content <?php mesmerize_page_content_class(); ?>”>

<div class=”<?php mesmerize_page_content_wrapper_class(); ?>”>

<?php

while (have_posts()) : the_post();

the_content();

endwhile;

?>

</div>

</div>

<?php

 

 

get_footer();

?>

 

As you can see, editing custom pages in WordPress requires some basic knowledge of HTML, CSS and PHP. It’s key to understanding what lines of code are needed to give the page the appearance you want.

 

However, there’s a simpler solution…

 

With a site builder like Colibri, all the code “stands” behind, and doesn’t block a non-technical site creator. Every addition or change to a custom page is visually reflected in the Customizer. Thus, the site creator has more control over the design. The pretty custom page will be ready in the blink of an eye, with no bothering for the code behind the page.

 

We hope this article has made it clear what a custom page is, and why you might need one. Coders and non-coders, all can now be able to create custom pages as they wish. And proud of editing WordPress custom pages.

Leave a Reply

Your email address will not be published. Required fields are marked *