User:Lorelle/Customizing The Content

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

Name: Customizing Content - ?

The most important template files in your WordPress site is the content area or "container". The content container holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

The content section of your WordPress site is where your post content is presented. Post content can consist of your writing, links to other sites, articles, information, photographs, artwork, whatever you consider the "content" of your site. The information in the content section is entered in the Administration Panels > Write Post panel.

Let's begin to understand the content area in a WordPress site by examining the roll it plays to hold content on the various page views available with WordPress. Post content is displayed in two different ways, single post view and multi-post view. The single post view features just the post content. Some single post views may or may not include the sidebar or a different header or footer, but those are elements controlled by other template files. The post content area of a single post view is the area in which the post itself sites. It includes the post title,

author, date, post meta data, and the post text and images. The single post view uses the index.php, single.php and page.php template files to generate its look.

The multi-post view features many posts. They are usually shown as excerpts, summaries or the whole post on the page. The multi-post views, like the front page, categories, and archives, are generated with the index.php,archives.php, category.php, and search.php template files.

You can control the way the content is displayed as a single post and/or on the multi-post views to be the same or different. The look is controlled by the style sheet and by the template file generating the specific view.

Content Seen on Many Templates

PHP page generation is different from static HTML pages in many ways. One or more template files can generate multiple web pages results. In the simplest WordPress Theme, the content of the page is displayed via the index.php. Depending upon the query in The Loop, the index.php template can be used to generate content for the front page, single page, Pages, archives, search results, and other page views.

Some Themes use individual template files for specific page views, such as the single.php, archives.php, category.php, and page.php. All these templates will generate your post content, so if you change one, you may need to change all of them.

While The Loop can be customized to display your posts in a variety of ways, let's look at the XHTML and CSS found within the content area then look at how to customize the look of your posts and post content for the different post views.

The Classic Theme Content Structure

The most basic structure of the content section of your site can be found in the WordPress Classic Theme. It includes a container for the overall content, the date, another container for the post itself which separates it from other containers, specifically the title, post meta data, story content, and feedback. In Themes based upon the Classic Theme, the content is generated only on the index.php page for all page views.

<div id="content">
   <h2>Date</h2>	
      <div class="post" id="post-1">
         <h3 class="storytitle">Post Title</h3>
            <div class="meta">Post Meta Data</div>
         <div class="storycontent">
           <p>Welcome to WordPress.</p>
        </div>
     <div class="feedback">Comments (2)</div>
</div>

Tucked in the post container is a powerful feature: The ability to individually style a single post's look. We'll get to the specifics on how to take advantage of this in a moment.

The Default Theme Content Structure

The Default Theme showcases the many ways you can layout and style a Theme. Many WordPress Theme authors base their site layout on this Theme. The Default Theme content container features a specific style for multi-post views like the front page, categories, archives, and searches, and a different style for single post views or single posts. This means changing the content area of a Theme based upon the Default Theme may need to also change the content area of the single.php, archives.php, category.php, and page.php template files.

The multi-post view looks like this:

<div id="content" class="narrowcolumn">
   <div class="post" id="post-1">
      <h2>Post Title</h2>
         <small>Date</small>
            <div class="entry">
            <p>Post Content.</p>
            </div>
   <p class="postmetadata">Post Meta Data Section</p>
         </div>
      <div class="navigation">
         <div class="alignleft">Previous Post</div>
         <div class="alignright">Next Post</div>
      </div>
   </div>

There is a lot going on here. Let's break it down.

<div id="content" class="narrowcolumn">: In the multi-post views, it features a class="narrowcolumn" and in the single post views, it features class="widecolumn" and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area.
<div class="post" id="post-1">: Like the Class Theme, this division sets up the style for post and the identifier for post-X, with X representing the post's unique ID number. This allows for customizing the specific post's look.
<h2>Post Title</h2>: This encompasses the post's title code, styled by the <h2> tag.
<small>Date</small>: The date code is surrounded and styled by the small tag.
<div class="entry">: The post content is styled by a combination of the styles within the entry CSS selectors and the paragraph tag.
<p class="postmetadata">Post Meta Data Section</p>: The Post Meta Data Section contains the data details about the post such as the date, time, and categories the post belongs to.
<div class="navigation">: The Next and Previous Links are styled in the navigation. They also include classes for alignleft for the Previous Post and alignright for the Next Post in chronological order.

These elements are shifted around in the single post view content structure:

<div id="content" class="widecolumn">
   <div class="navigation">
      <div class="alignleft"></div>
      <div class="alignright"></div>
   </div>
   <div class="post" id="post-1">
      <h2>Post Title</h2>
      <div class="entrytext">
         <p>Post content.</p>
         <p class="postmetadata alt">
            <small>Post Meta Data</small>
         </p>
      </div>
   </div>

The widecolumn class is featured to stretch the content across the page to fill in the absence of the sidebar. The navigation has been moved up to the top. And the Post Meta Data is now incorporated into the entrytext parent container and styled differently with an alt style added.

How Are Posts Generated?

To help you understand the end results of your post content, we need to take a moment to explore the WordPress Loop. Basically, The Loop queries the database based upon information supplied by the user's actions. If the query asks for a single post, then the single post view is generated. If the query asks for a multi-post view, then the multi-post view is generated.

There are two template tags to generate your post content on the multi-post view. They are the_content() and the_excerpt(). Which one you use does not affect the single post view as that will display the full post content, but it does impact the amount of your post content visible on multi-post views.

The template tag the_content() does one of two things on a multi-post view. It displays the entire post or an excerpt of the post up to the Read More link inserted into the post through the use of the Quicktag buttons on the Write Post panel. It looks like . If you do not use the Read More tag, the entire post will be shown.

The template tag the_excerpt() can be used on multi-post views to replace the_content() tag to force only excerpts to be shown. Three excerpt possibilities will be show.

If no excerpt is designated, then the first 120 words of the post will be shown as the summary.
If the Read More tag is used, the post will be shown up to that point.
If the explicit excerpt is used in the Write Post panel, then that excerpt will be shown.

You can style the multi-post views differently from the single post view, and if you force excerpts, you can style each excerpt with a border, background color, or alternating colors to jazz up your multi-post views.

Template Hierarchy

If a user wants to see a single post page view, they will click on the title or the Read More link and the query becomes:

If user information requests single post view,
    Display single post view.
       If single.php template is found, display post with it;
    Else display single post view using index.php template.

The core programming of WordPress features a Template Hierarchy which looks for specific templates to generate specific views. If they are not found, they fall back on the instructions in the index.php template file. In the above example, if the single.php template is not found, the single post view is generated with the index.php template file.

The category page view uses a more extensive template hierarchy. If you have multiple category template files, WordPress will automatically check through a hierarchy list of templates when looking for Category ID #6 in order to display the multiple post view of that category. This is the order it checks through.

category-6.php
category.php
archive.php
index.php

What does all of this have to do with styling your content? Each of these templates, if they exist, have the content styles on them. If you want and need consistent looks across all of your post views, you will need to make sure that each of these templates contain the same XHTML/HTML and CSS references. If you want the category view to look different from the front page view, you need to know which template holds the content for which view and change it there.

Examining the Loop for Content

The WordPress Loop and layout for the Classic Theme looks like this and we've added comments between the code to spell out what is happening:

The Loop begins below. The Loop is a request for multiple posts to show multi-post view; if request for single post, show single post view.
```
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
```
The date is displayed as a heading using a date template tag.
```
<?php the_date('','<h2>','</h2>'); ?>
```
A CSS division container is started to contain the overall post content.
```
<div class="post" id="post-<?php the_ID(); ?>">
```
The <h3> heading is used to store the post title in a link to the post. If clicked, then a request would be made to The Loop to check to see if a single post display is needed, and the single post display would be shown.
```
<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a></h3>
```
The next section is the post meta data section, displaying information about the post's categories and author and the time the post was created. An edit_post_link() tag is also used which will show "Edit This" if the user is registered and has a high enough user level for editing this post.
```
<div class="meta">
<?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?>
 @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?>
</div>
```
This next section is the core of the content section. It's parent is the CSS class post and ID post-X, but if you want to style content specifically in the post content area, it would be under the CSS class reference of storycontent. The template tag to display the post content is the_content() and checks to see if the post content features a <!--more–> tag within the post. If it does, and this is a multi-post view, it will display the excerpt up to that point. If the more tag is not present, it will show the whole post on all views.
```
<div class="storycontent">
<?php the_content(__('(more...)')); ?>
</div>
```
The next section is for the feedback area. On the Classic Theme, this section lists if there are comments, how many comments, and a link that will redirect the user to the Comments section on the single post view page.
```
<div class="feedback">
<?php wp_link_pages(); ?>
<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>
</div>
```
The post and post-X section ends here. Next comes the request for the comments template, which may include another PHP query that asks if the view is for multi-post views to NOT show the comments, and if a ingle post view, then show the comments.
```
</div>
<?php comments_template(); // Get wp-comments.php template ?>
```
The last part of The Loop ends first query and returns an answer to the question "If no posts are found, then what?" If you are not using a 404.php template page, then a page will be generated with the following information displayed.
```
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
```

Displaying the content styles means covering the styles for each of these sections, depending upon the various views generated by the WordPress Loop. It feels like a lot of work, but it's easy when we put it all together.

Content Within the Content

Each element within your content area can be styled. Some are main sections like the paragarphs and headings, but there are also elements within the post content, often overlooked by the casual user more obsessed with the parent containers than the details. These details include lists, links, blockquotes, and other containers or "boxes" to hold information within your posts.

Note: Styling the various templates in your WordPress site can possibly cause conflicts with CSS as different containers and sections compete for different styles. For tips and help on this, see Understanding the CSS Parent/Child Relationship below.

Headings

Some WordPress Themes feature only one heading within the content post area, the title. Others may feature "subtitles" to use within the post content area to break up the post into sections for easier reading. Depending upon your Theme's styles, the post title may be in an <h2> or <h3> heading. You may want to add subheadings like <h4> or <h5>. For more information on customizing your headings, see Designing Headings.

Paragraphs

The paragraph tag (<p>) controls the look of your paragraphs within your post. You can set the font, font-size, style, colors, and space around and within each paragraph.

The fonts are controlled in several ways in WordPress using the parent/child relationship of CSS. You can set your default font styles in the body tag which will then be used anywhere a specific font, font-size, or color is not specified. Or you can set it in the parent content container or specifically in the storycontent, entry, or entrytext containers.

Here are some examples from the Default and Classic Themes for styling paragraphs:

p {font: 90%/175% 'Lucida Grande', 'Lucida Sans Unicode', 
	Verdana, sans-serif;
	letter-spacing: -1px;}
.widecolumn .entry p {font-size: 1.05em; }

You can add more or less space around each paragraph tag. This style adds extra space to the bottom of every post, but not to the top, allowing headings to sit close to the paragraph:

 p {margin:5px; padding: 5px 5px 20px 5px; }

Styling Lists

Styling_Lists_with_CSS will help you understand some of the issues that come with styling lists in WordPress, especially in the sidebar, but in general, you can style the lists within your content area to look differently from the rest of your site. You can add graphic image bullets, borders, background colors, and all kinds of styles to your lists.

Here is just one example using different images for bullets, and changing font sizes for each level of the list:

#content ul {margin: 0.3em 1em; list-style-position: outside; 
      list-style:url(ball.gif) disc; font-size:98%}
#content ul ul {margin-top: 0.3em; list-style:url(bullet.gif) square; font-size:96%}
#content ul ul ul {margin-top: 0.3em; list-style:url(ball1.gif) circle; font-size:98%}
#content li, #content li li, #content li li li {padding:0.25px 10px 5px 0.25em}

Post Meta Data

Inside of the Default Theme post area is the post meta data. You can style this however you like by following instructions and examples in Post Meta Data Section. Generally, this area can be styled in a box, like in the Default Theme, at the bottom of the post, or you can change the container to blend into the post like a last paragraph, or move it in a smaller box over to the side, highlighted with a solid colored background or distinctive look. Use your imagination.

Blockquotes

Blog posts and articles often frame quotes from other sites and people in a way that distinguishes it from the rest of the article. It can be a change in the font size, a border along the side, the way it's indented or framed, there are many ways quotes can be highlighted to showcase the text as a quote.

<blockquote>He said that she said that he said
that I said, but I really don't want to speak about it</br>
<cite>I.M. Said, Spoken Words</cite></blockquote>

Be sure there is an empty line break before and after the <blockquote> tags in order for WordPress to apply the correct paragraph breaks around the blockquote. The styles might look like this:

blockquote {
	margin: 15px 30px 0 10px;
	padding-left: 20px;
	border-left: 5px solid #ddd;
	}
blockquote cite {
	margin: 5px 0 0;
	display: block;
	}

You can customize your blockquote not just in your style sheet but in your Quicktag Buttons javascript file. For example, you can use extra DIV tags around your blockquote tags to create interesting looks. Follow the instructions to edit your Quicktag Buttons with a text editor to modify the tags for something like this:

<div class="wrap"><blockquote class="cool"><div>
He said that she said that he said
that I said, but I really don't want to speak about it</br>
<cite>I.M. Said, Spoken Words</cite></div></blockquote></div>

Adding Containers

You are writing about your top favorite animals and you might want to highlight that list in a container inside of your post? Or maybe you want to create a small sidebar in your post for "more information" on the subject you are writing about. You can add all kinds of containers within your post content area to accentuate information. You add them with HTML/XHMTL tags and CSS classes, or you can use inline styles.

Similar to blockquotes, you can add any kind of container for text, photos, or lists. Design the container using CSS classes as references to identify the container and allow it to be used more than once on a web page. Then add the styles to your Theme's style sheet, and if you consider using this container frequently, add the XHTML tags to your Quicktag Button Bar.

Here is an example of a simple box for a list.

My Favorite Animals

Lions
Tigers
Bears
Kittens

The code looks like this:

<div class="mylist">
<div class="mylisttitle">My Favorite Animals</div>
<ul>
<li>Lions</li>
<li>Tigers</li>
<li>Bears</li>
<li>Kittens</li>
</ul>
</div>

The styles might look like this:

.mylist {margin:10px; padding:10px; float:right;
    border:1px solid blue; width:30%; }
.mylisttitle {color: blue; font-size:140%; }
.mylist ul {font-size:90%; }
.mylist li {margin-left:5px; }

Or you might like a sidebar with just information in it.

My Favorite Animals
I like to talk about my favorite animals. They are lions, tigers, bears, and kittens. Why do I like kittens along with these fierce other animals? Have you ever played with a kitten? Then you would know the answer.

.mybox {margin:10px; padding:10px; float:right;
    border:1px solid blue; width:30%; font-size:90%; }
.myboxtitle {color: blue; font-size:140%; }

Use your imagination to add containers and sections within your post content to jazz it up or highlight information important to be seen.

Styling Details

Think about all the little details you add to your post content area that may need to be styled. Most of these come styled by the Theme author, but not always. You can modify the styles of all of these to match the look you want within your content section.

Images: Do you want your images to have a border, frame, or be displayed in a certain way? You can add styles to your images. For more information see Using Images and Wrapping Text Around Images.
Acronyms: If you are using an acronym plugin that makes abbreviations like CD and MP3 be turned into links to supply the definition of the acronym, you can style those. For instance:

acronym, abbr, span.caps {cursor: help}
acronym, abbr {border-bottom: 1px dashed #999;}

Links: Links have three different styles that can be applied: active, hover, and visited. All three can be styled differently from section to section. Most Themes come with these styled to match the look of the theme, but you can change these to your own needs.
Media: You can add all kinds of media formats to WordPress including video, podcasting, moblogging, audio, music, and more. These may need custom styling for presentation as well as the button or link that accesses the information.
Drop Letters: Styled with CSS or using a Drop Case Letter Plugin, you can set the first letter of every post to be larger than the rest of the post text, commonly used in magazines and books.
Including Code: You can also write PHP, HTML, XHTML, CSS, LaTeX, Math, and other codes or programming languages within your post content if you write articles about programming codes and such. See Writing Code in Your Posts for more information.
Use XHTML in Posts: WordPress converts your posts into XHTML valid tags, but if you choose to control all of the look of your site, you can use the TextControl Plugin to set your character and content formatting on a global or per-post basis to accommodate and avoid WordPress converting the XHMTL tags into character entities.

Customizing Your Content

There are a lot of ways to change the content section of your WordPress site based upon the various queries, templates, and template tags used to generate a request for a page. Here are some examples.

Different Formats Based on Category

You can create a totally different look for the entire page or just the post content area of a single post view web page by changing The Loop query to include a conditional statement requesting a different format if a post is in a specific category. For more information, see The_Loop_in_Action#Different_Formats_for_Different_Categories Different Formats for Different Categories.

Different CSS Based on Category

Many users want to create separate CSS files for a specific category. Style sheets are defined and loaded in the <head> section of the header.php template file. Using a conditional statement in the <head>, a different style sheet can be choose based upon the category. See Different CSS for Different Categories for details.

Customizing the Content on a Per Post Basis

Tucked in the post container is a powerful feature: The ability to individually style a single post's look. We'll get to the specifics on how to take advantage of this in a moment.

<div class="post" id="post-1">

The post CSS class selector applies the post styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this:

<div class="post" id="post-<?php the_ID(); ?>">

The use of the template tag the_ID() generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for post-1, as could post-2. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too.

Including PHP and Javascript

There may be some occasions when you will need to use PHP or Javascript inside of a post. Two plugins will help with the use of PHP on a per post basis: RunPHP and PHPExec. For information on adding Javascript inside of posts, see Using Javascript.

Multi-Post View Customization

You can customized the way the content is displayed on multi-post views with queries and Conditional Tags. For example, you can customize the posts on the front page or other multi-post views by date to show posts styled differently by year. Or display the current day's posts in a separate container from the rest of the posts to showcase them. Or even use one category template file with conditional tags to generate different category-related information and content. With conditional tags and queries, your content can be generated on multi-post views in many ways.

Understanding the CSS Parent/Child Relationship

Before we get to the specifics of styling your content on your WordPress site, we need to address a common complication in web page design. CSS has a parent/child relationship with its styles. Styles have parents and children, just like families.

For example, the parent of any style in the <div id="sidebar"> is sidebar and the children would be the styles within that parent container, such as lists and headings. Child styles are influenced by its "parents" styles. If the parent's list style features the color "red" and you want the children to be in "blue", then you need to specify the color in the children's list styles to be "blue" so they will override the parent's style.

Applied to the content section, if you have set the list styles in the sidebar to be "parents" such as ul and li without specifying they belong in the sidebar parental container, all list items for your entire site will be styled this way. If you want to style the sidebar list differently from a list you have in your content section, you must set up different "parents" for the list styles.

#sidebar ul {styles...}
#sidebar li {styles...}
#content ul {styles...}
#content li {styles...}

The same applies to the general content area, depending upon your theme. For many Themes, the content area's CSS parent is post or content which encompass the whole container for the post information including the titles, comments, post, and post meta data. If you have set a style for the parent container, and you want it different in one of the children containers, like the titles, comments, post, and post meta data sections, make sure that container is specified when modifying the styles.

For more information on the parent/child relationship for CSS and troubleshooting CSS, see CSS Troubleshooting and Site Architecture 1.5.

Resources

There are a variety of WordPress Plugins that may help you customize your post content area.

There are also a wide variety of resources for styling your content:

Codex