Part of the beauty in using WordPress to create your branded website is the limitless customization. You have the ability to pick your own themes, vibe, fonts (more on that later), express yourself and personify your brand to your heart’s content.
Every once in a while, though, even your Dream Theme slips up. Your Dream Theme is, as I’m sure you’ve experienced, that WordPress theme that is so beautiful and so perfect, it’s exactly what you’re looking for. (Do you see why Dream Theme demands italics now?) You’re lusting hard over your theme, and how perfectly it mixes with all of your ideas until… Oh no. There’s a problem. It might be a font, it might be a page, it might be your sidebar falling to the laws of internet gravity (you know, when it randomly decides to hang out below all your content? You know what I’m talking about).
Dream Theme Fixes to the rescue.
Today, we’re talking about wordpress pages and their magic powers. Namely: how to whip them into submission.
Many people don’t know about WordPress Page Templates. Some Dream Themes come with them, but the vast majority of WordPress themes (especially free WordPress themes) have only one style of page for you to play with. In most cases, it’s totally fine! But when you have an idea for a fantastic page with amazing info, and this beautiful image… but, but – it’s not big enough! The damn sidebar is in the way, and I hate it when the title shows like that…
Shed no tears, my child. Allow me to help you create the most badass page template ever.
Wait wait…! You may be sitting there, excited to learn something awesome, but have a small question:
What the hell is a WordPress Page Template?
Oh. Right. That would be important, wouldn’t it? A Page Template is a file that allows you to change the way your pages look in your WordPress theme! That’s right, you’ll officially be a Coder after this tutorial. By making a Page Template, you can totally customize the look and feel of your pages, making your site into exactly what you want by tweaking just a few lines of code!
How To Create Page Templates in WordPress
1. First, let’s find your theme’s current page template.
You can grab it from the folder you received when you downloaded your theme, or you can grab it off your website by downloading it through your FTP program. Either way, it’s bound to be in this area: wp-content/themes/[your theme!]/page.php
So, open that sucker up in a web-editing program like Frontpage or Dreamweaver – even Notepad or TextEdit will work.
Important: As soon as you open that file – before you even touch a key! – Save As a new file – I suggest “Page – Bitchin.php,” “Wicked Page.php” or something similar.
After you’ve “Save As”d your new page, at the very top of your new template page, add this bit:
<?php
/*
Template Name: Wacked
*/
?>
Of course, you can call it whatever you want. This is how WordPress knows what to call this file, and where to put it. I named mine “Wacked” because I fully plan to wack the sidebar. That pesky thing is always in the way of my beautiful, wide content.
Now, to make your life easier, upload that file to your theme folder (where you found page.php). Once it’s up, you’ll be able to go to the Theme Editor (under “Appearance” in the WordPress Dashboard) and see your new page! You can edit directly from there.
2. Next, figure out what you want!
Be high-maintenance and decide exactly what you’re going for. Here are some ideas:
- Do you want a wider page, without a sidebar?
- Do you want to get rid of the title at the top of the page?
- Do you want to add a different sidebar? (Ooh, you be fancy! If that’s the case, you might want to contact me directly for specific help!)
- Do you want to add an image before the content?
Well, have a looksy at this sample page template, and identify the area you want to change.
Click to embiggen!
Now that you’ve picked your poison, let’s get you squared away!
A. You want to get rid of the title on your new page template.
This is absolutely the easiest task. See where it says:
<?php the_title(); ?>
…in your new page template? Yeah, that – delete it. That’s right. Just delete it. That will stop the page from “calling” (or “displaying”) your page title!
B. Get rid of that sidebar! This is super common. Sometimes, your pages don’t need a sidebar. About pages, Contact pages, etc… They don’t need to see who recently commented on your post about your favorite puppies! Here’s how to remove your sidebar (difficulty: average to moderate):
Step One: Literally remove the sidebar. Go to your page template, and seek out this bit of code:
<?php get_sidebar(); ?>
That’s (obviously?) the piece of code that calls the sidebar data, so it shows up on your pages. Getting rid of it means that your page won’t bother looking for that sidebar data, leaving you with wiiide open spaaacess…
…But we’re not done! That action will get rid of your sidebar, but your poor content is still all smushed over, leaving a sidebar-sized gap on the side of your page! Now we need to get hardcore, and create a no-sidebar-friendly CSS rule that will give you all the space your little heart desires.
You’ll need to figure out which “tag” (or div tag) in your template tells your content how wide it can be. This tag varies from theme to theme – sometimes it’s “content,” sometimes it’s “entry content” (that’s what mine is!)… It can be anything! You’ll usually find the tag right above this VERY important code:
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
(That’s the code that calls your page content. It says, “Hey, page!! Come here and set your stuff down here.”) The div tag that comes before it might look like this:
<div id="entry_content">
(That’s the code that tells the above code what to do. It’s like the spouse or partner that says. “Okay, you can put your stuff here, Page, but you can only have this much room, and you have to stay this far away from the sidebar and the header, and you have to make your text look like this. You can stay here, but you have to follow my rules!”)
Okay, enough personifying code, back to the important stuff. The div tag (for my website, could be different for yours!) is “entry_content” – remember that, it’s very important!
Now head to your Theme Editor (under “Appearance” in WordPress) and check out your stylesheet (usually style.css). Take that div tag we just found and look for it in the stylesheet. It will probably look a little like this:
#entry_content {
width: 480px;
margin: 0 2.5em 0 5.5em;
float: left;
display: inline;
}
#entry_content h3 {
font-size: 24pt;
line-height: 60pt;
color: #333333;
margin-top:-20px;
}
#entry_content h1 {
padding-top: 20px;
}
Look at all those rules. What an uptight tag! Anyway, see that “width” information? That’s what tells your page how wide it gets to be. We want to copy that and make our own rules about width. Highlight and copy everything that contains “entry_content” (or whatever your div tag is) and paste it right below! Now, add a “2″ or something extra (numbers are easiest) to differentiate the two. It should now look like this:
#entry_content2 {
width: 480px;
margin: 0 2.5em 0 5.5em;
float: left;
display: inline;
}
You’ve created a new div tag! Now we can change the width to what we want, and save the file. The width I have to work with is 800px (that’s the full width of my content area on my website!), so my new div tag CSS looks like this:
#entry_content2 {
width: 800px;
margin: 0 2.5em 0 5.5em;
float: left;
display: inline;
}
#entry_content2 h3 {
font-size: 24pt;
line-height: 60pt;
color: #333333;
margin-top:-20px;
}
#entry_content2 h1 {
padding-top: 20px;
}
All I did was add a little “2″ to each #entry_content. Okay, remember that page template? Remember the CSS you copied and pasted? Let’s go back there! We want to replace the div tag we found in there with our new one, so we can apply our new rules to our fancy, wider page. Find your div tag and enter in the new id that you just created (mine was “entry_content2″) so that your code reflects your new creation. Mine looks like this:
<div id="entry_content2">
Now, when the code looks to the stylesheet for the rules of the page, it will know that it can be beautiful and wide now! Save everything and look at the beauty you’ve created! Since we still have the original “entry_content” div tags, too, we’re not messing up any other page formats with our new code. Voila!
Now, Make It Rain
…Well, put your new page template into action, anyway! Either create a new page, or get into one of your existing pages that you want to use with your new page template. On the right-hand side, just below the “Publish” widget, you should see a drop menu with “Template” above it… Aw, here, just look at this image:
Take a peek at the options, and sigh with relief as you see your shiny, new page template! Select, save, and savor your magnificent hard work.
Want to see how mine turned out?
This is an About page with my default page template.
This is the same page with my shiny, new, Wacked page template!
Is there something you’d like to see a tutorial on? Does WordPress befuddle and confuse you at times? Shoot me an e-mail and let me help you!
