Wordpres Theme Development – Lesson 3

More about new page.php

In our previous lesson, we have already learned that how and why we can create a page.php

Now if we have to make some changes in a certain page then we have many ways to do that.

For an example: If we want to add a subtext just (“Thanks for viewing our work”) just next to our heading.

template creation in WordPress

Kindly get a notice that only sample page will show this extra subheading part and rest of other pages will remain same.
Now the most simple way to perform this task i.e to use a conditional statement.
We have used the following piece of code into our header.php file



Explanation: In the above-used code we used the function is_page() and in this function, we can pass either a slug or page id.

Wordpress Theme Development

The highlighted text is a slug in the above image.

Wordpress Theme Development

In the above image, the highlighted text in the URL bar is the page id.

Now if we want to make more changes in our sample-page entirely then we cannot depend on conditional statements because it will make our page lengthy and messy.

WordPress gives us the area to make a custom page as you want.  In this lesson, we will create this custom page for our sample-page.

For this, we have created a new PHP page like this.

Page-sample-page.php

Note: While creating this new PHP page we have to make sure that the name declaration will always start with “page-” then you can append either a slug name of the page or page id.

After creating the page “page-sample-page.php” successfully I paste everything from our page.php and now if you will do any changes that will be reflected on sample-page only.

Explanation: In the above code we added some style as DIV classes.

Now add the following code to your style.css

Now here we have the changes now,

Wordpress Theme Development

A Common layout for multiple pages

You can also create a single custom layout which you can apply for your multiple pages with your WP admin area.

For this, I have created a new page “special-template.php” and pasted everything which we have in page.php and made some changes accordingly.

In our case we did this:

Explanation: In the above code, we did the following:

Added a comment for template name, so that WordPress can identify that template is also be exist.

We arrange the data into the tabular format with the self-created classes (main column, notification-column)

Added some dummy text in notification column.

Now added the following lines into the style.css

Finally, we have done with the coding part. Now take a look how can our new template effect for our pages.

For ease of our understanding we created three more pages as follow:

  1. Make a Payment
  2. Term of Use
  3. Privacy Policy

 

We also some dummy text in all these newly created three pages.

Also now we have an option available in WP admin area, while creation of new page i.e template in Page Layout option (Right side in page updating area of WordPress)

Wordpress Theme Development

Now we have to select this option and save/update the changes.

Output:

Now we have done with this lesson. If this lesson was appropriate for you then kindly share this article.