Create Custom Page In Wordpress

Over time, custom page templates for WordPress have grown in popularity. However, while most WordPress themes come with many page templates pre-installed, there are still many themes that don’t.

In WordPress, a custom page allows you to use a different layout from your standard pages. Custom page layouts for sales pages, webinar pages, landing pages, and others are offered by WordPress sites.

One of the most significant tools for website development is page templates. They let us change the look and feel of a page, as well as its functionality. For example, you can add additional sidebars, insert widget areas above or below the page text, have sections for unique post types like portfolios within your pages, and more with a WordPress custom page template. In a nutshell, you may start with a blank canvas template and build your page from scratch.

But, several WordPress themes prevent users from changing the look and functionality of a separate page in the hierarchy. Instead, users can include custom requirements such as a right/left sidebar on some page, additional call-to-action features, or a customized header for a specific landing page using a WordPress custom page template.

Let’s take a closer look at how the WordPress custom page template displays various types of content. We’ll also walk you through the process of how to create a custom page in WordPress.

Understanding WordPress Custom Page Templates

WordPress allows you to create posts and pages by default.

The appearance of your pages is controlled by a template file called page.php in your WordPress theme.

This template file has an impact on all single pages created in WordPress.In WordPress, the hierarchy for single pages is as follows:

  • custom template file
  • page-{slug}.php
  • page-{id}.php
  • page.php
  • singular.php
  • index.php

Custom templates are the only files that don’t have to follow a specific name guideline to be accepted as template files, as you can see above.

However, as you may be aware, not all sites are created similarly. For example, you might want to design a landing page that differs from the rest of your website. A custom WordPress page template can be suitable for a variety of purposes. Here are a few options:

  • Display the most recent posts in each category.
  • You can embed Google Maps or any script.
  • All authors are listed in alphabetical order.
  • Images that have recently been uploaded
  • For the portfolio, it created a custom design page.
  • Page of Contact

Creating a custom page in WordPress used to involve hand-coding your HTML, CSS, and PHP template. We will cover that method, although it is not recommended for beginners.

Instead, we recommend creating your custom page with SeedProd or another page builder plugin.

  • Creating a Custom Page in WordPress with SeedProd (Recommended)
  • Creating a Custom Page in WordPress with Beaver Builder
  • Creating a Custom Page Template in WordPress Manually

Custom Page Template- What is it?

Page templates, in general, are used to show various types of dynamic content on your website’s pages. But, when it comes to displaying that content on a single page. Meaning, if a custom page template is selected on a given page, WordPress will use it instead of any existing page template file in your theme.

A custom page template comprises a header that registers the template and the code that constructs the page’s content, which is displayed when the template is selected. The template header is a comment that tells you what template you’re using. Aside from that, it can contain other information such as the theme name or description.

The comment begins with the label Template Name: which is followed by the template’s name. Furthermore, depending on the structure of the remaining code, the custom template should begin with the opening PHP tag<?PHP and the closing PHP tag could appear soon after the comment, later in the file, or not at all.

In WordPress, how can I edit a custom page template?

You can edit the newly uploaded file with HTML or PHP code. Starting with the code of an existing page template is the simplest way to edit the new custom page. First, go to the theme folder in your FTP client and look for the page.php file.

To open this file, save it to your computer and open it with a text editor such as Notepad. Next, copy the following content from the existing page template, excluding the header. After that, insert the copied code into your newly created custom page template file. Then, using FTP, re-upload it to the theme folder.

It indicates that you’ve copied an existing page template.

How can I create a custom page in WordPress?

Create a new file on your computer’s desktop using a text editor such as Notepad (right-click on the file). Next, you must add the following line of code to the blank file:

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

This will be the template file for your customized page. Give the new page template any name you like, but make sure you save it with the.php extension.

Image Showing How To Create Custom Page Templte Using Notepad

Then, using an FTP client, connect to your website. Next, go to the folder containing your theme or a child theme.

It’s under the /wp-content/themes/ directory.

Your template file should be uploaded to your theme.

You can now access your WordPress Admin Dashboard once again. Go to Pages/Posts in the left-hand menu. Click on Quick Edit.

Image Showing How To Create Page Template In Wordpress

Click the drop-down menu next to the Template category and search for the page template you just uploaded to the theme. Then, select that page template by clicking on it. When you visit this page, you will notice that it is blank, with no content.

Create Custom Page in WordPress Using-

SeedProd

Image Showing Seedprod Logo

SeedProd is the best WordPress drag-and-drop page builder. It includes over 100 professionally designed templates to serve as the foundation for your page.

Alternatively, you may use their drag-and-drop builder to create a completely customized WordPress page without writing any code.

SeedProd is designed to be user-friendly, even for absolute beginners. Advanced features, on the other hand, allow you to create visually attractive sites that will interest your visitors and boost conversions.

The SeedProd plugin must first be installed and activated; it is also available in a free edition. The Pro version, on the other hand, comes with several useful features.

You should see the welcome page after activation. Here you must enter your license key and then click the “Verify key” button. Your license key can be found on the SeedProd website in your account area.

Image Showing How To Activate Seedprod Plugin

Then, in your WordPress admin, go to SeedProd » Pages. Simply click the ‘Create New Landing Page’ button to get started.

Image Showing How To Create New Landing Page In Seedprod

After that, you’ll be asked to select a template. You can use the filters to find templates for the specific type of page you’re building. Use the blank template if you prefer to start from the beginning.

Image Showing How To Create New Page Template In Seedprod

We’ll use a template called “Course Sales Page” in this example.

You’ll be asked to name your page and specify the URL. After that, click the ‘Save and Start Editing the Page’ option to save your changes.

Image Showing How To Save The New Page Template In Seedprod

The page builder in SeedProd will now display the template you selected.

Image Showing Custom Template In Page Builder

Simply click on any part of the template to change it. Likewise, it’s simple to edit text right in the page builder. For example, we’re editing the page’s headline.

Image Showing How To Enter The Text In The Custom Page Template

You can adjust the alignment of your text, add links, and more.

The SeedProd page builder also makes it simple to edit photos. Simply select the image you wish to edit and click on it.

We’ve replaced the default image at the top of the page with our own in this example.

Image Showing How To Make Changes In The Custom Page Template

Simply click on the item you want to alter and make the changes you wish. This will bring up the editing window on the page’s left side.

Click the Design tab at the top of the page to add new blocks (elements) to your page. Select any Standard or Advanced block and drag and drop it onto your website.

Image Showing How To Add New Blocks In The Seedprod Custom Page Template

To edit a block, click on it after it has been added. For example, on this page, a list block is included.

Image Showing How To Edit A Block In The Custom Page Template

Don’t be concerned if you make a mistake or change your mind. To undo your actions, simply click the ‘Undo’ button at the bottom of the page.

Image Showing How To Undo A Step In Seedprod

In this section, you’ll also discover the redo button, revision history, layout navigation, mobile preview, and global page settings.

It’s time to examine or publish your customized page after you’re satisfied with it. To publish the page, go to the top of the screen and click the drop-down arrow next to the Save button. Then choose Publish from the drop-down menu.

Image Showing How To Publish The Custom Page Template

A notice will appear informing you that your page has been published. Simply click the ‘See Live Page’ button to see it right away.

Image Showing The Final Confirmation Of Publishing The Page

Go to SeedProd » Pages in your WordPress admin to change your custom page at any time in the future.

In the list of landing pages, you should see your saved page. To change the title, click on it.

Image Showing How To See The Existing Landing Pages In Wordpress

The advantage of SeedProd over any other WordPress page builder is that it will not slow down your site. On the contrary, SeedProd is the fastest page builder. In addition, it allows you to create entirely customized page layouts that are completely independent of your theme design, allowing you to have custom headers, footers, and other elements.

Beaver Builder

Image Showing Beaver Builder

Beaver Builder is a well-known and well-liked drag-and-drop WordPress page builder. It allows you to create customized pages for your website or blog quickly. The full version of Beaver Builder is recommended. Beaver Builder is also available in a free edition with limited capabilities.

The Beaver Builder plugin must first be installed and activated. See our step-by-step guide on installing a WordPress plugin for more information.

The Beaver Builder welcome screen will appear after activation. To enter your license key, simply select the License tab. This information can be found in your Beaver Builder account section.

Don’t forget to store your license key by clicking the ‘Save License Key’ button.

Image Showing How To Activate The Beaver Builder Plugin

To use Beaver Builder, simply build a new page in your WordPress admin by going to Pages » Add New. Then, on the ‘Launch Beaver Builder’ button, click.

Image Showing How To Launch Beaver Builder Plugin

After that, the Beaver Builder editor will appear. To make your page, you’ll need to add rows and modules. Then, simply select the piece you wish to utilize and drag it to your desired location on your page.

Image Showing How To Create A Custom Page Template In Beaver Builder Plugin

You can also use a template to get started. To use a template, go to the Templates tab and select one.

Image Showing How To Create A Custom Page Using Existing Template

Then you can change any part of the template by clicking on it. You can, for example, edit the text, photos, colors, and more.

Here the page’s headline is edited right now. Unfortunately, Beaver Builder’s editing process isn’t as easy as SeedProd’s because you must type the text into a separate popup box.

Image Showing How To Do Editing In Beaver Builder

Click the Done button on the top right when you’ve completed making changes to your page. You’ll be able to save or publish your post after that.

Image Showing How To Save Template In Beaver Builder Plugin

Manually Create Custom Page Template

You can manually create a custom page template in WordPress if you don’t want to use a plugin.

NOTE: It’s quite acceptable to have many plugins installed on your WordPress site.

To begin, open a plain text editor on your computer, such as Notepad. Then, add this line of code to the top of the blank file:

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

Save the file as custompaget1.php once you’ve finished adding the code. This code just informs WordPress that this is a template file named CustomPageT1 and that it should be accepted as such. Your template can be named whatever you choose as long as it makes sense to you.

Save the file under any name you like, as long as it finishes with the.php extension.

You’ll need to use an FTP client to connect to your WordPress hosting account for the following step.

Go to your current theme or child theme folder once you’ve connected. It’s located in the /wp-content/themes/ folder. Then, in your theme, upload your custom page template file.

To create a new page or change an existing one, you must first log into your WordPress admin area.

Scroll down to the ‘Page Attributes’ area on the page editing screen. A Template drop-down menu will appear. You can select the template you just generated by clicking on it.

Image Showing How To Manually Create Custom Page Template

You will see a blank page if you select your new template and visit this page on your site right now. That’s because your template is blank, and WordPress has no idea what to display.

How do I add custom page templates?

When you click the WP Templates link, you’ll be taken to a summary of the plugin’s features. There isn’t any setup. That is to say, no additional configuration is necessary.

You can build a new page by clicking the “Click Here” button from this view. This will simply create a new page for you to work on.

Image Showing How To Add Custom Page Template Using Wp Template

Alternatively, you can go to pages and make a new one from there. You may also customize pre-existing pages by adding custom page templates to them.

To create a new page, go to Pages > Add New.

Image Showing How To Add A New Page

Set up your page the way you want it to be. Create a page with a title, content, and specifics about what you’re doing.

However, you will see a new drop-down box on the right labeled “Page layout.”

Image Showing How To Create Custom Page Template

Select the layout you want by checking the box next to it. This is the layout for the custom page template that will be shown.

Custom templates are only available for pages with this plugin, not for articles. Custom post templates can be added to the pro version of the plugin, though.

What code should I use to edit different Custom Pages in WordPress?

Please keep in mind that while developing custom pages is very simple, editing them may need some technical knowledge.

Code 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 FrontPage

The following is an example of code for a custom front page template (it includes code for the header, content, and 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(); ?>

Code for Custom Search Form

Example of code for a custom search form page (you’ll need values for the data retrieval method (get) and 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>

Code for Custom Post Page

Example of code for a custom post page (with conditional rules for post display):

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

Code for landing page

Example of landing page code (it’s almost identical to the home page except there’s 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’ll notice, editing custom pages in WordPress needs some HTML, CSS, and PHP knowledge. In addition, understanding what lines of code are required to give the page the desired appearance is crucial.

There is, however, a simpler solution.

All of the coding “stands” behind the scenes with a site builder, so a non-technical site designer isn’t limited. In addition, the Customizer visually reflects every addition or change to a custom page. As a result, the site’s author has more design control. The pleasant customized page will be ready in the blink of an eye, with no need to worry about the actual code.

Conclusion

Adding and creating custom page templates in WordPress does not have to be complex. You don’t need to code in PHP; all you need is the correct plugin.

Use this method if your WordPress theme doesn’t offer the custom page template you’re looking for.

We hope that this post has clarified what a custom page is and why you might need one. Both coders and non-coders can now create custom pages as they see fit.

Load More Related Articles
Load More By Susana Taylor
Load More In Wordpress

Leave a Reply

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