Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Coding a basic template

From: Dreamweaver and WordPress: Building Sites

Video: Coding a basic template

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.

Coding a basic template

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.

Show transcript

This video is part of

Image for Dreamweaver and WordPress: Building Sites
Dreamweaver and WordPress: Building Sites

21 video lessons · 16608 viewers

Joseph Lowery
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver and WordPress: Building Sites.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.