post

How To Edit The Footer Of 2012 WordPress Theme

edit-wordpress-footer-file
The footer of the WordPress Theme used to be one piece blog real estate that gets the least attention from blog owners as well as blog readers. The footer area gets scant attention simply because it was quite difficult to insert contents to that area. The arrival of WordPress Widgets changed that. Suddenly it became super easy to add whatever you want into your WordPress Footer.

However, I’m not a big fan of Footer Widgets or inserting unnecessary items in my blog footer. What I need are just the copyright statement and maybe a few important but “no need to be visibly seen” links.

Furthermore, not all WordPress Themes has Footer Widgets activated or coded in. Even if they have, you will still have to edit the links in the original footer if you want to add links of your own.

Inserting these with the Catalyst Theme is, as in inserting any other elements, a no-brainier because it is very easy to create a personal widget then simply hook it to the Footer. Doing it with other Themes might take a little bit of extra work, but no worries, it is not too difficult either.

Again, I will be using the footer of the 2012 WordPress Theme as an example. It is perfect for this tutorial because the footer of this Theme only has one simple link to WordPress.org

Editing The TwentyTwelve Theme Footer Text And Links

You can either do this directly from the original footer.php file in your Theme Editor or you can do it via a Child Theme. I will advocate the latter as it will prevent the file from being overwritten every time there is a WordPress update.

Refer to my previous post on how to create a 2012 Child Theme. Once you have that done and activated, follow these steps.

Using your favorite FTP client, log in to your server and navigate to your domain, then to your Themes Folder in Wp-Content. Open the original TwentyTwelve Theme folder. Make a copy of the original footer.php file.

Close the TwentyTwelve folder, then in that same directory, open your Child Theme folder. Paste the copy of the footer.php file within that folder.

Back to your Wp Dashboard go to Themes – Editor. You should see the footer.php file on the right. Click to open that file in the editor.

You are now ready to edit and insert extra information and links.

Deleting The WordPress Link

As a WordPress user, it is good ethic to keep the link to WordPress.org to show some love for the platform which you are allowed to use for free. This is especially so if you are using a free WordPress Theme like 2012. However, many would choose to delete the link. This is easily done.

Below are the exact codes you will find in the default footer file of the 2012 WordPress Theme. If you have copied the right file, it should also be the same in your Child Theme.

<?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
 */
?>
	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
		<div class="site-info">
			<?php do_action( 'twentytwelve_credits' ); ?>
			<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>
		</div><!-- .site-info -->
	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>

To delete the WordPress link, simply highlight and delete Line 17. Make sure you delete from the opening “a href” tag till the closing “a” tag and nothing else. As this is a php file, even a missing colon or comma will break your Theme.

Click Save and Refresh your Site. The WordPress link should now be gone.

Adding The Copyright Statement

Surprisingly, the Twenty Twelve Theme does not include this by default. To add in the copyright statement insert this line to the location where you deleted the WordPress link.

Copyright &copy; 2009 - <?php echo date('Y'); ?>

Change the year 2009 to the year you started. The current year will update dynamically with each changing year.

Adding Extra Links

Many would also like to add some links to their footer. This could be navigation links or links to your social profile and so on. This is quite straight forward.

Immediatly after the copyright codes, add in the break tag “br” to have the links appear in a new line.

You then simply add in whatever links and anchor text you want, like so;

<a href="http://google.com">Google</a> | <a href="http://facebook.com">Facebook</a> | <a href="http://twitter.com">Twitter</a> 

Save again and refresh. You should see your links just below your copyright statement. If you want them to appear above the copyright statement, simple insert them above the codes for the copyright.

Styling The Footer Text And Links

By default, the text and links will be aligned to the left. If you prefer, you can also align them to the right or to the center.

In your Child Theme’s Style Css file, create a new div selector. Call it whatever you want.I called mine simply, footlinks. To align the text to the center use the center attribute.
Example:

.footlinks {
	text-align:center;
}

Now go back to your footer.php file. Immediately before the line for the copyrights, insert this tag.

<div class="footlinks">
 

Immediately After the all your newly added links, insert this to close the tag.

</div>

The new codes for your footer.php file should look like below. If you are doubtful, you can copy and paste these codes directly into your footer file. Make sure you change those links and anchor text to where you are linking. Make doubly sure you have copied everything.

<?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
 */
?>
	</div><!-- #main .wrapper -->
	<footer id="colophon" role="contentinfo">
		<div class="site-info">
			<?php do_action( 'twentytwelve_credits' ); ?>
<div class="footlinks">
Copyright &copy; 2009 - <?php echo date('Y'); ?>
</br> 
<a href="http://google.com">Google</a> | <a href="http://facebook.com">Facebook</a> | <a href="http://twitter.com">Twitter</a>
</div><!--footlinks-->
 
		</div><!-- .site-info -->

	</footer><!-- #colophon -->
</div><!-- #page -->

<?php wp_footer(); ?>
</body>
</html>



advertisements
Divi WordPress Theme
728x90 V3