WordPress Custom Pages and How to Make One

iulian Web Design March 18, 2019 | 0

By the end of this 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 by 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?

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 new file on your computer Desktop 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.

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(); ?>

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’);

<?php

while (have_posts()) : the_post();

the_content();

endwhile;

</div>

<?php get_footer(); ?>

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):

<label>

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

</label>

</form>

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(); ?>

<?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>

<?php get_sidebar(); ?>

</div>

<?php get_footer(); ?>

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’);

<?php

while (have_posts()) : the_post();

the_content();

endwhile;

</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 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.

WordPress Custom Pages and How to Make One