Create custom page in wordpress

Posted By :Shubham Sachdeva |19th May 2021

 

How to create a custom page in WordPress

 

Step1: Login to WordPress and select the pages from the sidebar

 

image1

 

 

 

 

 

 

 

 

 

 

 

 

 

Step2: Click on Add new at the top of the page to create a new page; this will open a screen like below and enter the following:

a. Enter the page title as this will be your URL.

b. Enter the content you would like to Enter.

 

image2

 

 

 

 

 

 

 

 

 

 

 

 

 

Step3: Please note the page id in the URL as we will use it later to create a custom page; in my case, it is ‘16251'. This will be different for different pages.

 

image3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Step4: Now scroll down a bit and look for the Page attribute in the right sidebar and within the sidebar, look for Template.

 

image4

 

 

 

 

 

 

 

 

 

 

 

 

 

Note: If you do not have a template like the above in the page attribute, Don't worry; I will help you create a template in the sidebar.

 

Step5: Create a file with the name ‘Chatbot.php' (Note: you can give any name) and paste the following code and save it in the folder where all the other files are placed in the theme folder using.

 

// used for linking the php code to wordpress
<?php
/**
Template Name: Chatbot Php
*/
?>

// Update the page number which you have noted above in my case it is 16251
<?php
if(is_page(16251)) {
get_header('page'); // You can also change the header for the this page, 
If you want to know how to create a custom header and sidebar for a page please check my blog on
 “How to create custom header and sidebar for different page and post”
}
else {
get_header(); // You can use header which you are normally using for your site
}
wp_head();
?>

Note the below can be changed or edited as per your theme and design,
// Get sidebar position in my case it is right.
<?php
$ht_page_sidebar = null;
$ht_page_sidebar = get_post_meta( get_the_ID(), 'st_post_sidebar', true );
if ($ht_page_sidebar == '') {
$ht_page_sidebar = 'sidebar-right';
}
?>

// Page Header
<!-- #primary -->
<div id="primary" class="<?php echo esc_attr($ht_page_sidebar); ?> clearfix">
<!-- .ht-container -->
<div class="ht-container">
<!-- #content -->
<section id="content" role="main">
<!-- #page-header -->
<header id="page-header" class="clearfix">
<h1 class="page-title"><?php the_title(); ?></h1> <!-- This will output the title of the page -->
//Displays the featured images
<?php
if ( has_post_thumbnail() && ! post_password_required() ) : ?>
<div class="entry-thumbnail">
<?php the_post_thumbnail(); ?> // output featured images in our theme
</div>
<?php endif; ?>
</header>
<!-- /#page-header -->

<!-- Loop checking check if the loop has returned any posts -->
<?php while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <!-- set up the content so we can use template tags like the_title() -->
<div class="entry-content">
<?php
the_content(); // output the post content.
wp_link_pages( array( 'before' => '<div class="page-links"><strong>' . __( 'Pages:', 'knowhow' ) .'</strong>', 'after' => '</div>' ) );
?>
</div>

<?php if (is_page() && has_tag()) { ?> <!-- Checking if the post have tags -->
<div class="tags">
<?php
the_tags( '<strong> '. __( 'Tagged:', 'knowhow' ) .' </strong>', '', ''); ?> <!-- Outputs the tags, here knowhow is theme name -->
</div>
<?php } ?>
</article>

<?php // If comments are open or we have at least one comment, load up the comment template
if ( comments_open() || '0' != get_comments_number() )
comments_template( '', true );
endwhile; // end of the loop.
?>

</section>
<!-- #content -->
<!-- Display the sidebar -->
<?php
if ($ht_page_sidebar != 'sidebar-off') {
?>
<?php get_sidebar(); ?> <!-- Action hook which will display the sidebar -->
<?php } ?>

</div>
<!-- .ht-container -->
</div>
<!-- #primary -->

<?php get_footer(); ?> <!-- Action hook which will display the footer -->

 

 

Note: Refresh the WordPress page so that new code can start showing up:

 

Step6. After successfully saving the code in the theme folder, ‘Chatbot Php' or the name entered above in phpfile will start showing up WordPress sidebar in the template dropdown and select it.

 

image5

 

 

 

 

 

 

 

 

 

 

 

 

Step7. Select update in the publish section of the right sidebar.

 

image6

 

 

Step8: Open up the permalink in the new tab, and a new custom page will be displayed.

 

image7

 

 

In the end, I would like to conclude if all the steps are followed, then you will easily be able to create a custom page in WordPress in about 2 mins. Also, you can use this code to create index.php while formatting a custom theme.

Moreover, If you follow step 2 & 3, you can easily identify the post_id and page_id in a straightforward way.

 

 


About Author

Shubham Sachdeva

Shubham has strong knowledge of PHP and wordpress framework. He has very good understanding of OOPS concepts, MVC and javascript. His approach towards problem solving is commendable moreover he is very competent in coding.

Request For Proposal

[contact-form-7 404 "Not Found"]

Ready to innovate ? Let's get in touch

Chat With Us