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.
Adding a custom footer to a particular page in WordPress
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:
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:
And the other categories remain unchanged (they are the same as in the standard template)
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.
Tutorial Categories: