Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,987 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
The ability to create custom page templates is one of the key features that makes WordPress suitable for building web sites that are more than just a blog. A basic custom template is almost ridiculously easy to create, and in this video, we'll do just that, as well as customize the content to distinguish the custom page from our default page. Later in this chapter, you'll see how to modify the header, sidebar, and CSS of a custom page template to further set it apart.
But let's start with the core page first. So now I'm going to go to my tpa folder, which is within themes, and open up index.php. We'll use that as my base, starting in Code view. And now I'll move my cursor to the top of the file, click Return, and then enter in a new PHP code block. And then within that PHP code block, enter in a PHP comment in the style of /* */.
Now all I need to add within that comment is a simple name-value pair. The name, actually a name phrase, is the term Template Name, both titlecase-- that's important--followed by a colon, and now the name of our template, which I'm going to call Explorers. Now let me save this as explorers.php. And I mentioned before that I was going to customize the content page a little, so what I'm going to do is remove my query_posts function, which limits the post to 3, and the corresponding wp_reset_query function.
Okay, let me save explorers.php again. Now we're ready to go over to WordPress's Pages section and create a new page based on this template. From the Dashboard go to Pages > Add New. Explorers is the frequent flyers club of TPA. So I'm going to put in a Welcome page here and then just a bit of text: "Welcome to TPA Explorers, where your space miles go further." Now we want to change the template from the Default Template to Explorers, which was just dynamically added by WordPress, and click Publish.
Now let's take a look at that page by Viewing Page, and there's our page, in pretty much the standard layout. You can see, in very simple text, the single entry here. So that's basically identical to the home page right now. Let's take a little time to change the contents section, starting with the title, which we no longer need to make a link. So back to Dreamweaver. On my Explorers page, I'm going to remove the anchor tag that surrounds title, both the opening and closing.
Next, let's make sure that we're showing the content instead of just an excerpt, so I'll change the excerpt to the content. Now because this content could spread over multiple pages, let's add in the wp_link_pages function to add navigation for longer paginated posts. So right after the div with the class of entry and before the div with the class of postmetadata, I'm going to enter another PHP code block, and within that code block, put in a function wp_link_pages with an open and close paren, followed by a semicolon.
Now this function takes an array of arguments, so we'll enter in array and then open and close paren. And the arguments within that ren, there are two, the first one sets up the text that will display before the pagination elements are shown. So that's entered as the word before, in single quotes, followed by equals, and then a greater than sign, and then again in single quotes, the word Pages.
I'll put a colon there and a space. So that will be the static text that will appear before the paginated elements. Now after the closing single quote, put a comma for the second argument, and this argument determines the form of those paginated elements. Will it be the word "next" or will it be a series of numbers, like 1, 2, 3 for pages 1, 2, and 3? So again, single quotes with the key phrase next_or_number and then a equals sign and greater than and opening single quote, the word Number, close the single quote, and we're done.
So just to refresh, the function name is wp_link_pages. It takes an array of arguments. There are two arguments: before and next_or_number. Now finally, since most of the pages in this section are going to be policy-oriented about a specific service for our frequent space fliers, we won't need the post meta information: the tags, categories, and so on. So let's remove the div with postmetadata in it.
I'll place my cursor within the div and then click the Select Parent Tag from the Coding toolbar and then press Delete to remove it entirely. Let me clean up that little extra line. Now there's one more thing I need to do before we can go preview the file, and that is to go down to the get_ sidebar function and add in the name of the sidebar that I want to insert here. So I'll put in a single quote, and when I do that, Dreamweaver CS5.5 automatically puts in two single quotes for you. And then type in the ID of the sidebar, which is explorers.
Okay, I'm ready to save my page with a Ctrl+S or a Command+S, and now let's preview it in the browser. So I have the same page up. I'll just hit Refresh, and you can see other information is now gone, all the postmetadata. You can also tell it's not an excerpt because there is no Read More link at the end. Of course, you can do tons more customization, but the foundation for the custom page template has now been created and you're ready to further customize the page with a unique header.
- Understanding development environment requirements
- Working with existing WordPress content
- Handling standard pages
- Managing full posts
- Coding a basic template
- Adding a custom sidebar
- Working with WordPress functions
- Inserting PHP code in posts
- Including a recordset
- Outputting data
- Linking to dynamic pages