May 21, 2015 9:42 am

Adding Custom Design or Functionality to WordPress Pages and Posts

Pages, posts and tags are the essence of WordPress Tutorial. Pages are hierarchical pieces of content that can be grouped into children and parents – each page can have several child pages and those child pages can have their own children. For example, the page structure of a electronics website could be Gaming -> Consoles -> Portable Consoles Consoles. Posts, on the other hand, can be grouped into categories while tags are strictly non-hierarchical, loose groupings of content.

The WordPress Series - Adding Custom Design or Functionality to our Pages and Posts

First, we open our Admin Dashboard in WordPress and create the page (Pages -> Add New). Before we save or update it, check the page’s permalink and look for the slug or id.

For example, in http://localhost:8079/wordpress/my-page the slug would be my-page.

One option to add our custom footer is to insert conditional logic in the main page.php file (/wp-content/themes/#{themeName}/page.php):

if (is_page("my-page")) {
    get_footer("my-page");
}
else {
    get_footer();
}

Instead of just getting our footer, we first check if the page has the slug my-page and if so we require the my-page footer. Otherwise, we just display the standard footer.

Then, we create a footer-{#slug}.php file in /wp-content/themes/#{themeName} and the code we put in that file will be automatically called when the my-page footer is requested in our page.php file

Because our footer is called my-page we would have to name our fresh footer: footer-my-page.php

Inside the file, we add a little content;

<div style="text-align:center;padding:15px;border-top: 2px dashed #999">
    Brought to you by: Bulgaria Fried Chicken
</div>

Result

Now when we open a page different than my-page we get the following footer:

footer-before

Adding a custom appearance to a category’s archive

First, we create a new category called “Monkeys” from the Posts -> Categories menu, then we click on the Edit link for the category and see the following page:

http://localhost:8079/wordpress/wp-admin/edit-tags.php?action=edit&taxonomy=category&tag_ID=2&post_type=post. We can see that the ID of the category is 2.

Therefore, we create a file called category-2.php

In it, we put the following contents:

<?php get_header(); ?>
<div class="row">
    <div class="col-md-4 col-md-offset-4 jumbotron">
        <h1 class="text-center">Monkeys</h1>
    </div>
<?php while (have_posts()) {
    the_post();
    ?>


    <div class="col-md-10 col-md-offset-1">
    <?php the_title("<h2 class='text-center well well-lg'>", "</h2>"); ?>
        <?php


        ?>
    <p class="text-center "> <?php echo get_the_excerpt() ?>
        </p>

        <p class="lead pull-right text-center"> <span class="glyphicon glyphicon-info-sign"></span> Author:  <?php the_author() ?></p>
         </div>


    <?php
    }
?>
</div>
<?php get_footer();?>

We get the footer and header’s templates and create a Bootstrap template for displaying our monkeys.

Then, we loop over each post.the_title echoes the title of the current post with the first argument being responsible for what to add before the title and the second – what to add after the title. get_the_excerptjust returns an excerpt from the post which we could store in a variable. the_author echoes the author of the current post.

Here is how the archive with posts categorized as Monkeys looks like:

monkeys-after

And the other categories remain unchanged (they are the same as in the standard template)

monkeys-before

Conclusion

We can do this for archives, posts, tags and categories. Instead of the slug, we can also use the ID of the page or other taxonomy. Also, it is possible instead of adding conditional logic in the main page.phpfile to just add a custom template for the my-page page (we just have to create a file called page-my-page.php) like we saw in the category-2.php example. Alternatively, we could have inserted conditional logic into our archive.php file to display different content if we find the slug of monkeys or the id of 2.

Author Ivan Dimov

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *