Templates and Styling

Creating a template_post_display() function

Here are some step-by-step instructions for creating a template_post_display() function for those who are not familiar with PHP programming or with hacking WordPress templates.

  1. First, make sure that you have a functions.php template. From the WordPress Dashboard, go to Presentation –> Theme Editor and check whether a file named functions.php is listed in the theme files on the right-hand side. If not, create a new file in your favorite text editor with the following contents:

    <?php
// Common functions for WordPress templates
?>

    Then save it as functions.php, upload the file to your WordPress themes directory, and reload the Theme Editor page.

  2. Once you have functions.php brought up for editing, copy and paste the following lines at the second line of functions.php (underneath the opening line containing <?php):

    function template_post_display () {
?>
<?php
}

  3. Save your changes to functions.php and bring up your Main Index Template (index.php in your theme directory) for editing.

  4. Locate a line in the Main Index Template containing something like the following:

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

    Then scroll down until you find another line containing something like the following:

    <?php endwhile; ?>

    Copy everything between these two lines, but not including these two lines, onto the clipboard.

  5. Load up functions.php in the editor again.

  6. Paste the lines that you copied from the Main Index Template in between the first line containing ?> and the second line containing <?php.

  7. Save your changes to functions.php. You should now have a working template_post_display() function.

Displaying posts in search results

Many WordPress templates (including the default “Kubrick” template) display posts differently depending on whether they are in archives or in search results. “Kubrick,” for example, doesn’t display the post’s contents in search results. If you want to keep different formats for displaying archives as against search results, then use code something like this in your template_post_display() function:

function template_post_display () {
    if (is_search()) {
        // display post for paged search results
    } else {
        // display post for paged archives
    }
}

Eliminating the doubled-up navigation links

If your index.php and archive.php templates provide previous page / next page links at the bottom of the content, you will probably want to remove these links from your templates. The plugin automatically provides its own previous page / next page links at the bottom of the front page and archive pages.

Styling navigation links

You may also want to add some styling to your template’s stylesheet for the navigation links that the plugin automatically generates. Here is what I use to display the “older posts” link at the far left side of the content column, and the “newer posts” link at the far right side on the same line:

#content .navigation {
    display: block; position: relative; list-style: none;
    text-align: center;
    margin-top: 10px; margin-bottom: 60px; margin-left: 0px; margin-right: 0px;
    padding: 0;
}

#content .navigation .prev {
    display: block; position: relative; list-style: none;
    top: 0; bottom: auto; left: 0; right: auto; width: 45%;
    margin: 0; padding: 0;
    text-align: left;
}

#content .navigation .next {
    display: block; position: absolute; list-style: none;
    top: 0; bottom: auto; left: auto; right: 0; width: 45%;
    margin: 0; padding: 0;
    text-align: right;
}

Styling the Getting more content for you… message

If you want to change the appearance of the “Getting more content for you…” status indicator, then add a rule to your CSS stylesheet for the class humanized-history-getting-more. E.g., to create a dark translucent box that floats over the footer material below:

.humanized-history-getting-more {
    position: absolute;
    width: auto; height: auto;
    border: 3px solid #505050;
    padding: 0.25em 1.0em;
    background-color: #777777;
    opacity: 0.85;
    z-index: 10000;
}

Advertisement