A Basic Editing Example

By this point, you’ve digested a fair bit of WordPress theory. It’s time to capitalize
on that by editing a template file.
You’ll begin with an example that seems simple enough. You want to remove the
“Proudly powered by WordPress” message that appears at the bottom of every
page on your site, just under the footer widgets (Figure 13-15). (It’s not that you’re
embarrassed by WordPress. You just can’t help but notice that none of the other
big-gun WordPress sites have this message slapped on their pages. Sometimes,
being professional means being discreet.)

STEP 1. FIND THE TEMPLATE FILE
Start by examining the list of templates in Table 13-2. In this case, the footer.php
file is the obvious candidate. It creates the entire footer section, widgets and all,
for every page.

STEP 2. CREATE A COPY OF THE TEMPLATE FILE
Once again, you need to start with a child theme (page 462). If you don’t, you can
still customize the footer, but your hard-won changes will vaporize the moment you
install a theme update.
Here’s where things get a bit more awkward. As you know, WordPress templates are
really a collection of many template files. To change a template, you need to figure
out the changes you want to make to your pages, and then find the template file
responsible for that part of the page (single.php, comment.php, and so on). Then
you add a new version of that template file to the child theme. That new template
will override the one in the parent theme.
You do this by copying the template file you want to edit from the parent theme to
your child theme and then making your changes. In this example, that means you
need to copy the footer.php file in the twentytwelve folder and paste it into the
twenty-twelve-reboot folder.

NOTE The child theme’s version of a template completely overrides the parent theme’s copy of the template.
In this example, that means WordPress ignores the original version of the footer.php file, which is in the original
theme folder (twentytwelve). You can refer to it anytime to check the code or copy important bits, but WordPress
won’t run the code anymore.

STEP 3. EXAMINE THE TEMPLATE FILE
Footer.php is one of WordPress’s simpler template files. But even simple templates
have a fair bit of boilerplate to wade through.
In this section, you’ll look at the entire contents of footer.php. You don’t always need
to take this step, but it’s good practice when you’re just starting out and trying to
make sense of WordPress’s template system.
If you’ve written web pages before, you probably know that programming code,
like JavaScript, needs to be carefully separated from the HTML on the page. The
same is true for PHP, although it has its own special syntax. Every time a block of
PHP code appears, it starts with this:
<?php
Similarly, the following character sequence marks the end of a block of PHP code:
?>
You can see this system at work at the very beginning of every template file, where
there’s a block of PHP that has no real code at all, just a long comment. The comment
lists some basic information about the template. Here’s what you see in footer.php:
<?php
/**
* The template for displaying the footer.
*
* Contains footer content and the closing of the #main and #page div elements.
*
* @package WordPress
* @subpackage Twenty_Twelve
* @since Twenty Twelve 1.0
*/
?>
The next line is a puzzling bit of HTML that looks like this:
</div><!– #main .wrapper –>
Even seasoned HTML veterans will be a bit thrown off here. The </div> tag closes
a <div> element. But you haven’t seen an opening <div> tag, so this code snippet
seems a bit strange.
It makes more sense when you remember the way WordPress stitches together a
page, as shown in Figure 13-14. The <div> element was opened, but it happened when
WordPress processed an earlier template file (header.php). The HTML comment in
the line above (<!–#main .wrapper –>) is WordPress’s way of reminding you that
the </div> in that line is the closing element for a <div> that has the ID main and
the class .wrapper. In other words, it’s the closing element for the <div> that holds
the main content of the page.

The next line of HTML is easier to interpret. It identifies the beginning of the footer
content. This section has the ID colophon, which you might remember from Table 13-1.
<footer id=”colophon” role=”contentinfo”>
The next line starts a new <div> element and gives it the ID site-info. The creators of
the Twenty Twelve theme chose that name because this is the section of the page
that indicates some basic information about how the site was created (in other
words, “Proudly powered by WordPress”).
<div id=”site-info”>
The next bit is another block of PHP code, but it’s compressed into a single line:
<?php do_action( ‘twentytwelve_credits’ ); ?>
The do_action() function is a WordPress feature found throughout its template
files. It’s a notification mechanism—it signals when something is about to happen
(for example, that the page credits are about to be shown). Hardcore WordPress
developers can write instructions that react to one of these notifications, but the
do_action() function is no help in your mission to change the footer.
NOTE A function is a block of programming code stored somewhere other than the page it appears on.
WordPress is full of useful functions, and do_action() is one of many. To browse the full catalog of functions
and find out what they do, visit http://tinyurl.com/func-ref.
The section that appears after the do_action() function is the part of the footer
template you’ve been looking for. It’s a link that displays the “Proudly powered”
message:
<a href=
“<?php echo esc_url( __( ‘http://wordpress.org/’, ‘twentytwelve’ ) ); ?>”
title= “<?php esc_attr_e( ‘Semantic Personal Publishing Platform’,
‘twentytwelve’); ?>” rel=”generator”>
<?php printf( __( ‘Proudly powered by %s’, ‘twentytwelve’ ),
‘WordPress’); ?>
</a>
The markup looks a bit complicated, because there are three PHP code statements
embedded inside the <a> element. The first one generates the actual link address,
the second one generates the title, and the third one generates the text inside the
<a> element. You don’t need to understand exactly how these statements work to
realize that this is the part you want to change. But first, scan through the rest of
the footer template to make sure you understand what’s going on.
It’s pretty straightforward. First, footer.php closes the <div> and <footer> elements.
Then it closes another <div> that represents the entire page.
</div><!– .site-info –>
</footer><!– #colophon –>
</div><!– #page –>

Next, the footer template triggers WordPress’s wp_footer() function.
<?php wp_footer(); ?>
This is a bit of WordPress infrastructure. Many plug-ins wait for this call and then
do something important. Removing this line can cause those plug-ins to break, so
it’s best to leave it in, even though it isn’t doing anything right now.
Finally, the template closes the <body> and <html> elements, proving that you
have really and truly reached the end of the page. WordPress won’t call any more
templates into action, or add any more content after this point.
</body>
</html>
STEP 4. MAKE YOUR CHANGE
Now you’ve found the culprit—the piece of the WordPress template you want to
change. In this example, it’s a single <a> element.
You could delete the <a> element completely, or you can replace it with some text
of your own, like this:
&copy; Copyright 2014 Magic Tea House
The &copy; is a character entity, an HTML code that inserts a special character—in
this case, a copyright symbol.
If you consider yourself a bit of a PHP whiz, you can get fancier in your footer. For
example, instead of sticking in the current year for the copyright notice, you could
ask PHP to do that for you.
First, you need to explicitly tell WordPress that you need PHP’s help. You do that by
adding the <?php and ?> character sequences. You’ll put your code inside.
&copy; Copyright <?php [ Your code goes here. ] ?> by Magic Tea House
Next, you need a PHP command. In this case, it’s the trusty echo command, which
means (in PHP language) “take the result of the next statement, and spit it out onto
the page.”
&copy; Copyright <?php echo ?> by Magic Tea House
But what exactly do you want to spit out? That’s the current date, which you can fetch
with the help of a function built into the PHP language, called date(). Unsurprisingly,
the date() function displays the current date. But by supplying the capital letter Y,
you tell the date() function that you’re interested only in getting the current year.
&copy; Copyright <?php echo date(‘Y’); ?> by Magic Tea House
Like every line of PHP code, you indicate the end of a statement by adding a semicolon
at the end (;)
This completes the example, and drives home a clear point: Even the most straightforward
theme-editing tasks require a bit of slogging.

TIP Since the changes you need to make to the footer.php template are relatively small in this example, it’s
easy enough to do all your editing in the dashboard. For more significant changes, you may want to copy the
theme file to a text editor on your computer, work with it there, and then copy it back to the Edit Themes page
when you finish. And if you decide to edit a theme on your computer, it’s worth considering a text editor that has
a few more frills. For example, Windows users can grab the free Notepad++ program (http://notepad-plus-plus.
org), which uses color-coded text to distinguish the different ingredients in PHP code.

Advertisements
A Basic Editing Example

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s