Web Cash » template

Google Analytics: Inserting Into a WordPress Template

Walkere — Sat, 29 Mar 2008 17:00:48 +0000

Google Analytics is a great tool for gathering data about your website. You can track and analyze all kinds of data about your visitors, their navigation paths, and the effectiveness of your content.

To use Google Analytics, you need to place some javascript on your website. A commonly asked question in forums is, “How do I add Google Analytics to my WordPress template?”

Where the Analytics Code Goes

When you sign up for Google Analytics, Google provides you with a short piece of javascript to place on your site. The code should look like this.

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2894597-3");
pageTracker._initData();
pageTracker._trackPageview();
</script>

According to Google’s instructions, this needs to be placed at the very end of your site – just before the closing body tag. To do this, we need to find the closing body tag on the WordPress template.

Look In Footer.php

As we previously discovered, a WordPress template is made up of a series of files. Three basic files – header.php, sidebar.php, and footer.php – help build the components of the page.

If your WordPress template follows normal conventions, the closing body tag should be in the footer.php file.

Go to your themes directory of the WordPress installation, navigate to your current theme, and open footer.php. You should see something like this at the end.

(); ?>
</body>
</html>

Add a blank line before the closing body tag. Simply copy and paste the javascript code that Google provides on that blank line, save the file, and you’re good to go.

Anatomy of a WordPress Template: The Basics

Walkere — Mon, 10 Mar 2008 23:46:12 +0000

There are tons of free WordPress templates available, but at some point you’ll probably want to modify one or make your own. Even if you know HTML pretty well, this can be a daunting task at first.

WordPress templates have a decent amount of simple PHP mixed in, and you need to utilize a special file structure for the template to operate correctly. Before you dive into making a WordPress template, let’s look at the basic structure of a WordPress template compared to a normal website template.

Example Basic Website Template

A typical website consists of a few parts – the content, a header, and a footer. You may also have a sidebar for navigation and/or a horizontal menu bar. The typical markup for this type of template would look something like this.

<body>
<div id="header">
  ...  Header Stuff Here ...
</div>
<div id="content">
  ...  Main Content Here ...
</div>
<div id="sidebar">
  ...  This floats to a side ...
</div>
<div id="footer">
  ...  Footer Stuff Here ...
</div>

If you’ve learned some PHP, then you can include a series of PHP files to create your webpage template. Chances are your header, footer, and sidebar are the same for all or most of your pages – so it makes sense to create them one time each.

('header.php'); ?>
 
<div id="content">
  ...  Main Content Here ...
</div>
 
('sidebar.php'); ?>
 
('footer.php'); ?>

Nothing too complicated here. Just a simple, barebones template.

What Does a WordPress Template File Look Like?

Although the terminology is a bit different, a WordPress template has the same basic structure. Let’s look at a pared down version of the default template’s index.php file.

(); ?>
 
<div id="content" class="narrowcolumn">
  (have_posts()) : ?>
    (have_posts()) : the_post(); ?>
    <div class="post" id="post-">
      ... Post Info ...
    </div>
    
  
</div>
 
(); ?>
 
(); ?>

The bulk of the action here is in the “content” div. With PHP, WordPress checks to see if any posts were retrieved from the database. If they are, then it loops through the posts and outputs each one.

“Post Info” would be replaced by the markup you want to use for the actual post headings, information, and content.

The PHP function calls are similar to the include() calls in the earlier template. get_header() fetches the standard header info, get_sidebar() fetches the sidebar, and get_footer() fetches the footer. But where does WordPress find this information?

Special WordPress Template Files

WordPress uses some standard tempalte files to make these functions work.

For example, get_header() looks for the header.php file. It’s more or less a proxy call for include(‘header.php’). To make WordPress work properly, therefore, you should include all of your header information in header.php.

The same goes for get_footer() and footer.php as well as get_sidebar() and sidebar.php.

So, to begin designing a WordPress template or to convert a regular website template to a WordPress template, you need to worry about four basic files:

header.php – the header div and information
footer.php – the footer div and information
sidebar.php – the sidebar div and information
index.php – calls get_header(), get_footer(), and get_sidebar(), and contains the content div

There are some other special files as well, but this is enough to get started. Once you understand the basic structure of the template, you can look into customizing the information that is displayed for each post.

How to Time Delay Posts in WordPress

Walkere — Sat, 08 Mar 2008 17:06:28 +0000

One reason I’ve heard people say that they prefer a full-blown CMS to WordPress is that WordPress doesn’t allow time delayed posting. I was about to figure out a way to mod WordPress to make this possible – until I realized that there is some decent built-in functionality for time delaying.

You can easily delay the release of your posts into the main indexes (front page, archives, “Recent Posts” list, etc). With a little bit of code, you can also restrict people from viewing the page before its appointed “Published” date.

Delaying Publication: Setting a Date

If all you want to do is delay the date and time that an article is “released” on your page’s index, you don’t have to do a whole lot of work.

Every article you post is “stamped” with a time by WordPress. When you hit the “Publish” button, it checks the current time on the server and attaches that to your post.

You may not have noticed, but there’s an option for you to edit this time while you are working on the article. For example, you could set the date back a week and backdate one of your posts. For our purposes, we’ll set the date ahead – and WordPress won’t display your post in any indexes until that date arrives.

In the “Write” section of your Dashboard, you should have a column of widgets on the righthand side (Categories, Discussion, Post Slug, etc). If you scroll down a bit, there should be one titled “Post Timestamp.” If you don’t see anything, click the “+” button in the title.

To set a custom release date, select “Edit Timestamp.” Then use the inputs to enter the date and time you want the article released. Voila – you’re done.

Restricting Access to the Page

For most people, this is good enough. Your readers aren’t going to be able to find the article without a link to it appearing on your front page or in your RSS feed.

However, if your readers do know the link to the page, somehow, they can still access it directly. If you want to prevent that, you’ll need to add a few lines of code to your template files.

We’re going to edit the “single.php” template file – the file responsible for formatting and displaying a single post. After the page retrieves the post, we’re going to perform a check to see if the published date of the article is in the future.

If it is, we’ll display an alternative message to tell the user the article isn’t published yet. Otherwise, the article will be displayed as normal.

Editing Single.php

Your template file probably doesn’t look exactly like mine, but there should be some very basic similarities.

If you open single.php, the page is displayed within “the loop.” It’s how every WordPress template works. The loop always begins with a line similar to this.

 while (have_posts()) : the_post(); ?>

This checks to see if a page was found in the database. If it was, it loads the page into memory and prepares to output it. The loop will eventually end with a line like this.

 endwhile; ?>

We’re going to create a new if statement and place it in between these two lines. The new template will look something like this.

 while (have_posts()) : the_post(); ?>
 if ($pubDate > time()) : ?>
  Article Not Published Yet
  Sorry!  The article you request is not published 
    yet.  It should be available soon, so check back in a few days.
 else : ?>
  ...  Regular post processing goes here ...
 endif; ?>
 endwhile; ?>

Creating the Conditional Statement

The only thing we have to do now is create a functioning conditional statement that checks to see if the published date of the article is in the past or the future.

To do that, we’ll use a few functions – get_the_time (a WordPress function to get the post’s timestamp), strtotime (a PHP function to convert a date string to a timestamp), and time (a php function to get the current tie).

get_the_time doesn’t return the actual time stamp – it returns a formatted date string, like “March 9, 2008, 11:13:35.” You can specify how it’s formatted, just like you would with PHP’s date function.

To get the timestamp, we’re going to format the time string in a special way so that strtotime() can convert it back to a full timestamp (preserving the exact time the article should be published). Then we compare that timestamp to the system time and see if the date has passed or not.

Use this if statement in the code above, and you should be good to go.

 if (strtotime(get_the_time('F j, Y, H:i:s')) > time()) : ?>

If you time delay an article and someone tries to access the article directly, they will now see your alternate message. You should of course personalize that to something appropriate for your site.

You can also apply the same concept to “Pages” in WordPress. You’ll need to edit the page.php template file and insert the same snippet of code there.

What are you waiting for? Go write some articles for the future.

Add Custom Loops (Queries) to WordPress

Walkere — Sun, 02 Mar 2008 21:38:06 +0000

If you look at your WordPress template, the thing that drives your page is called “the loop.” That’s WordPress speak for looping through the result set (the posts) retrieved from the database.

If you wanted to make custom queries, you could certainly do that by diving straight into the database. However, WordPress comes with some built in functions for helping you query the database and display the results. By using these template tags, you can add custom loops in your template to display other post information.

Looking At the Main Loop

If you look in any of your templates, you’ll see a loop similar to the one below. This basic loop just loops through all the articles, outputs the title and content.

 if (have_posts()) : while (have_posts()) : the_post(); ?>
 the_title(); ?>
 the_content(); ?>
 endwhile; ?>
 endif; ?>

WordPress has a nasty habit of using that weird while/if syntax, where things aren’t enclosed in brackets. Aside from the weird sytnax, this is a very simple while loop.

First, if (have_posts()) checks to see if there is any data in the queue to be outputted. If there is, it starts a while loop that uses the same check – have_posts() – to see if it should continue.

The thing that moves this along is the_post(). This loads the next post in the result set into memory and prepares it for outputting.

The next few lines do our basic output. the_title() is the template tag for outputting the title of the current article, while the_content() outputs the text of the article.

Finally, we wrap up the while loop and the if statement. If there were more articles in the queue (like on an index/archive page), it would loop through for each article.

Where Do the Articles Come From?

When you load a page in WordPress, you use a query string. The most basic one would be index.php?p=5. That tells WordPress to load the article where the post id is 5.

You may not realize it if you’re using pretty URLs, but every URL you request on your blog has one of these query strings built-in. It tells WordPress to load a list of articles (for an archive, category, or index) or to simply load one article or page.

There’s nothing stopping you from utilizing this process for other purposes, though. Rather than simply looping through the result-set created by the query string, you can use the query_posts() function to create your own custom queries – and then loop through them.

Example Please…?

Here’s how it works. You call query_posts() with a query string. That loads the database results and prepares for the loop. Then, you loop through like we did above to output information on the articles.

Let’s say you want to fetch the latest article that was tagged with both “foo” and “bar.” Here’s how you do it.

query_posts("tag=foo+bar&showposts=1");
//  Create the loop here

We passed two parameters here. “tag=foo+bar” tells WordPress to fetch articles that have both of those tags. “showposts=1″ tells WordPress to only fetch one article. By default, they’re sorted by date and time, so we automatically fetch the latest one.

You Don’t Always Need Plug-ins

This is such a great tool because it lets you avoid using some basic plug-ins. Plug-ins essentially help you perform these extra queries – like the latest posts, similar posts, etc. But they can also be restricting if they don’t do exactly what you want.

By using query_posts() to fetch your own information, you can get WordPress to do exactly what you want.

For example, let’s say you write movie reviews and you want to display the latest ones in your sidebar. Rather than look for a plug-in that displays exactly what you want it to, you can tag all of your movie reviews with “Movie Review” and query for those specific posts.

Then you can easily create the output you want, rather than the output someone else designed.

This is just a taste of what you can do with query_posts() and custom loops in WordPress. You’ll need to try it out for yourself to fully understand it, and I’d suggest you take a look at the documentation on query_posts() for a list of parameters and the documentation on template tags for a full list of output tags.

Good luck!

How to Alternate CSS Styles Using PHP

Walkere — Thu, 14 Feb 2008 04:08:08 +0000

There are a lot of situations in which you’d like to alternate CSS styles from one element to the next. Long tables, for example, look a lot nicer when the background color of the rows is alternated.

How do we do that? Some pretty simple PHP can help you accomplish this task and spice up your HTML/CSS.

Look At the HTML/CSS

Before we start making things dynamic, let’s look at the basic HTML.

Let’s say we want to make a list of items – in a table – maybe a list of emails. The end result should be a table with alternating background colors for rows – white and light blue.

If we were to create this table by hand, it might look something like this.

<table>
<tr class="blue"><td>E-mail subject</td><td>Sender</td></tr>
<tr class="white"><td>E-mail subject</td><td>Sender</td></tr>
</table>

This assumes that we have a CSS class defined as “blue” with a blue background and “white” with a white background.

Adding Some PHP to Assign Classes

We’re setting the background color by adding a class declaration to the table row. The first step in making this dynamic is to use PHP to echo the class. Like this…

<tr class=""><td> ... </td></tr>

We’ve taken the same table row element from before and replaced “blue” with a php snippet that echos the same phrase, “blue.” The end result is the same HTML that we created in the first example.

Dynamically Choosing the Class

The final step in making this dynamic is to add a conditional statement to the PHP block. For example, let’s say we’re executing a loop 5 times. On the odd iterations (1, 3, 5) we’ll use “blue” as the class. On the even iterations (2, 4), we’ll use “white.”

To test whether or not a number is odd, you can use the modulus (%) operator. This returns the remainder of a division – so 2 % 3 = 1. With a little basic math theory, we know that if a number is divided by 2 and has no remainder it’s even – but if there’s a remainder of 1 it’s odd.

Here’s what the loop might look like.

 for ($x = 1; $x < 6; $x++) { ?>
   
      if ($x % 2 == 1) { echo "blue"; }
      else { echo "white"; }
      ?>"> ... 
 } ?>

That If Statement Is Kind of Long…

Well, we can shorten that up. This is a great place to use the obscure and un-readable ternary operator in PHP. It’s a shortcut that allows you to write a simple if-statement in one line.

For example…

echo (true ? "Yes" : "No");

The ternary operator takes three parts – the conditional statement (in this case I just wrote true), a value to return if the statement is true (“Yes”), and a value to return if the statement is false (“No”). I echo’ed the result just so you could see what the statement outputs (in this case, “Yes”).

We turn our previous if statement into a ternary operator statement and shorten up that code block quite a bit. Like so…

 for ($x = 1; $x < 6; $x++) { ?>
    echo ($x % 2 == 1 ? "blue" : "white"); ?>"> ... 
 } ?>

Creating these table rows is just one example of how you can use PHP to help spice up your HTML. With this concept, you can dynamically alternate styles based on a bunch of factors.

How else could you use this?

You could alternate the background colors of comments in your blog template. You could include a bottom-border after every five rows in your table. You could make a calendar module and display Saturday and Sunday in boldface.

The options are really endless – so long as you understand the basic principal.