Time for action – getting your CSS styles to show up

The first of the two options discussed previously is better practice, and is what we're using in our stylesheet.

  1. First, find the call to the stylesheet—in our theme it's as follows:
    <link media="all" rel="stylesheet" type="text/css" href="style.css" />

    As you can see, we've also specified a few extra parameters for our stylesheet.

  2. Replace the href attribute with following WordPress template tag: bloginfo('stylesheet_url') like so:
    <link media="all" rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'), ?>" />

What just happened?

Congratulations! That's your first bit of WordPress code! It's a template tag called bloginfo() that can actually be passed several parameters, as we'll discover throughout this book. You should now see your styled mockup, when you point your browser at your WordPress installation:

What just happened?

Understanding WordPress template tags and hooks

In the upcoming sections, we'll run into many more template tags and a few API hooks that will help our template play well with plugins. Let's go over the basics of template tags and hooks.

Template tags

Template tags are most commonly used in templates to help you retrieve, and most importantly display information from your WordPress CMS into your theme design. If you delve more deeply into WordPress development, you'll find that most template tags have a similar function in the WordPress system. The difference between the template tag and its corresponding function is that template tags have a return built in to them so they'll automatically display the WordPress content. The function will not display the content unless you specifically use a PHP echo or print command. For example, the template tag which reads:

<? php the_author_meta( 'name' );?>

would have the same result as the following function:

<? php echo get_author_meta( 'name' );?>

WordPress functions can also prove useful for when you don't want content to display right away, say for special scripts that you write in your template's function.php file, which we'll get into in the next chapter or if you start developing custom plugins to add extra functionality to WordPress.

Some template tags can also be used to include or call in other template files, as we'll see later in this chapter.

The bloginfo() template tag is a typical example of a tag that can be passed a parameter. In the previous section, we passed it the stylesheet_url parameter, to make sure we targeted our style.css page, but in other parts of our template we may wish to pass that template tag the name parameter or the version parameter. It's up to you where and how you might want to use a template tag. For a list of parameters of this tag, see http://codex.wordpress.org/Function_Reference/bloginfo.

Hooks

Hooks are part of the plugin API and are mostly used by WordPress plugin developers to access and manipulate WordPress CMS data, then serve it up or activate at certain points in the theme, for that theme's use. Your theme does need some preparation in order to work with most plugins.

Hooks include action hooks, which are used for adding content or functions, and filter hooks, which are used to manipulate the way data is output. You don't need to worry about the difference between these for now.

The most important hook we'll work with is the wp_head() hook. This allows plugins to activate and write information in your WordPress theme's header files, such as CSS links to any special CSS the plugin might need or JavaScript files the plugin might use to enhance your site. We'll take a look at a few other hooks later in this book that will enhance our theme and make sure it's plugin-ready.

Looping it! – The WordPress Loop

After the bloginfo template tag, the next (and probably the most important) bit of WordPress code to add to our theme is the Loop. The Loop is an essential part of your WordPress theme. It displays your posts in chronological order and lets you define custom display properties with various WordPress template tags and queries wrapped in your HTML marup.

The Loop in a nutshell – how it works

The following illustration shows how the Loop is constructed, and how it pulls in posts from the WordPress database to construct the post content of a site:

The Loop in a nutshell – how it works

Tip

Really get to know the Loop

The Loop is one of those core pieces of WordPress PHP code you should brush up on. Understanding how the Loop works in WordPress is incredibly helpful in letting you achieve any special requirements or effects of a custom professional template. To find out more about The Loop, its uses in the main index file and other template files, and how to customize it, check out the following links on the WordPress codex:

http://codex.wordpress.org/The_Loop_in_Action

http://codex.wordpress.org/The_Loop

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset