Entering Code into Your WordPress Template File - dummies

Entering Code into Your WordPress Template File

By Lisa Sabin-Wilson

If you are customizing your WordPress blog theme by using HTML code, adding the template tag to your WordPress theme will smooth the appearance of your blog after you have assigned a name and value to your Custom Fields. This example shows how to customize the default WordPress theme Twenty Twelve.

If you’re using a different theme (and you can find thousands of different WordPress themes available), you need to adapt these instructions to your particular theme.

Follow these steps to add the template tag, along with a little HTML code to make it look nice, to your theme:

  1. Log in to your WordPress Dashboard.

  2. Click the Editor link on the Appearances menu.

    The Edit Themes page loads in the Dashboard.

  3. Locate the template files for your theme (in this case, Twenty Twelve).

    The available templates are listed on the right side of the Edit Themes page.


  4. Click content.php in the list of templates.

    The content.php template opens in the text editor on the left side of the screen, where you can edit the template file.

  5. Scroll down and locate the template tag that looks like this: <?php the_content() ?>.

  6. On the new line underneath the preceding one, type this:

    <p><strong>My Current Mood is:</strong><em>

    <p> and <strong> open the HTML tags for paragraph and bold text, respectively; followed by the words to display in your template (My Current Mood is:). <em> opens the HTML tag for italics style text, which gets applied to the value. (The </strong> HTML tag closes the bold text display.)

  7. Type the PHP that makes the custom field work:

    <?php $key="mood"; echo get_post_meta($post->ID, $key, true); ?>
  8. Type </em></p>.

    This code closes the HTML tags you opened in Step 6.

  9. Click the Update File button.

    Located at the bottom of the Edit Themes page, this step saves the changes you made to the content.php file and reloads the page with a message that says your changes have been successfully saved.

  10. View your post on your site to see your Custom Field data displayed.


    The data should look just like the My Current Mood is: Happy message.

WordPress now displays your current mood at the bottom of the posts to which you’ve added the mood Custom Field.

The entire code, put together, should look like this in your template:

<p><strong>My Current Mood is:</strong> <em><?php $key="mood"; echo get_post_meta($post->ID, $key, true); ?></em></p>

The code is case sensitive, which means that the words you input for the key in your Custom Field need to match case with the $key in the code. For example, if you input mood in the Key field, then the code needs to be lowercase, as well: $key=”mood”. If you attempt to change the case like this: $key=”Mood”, the code won’t work.

You have to add this code for the mood Custom Field only one time; after you add the template function code to your template for the mood Custom Field, you can define your current mood in every post you publish to your site by using the Custom Fields interface.

This example is just one type of Custom Field that you can add to your posts.