WordPress Themes .. Displaying Content

Pages: 1 2 3

Template Tags for Website and Theme Information

Besides publishable content and information related to this content, global website and theme information is available through Template Tags as well.

WordPress by default keeps the Site Title and the Tagline in the database.  This can be used, and it often is, to display this in the top banner area of a site.

  • bloginfo(‘name’)
  • bloginfo(‘description’)
  • bloginfo(‘version’)

We create a header division, and use the bloginfo Template Tag to dynamically display the title (name) and tagline (description) of the website.  We also display the version of WordPress in the footer division.  The header.php and footer.php files have been trivially updated.

This brings us to the final item we want to highlight in this installment.

When we made the simple00 theme, we added some styles to the theme’s style.css file.  However, this had no effect on what was displayed in the browser.  Not surprising, since we did not explicitly link it – or any other style sheet – to the content to be displayed.

We know the style-sheet lives in the theme directory.  As expected there is a Template Tag we can use to create a reference to the style-sheet’s location.

  •  get_stylesheet_directory_uri()

This tag is used in the head section to load the correct style-sheet (see header.php below).

browser output

and here are the files that support this.

header.php

<!DOCTYPE html>
<html>
<head>
<title>WordPress Simple Theme 01</title>
<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
 <p>&nbsp;</p>
 <p class="site_name"><?php bloginfo('name'); ?></p>
 <p class="site_description"><?php bloginfo('description'); ?></p>
</div>

footer.php

<div id="footer">
 <p class="poweredby">Powered by WordPress <?php bloginfo('version'); ?></p>
</div>
</body>
</html>

style.css

/*
Theme Name: Simple 01
Theme URI: http://www.drmagu.com/
Description: The Simplest theme for WordPress.
Author: DrMagu
Author URI: http://www.drmagu.com/
Version: 1.0
Tags:
License:
License URI:
General comments (optional).
*/
p {font-family:Arial, Helvetica, sans-serif; font-size: 12px; }
h1 {font-size: 18px; color: #33c; }
h2, h3, h4, h5, h6 {color: #33c; }
blockquote {
 font-size: 14px; color: #933; font-weight: bold; font-style: oblique;
}
#footer .poweredby {
 font-family: Georgia, "Times New Roman", Times, serif;
 font-size: 10px;
 font-style:italic;
}
#header {
 background-color:#336;
 color: #CF9;
 height: 120px;
}
#header .site_name {
 font-size: 16px;
 font-weight:bold;
 margin-top: 18px;
 margin-left: 18px;
 margin-bottom: 18px;
}
#header .site_description {
 font-size: 14px;
 font-style: italic;
 margin: 24px;
}

Recap – and What Next

We introduced Template Tags as a way to connect to the WordPress engine and render content we are interested in.  We also split the index.php Template file into three parts, to wit: header.php, index.php and footer.php.  The header and footer parts are included through the use of the Template Tags <?php get_header(); ?> and <?php get_footer(); ?>.

The simple01 theme  is still a very simple theme, consisting of an index.php and style.css file only.  Rendered content is controlled by index.php and the Template Tags used there.  The look and feel is governed by the style.css which is properly included in the index.php template file through the proper use of Template Tags.

In the next installment we will look at the the PAGE content type, and how we can get it to display.  This will give us an opportunity to introduce the WordPress Query functions.  It will also provide a natural way to introduce the WordPress Template Hierarchy.

 

Pages: 1 2 3

One Response to “WordPress Themes .. Displaying Content”

  1. […] the WordPress .. Displaying Content article we introduced WordPress Template Tags, and showed how they are used in index.php to […]

Leave a Reply

You must be logged in to post a comment.