How to Create a WordPress Template Part2


In the previous post, I pointed out on how to create your own wordpress template. As a review, all you have to do is create a new php file, lets say page2.php. Open your page.php and copy all of the codes to page2.php (your new php file) and at the top most code just add this:

Now lets move on further. Let’s say you want a new page with a different header image and different navigation links.

Again, create a new php file, let’s say header2.php. Then open your default header.php and copy all the codes to your header2.php (new php file). Now, find the header section in the code. It’s usually:


(take note, some themes use “id” instead of class)

Rename that to header2. Now we have to declare a new CSS for the new header without replacing your theme’s default. Open your style.css, and find #header(# for id) or .header (dot for class). Just under the original .header class, add a duplicate code (everything within curly brackets) for .header just renaming it to .header2. It should look something like:

The link inside url() is the direct link to the new header image. Also if the image has a different width/height be sure to declare it in the css.

Now you should have two background styles for your header, one is the default .header and another is for new header which is .header2.

Also in the header2.php, you will find the navigation links. It usually looks like:

Just replace it with your own links:

(replace the url1/url2 with the correct links)

Now, let’s go back to page2.php. Find the code:

This code is a wordpress default, it calls header.php. Since we want to have a new header, we would have to call header2.php instead. So replace the code with:

A review: First, create two new php files, header2.php and page2.php. These are duplicated files from header.php and page.php, respectively. Edit page2.php and “call” header2.php instead of default header.php.

That’s it. Save your files and upload them to your server. Take note that all files should be in the same directory where your style.css is.

If you have any questions regarding this post, just leave a comment below.

Advertisements

About freelance webmasters

We a re a group of webmasters designing professional facebook pages, twitter, youtube and wordpress sites at affordable prices. View all posts by freelance webmasters

18 responses to “How to Create a WordPress Template Part2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: