WordPress Basics - Creating Custom Pages

WordPress is based on the use of templates for specific purposes. There are templates for different types of situations, like a blog posting, a regular page, a 404 error or to display blog postings for a certain category. The default templates are “single.php”, “page.php”, “search.php”, “author.php”, “404.php”, “category.php”, “archive.php” and “index.php”. There is a hierarchy to all these template pages which follow an order depending on what the visitor wants to see.
Whenever you are in the WordPress admin and you’re creating or editing a page or blog post, you will see what template is currently being used:

The “Default” will either use the “single.php” template page for posts or will use “page.php” for pages (WordPress 3.0+). You can add your own template relatively easy, below are the steps to creating a custom template.

1. Create a template file
2. Customize your template file
3. Apply your template to the desired page

Creating a template file

To create a template file you will need to first create a php file in your themes root directory:
wp-content/themes/mytheme/
At the very top of the php file you will need to name your template page. For example, if I wanted my “services” page to have a different layout I would write the following at the top of my template page:
<?php
/*
Template Name: Services
/*
?>
Next, save the file and name it something that is easy to associate with, like “services-template.php”. The next step is customizing the layout of the page.

Customizing your template file

To customize your template file you will first need to, at least, know what the purpose will be. Will it be to show dynamic content (like the a blog posting) or static content like most pages are used to display.
You can look at the other template pages in your theme directory to get some ideas (page.php or single.php).
The default page templates will start with:
<?php get_header()?>
This will appear right after the template name at the very top. You can either use this code snippet to keep the same header as the other template files or create your own header. If you will only wish to change your header slightly from the other pages, just copy the header contents (from header.php) and alter what you wish.
For the rest of the page you can either use create your own static content (using XHTML and CSS) or use a loop to display content added through the WordPress admin.
To display content added through the WordPress admin, simple copy the loop section from the default page (page.php). See below (using the default TwentyTen theme):

<div id=”container”>

<div id=”content”>

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>
<?php if ( is_front_page() ) { ?>
<h2 class=”entry-title”><?php the_title(); ?></h2>
<?php } else { ?>
<h1 class=”entry-title”><?php the_title(); ?></h1>
<?php } ?>

<div class=”entry-content”>
<?php the_content(); ?>
<?php wp_link_pages( array( ‘before’ => ‘<div>’ . __( ‘Pages:’, ‘twentyten’ ), ‘after’ => ‘</div>’ ) ); ?>
<?php edit_post_link( __( ‘Edit’, ‘twentyten’ ), ‘<span class=”edit-link”>’, ‘</span>’ ); ?>
</div><!– .entry-content –>
</div><!– #post-## –>
<?php comments_template( ”, true ); ?>
<?php endwhile; ?>

</div><!– #content –>

</div><!– #container –>

You can comment out any areas that you don’t want to display, like the comments section, or you can simply remove sections that don’t apply to your template page. For example, if your custom page will never be used for the home page you won’t need the following:

<?php if ( is_front_page() ) { ?>
<h2 class=”entry-title”><?php the_title(); ?></h2>
<?php } else { ?>

After you have completed the page customization of the main body, you can determine if the page will have the same sidebar or footer as your other pages. By default, the bottom of every blog post or page ends with:

<?php get_sidebar(); ?>
<?php get_footer(); ?>

You may not need a sidebar for this particular “Services” page but wish to keep the footer the same, you can just comment out the sidebar area (you may wish to add it later).

<?php // get_sidebar(); ?>
<?php get_footer(); ?>

You can always comment out both the default sidebar and footer snippets and create custom ones.
That’s basically it! You’ve created a custom template page for your WordPress theme.  The next step is to actually apply it to the page(s) of your choice.

Apply your template to the desired page

This template name “Services” will now appear in the drop down selection under the “Page Attributes”. (after uploading the template page to your online server).

Simply apply the template and you’re set.

Responsive Doctype and Header Code

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

  <!--[if lt IE 9]>
    <script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>
<body>

Content 

</body> 

CSS3 Opacity Declarations

/* opacity */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 */
    filter: alpha(opacity=0); /* IE 5-7 */
    -khtml-opacity: 0; /* Safari 1.x */
    -moz-opacity: 0; /* Netscape */
    opacity: 0; /* Good browsers */

The 4 Types of CSS Layouts: Which One is Right for You?

One of the first, and often overlooked, elements to decide upon when building a CSS-based website is the type of CSS layout you plan on using. Wait… There is more than one type of CSS layout? Yep, in fact there are 4 primary CSS layout types. Each CSS layout is based on a different methodology and serves a different purpose. As a whole, the different types of CSS layouts provide added flexibility when designing websites.
Let’s take a look at each CSS layout, define the advantages and disadvantages of each, and review various examples so you can determine which type of CSS layout is best for you.

1. Fixed Width

Fixed CSS layouts are simply layouts that have a definite width specified in pixels. Furthermore, the size of the layout does not resize based on the size of the browser or the site visitor’s browser text settings.
Advantages

• The layout or column is controlled (stays the same) which can be helpful to ensure your content remains easily read even when the browser window is shrunk or expanded.
• In some cases specific designs can be more easily achieved without having to make accommodations for a layout that re-sizes.

Disadvantages

• Oftentimes the layout size must be kept to a minimum to accommodate for smaller or low resolution computer screens. If you choose a large fixed width CSS layout visitors may have to scroll horizontally to read content.
• With a set width you may not be taking advantage of the real estate larger or higher resolution screens provide. Additionally, your site may look tiny to visitors with these types of screens.
• The content area may become awkward looking and hard to read if the visitor has their browser text size set larger than “normal” as this type of layout cannot easily accommodate for this scenario.

Example: WebAssist.com

2. Liquid or Fluid

A liquid CSS layout, otherwise know as a fluid layout, is one where the layout width is specified as a percentage of the site visitor’s browser width. Therefore, the design will adapt or change if the site visitor adjusts the size of their browser to be narrower or wider. The width will not change based on the site visitor’s text settings.
Advantages

• Will help ensure the width of your site is proportionate to the size of your site visitor’s browser – universal as it will adapt to all screen sizes.
• Allows your site to maximize the amount of real estate available within each site visitor’s browser.
• You can set a max width CSS property to ensure your layout does not grow too large.

Disadvantages

• If a layout is stretched the content areas will stretch and cause paragraphs of text to lengthen to one line making it less readable.
• Some older browsers such as IE 6 do not support a max width CSS property so in some larger screens your site’s width may grow too large making content hard to read.

Example: Google News

3. Elastic

With an elastic CSS layout the layout width is specified as a unit of measurement (ems) relative to the size of the text set by the site visitor in their browser. The layout will adapt if the site visitor changes their text settings, however the layout will not change based on the size of the browser window.
Advantages

• Site layout will grow proportionately with size of the text site visitors have set in their browsers. This can help ensure your content stays readable.

Disadvantages

• If a browser’s text display settings are set too large your site may become unusable.

Example: Whitley Journalism
Note: To test the elasticity of this example you will need to set your browser text settings to a larger font size.

4. Hybrid

As you may have guessed a hybrid layout is any combination of CSS layout types mentioned above. For example, in a two-column hybrid, the right sidebar layout can have a liquid main column that scales to the size of the browser, and an elastic column on the right that scales to the size of the site visitor’s text settings.
Advantages

• You can combine multiple benefits of the various layout types mentioned above.

Disadvantages

• This type of layout can become difficult to implement as there are more variables.

Example: Amazon.com
Note: As you stretch the Amazon.com home page the right and left columns will remain fixed, while the center column is liquid and stretches as you increase the size of your browser.

As you can see each type of layout will provide you with various advantages and disadvantages. Hopefully through the information provided in this article you can better select the layout type that will fit your next project. Looking to more easily design CSS layouts within Dreamweaver? Check out Eric Meyer’s CSS Sculptor our which will help you design each of the above layout types without CSS knowledge or experience.