My journey to WordPress began by learning basic HTML, laboriously typed out in Notepad. Over the years I added CSS, then some JavaScript, to gain a bit of interaction with website viewers. File “includes” for reusable page elements like a header and footer, or a menu, made building websites a bit more streamlined—though I still did a lot of hand-coding—and I was comfortable with it. I knew of the existence of WordPress, and CMS systems, and eventually the day came when I sat down and committed to learning WordPress so I could turn over sites to clients and they could update their own content, rather than call me for changes.
It didn’t take long for me to realize that I would be creating customized child themes, most likely based on the WordPress included themes. In fact, the only way I could learn WordPress inside and out was to take a theme (at the time it was Twenty Ten), and create a child theme to customize. By working with a child theme, the parent theme files are not modified at all, and updates to the parent theme will not affect your child theme. You can modify the page and post templates, and create new templates. To do that, you need a good understanding of how the template files are put together, and how they fit together to create the pages you see when the website is viewed.
I plan to dissect some of the theme files in a series of articles, explaining (in basic, everyday terms) what they do and how you can modify them to affect changes on the resulting website that is displayed. The best way to learn, though, is to set up a child theme on your own server and play with it yourself, changing the code and experimenting to see what happens. I will briefly explain how to set up a child theme based on the Twenty Thirteen WordPress theme, and pick apart several (probably not all, but enough to give you a good start!) of the template files.
Child Theme Basic Setup
In order to create a child theme, you need to work with the WordPress core files and code, rather than the Dashboard and web interface. After installing WordPress, I set up the same file set on my local machine, and use FTP (FileZilla works wonderfully!) to upload the changed files to the server. For purposes of this discussion, we will be working specifically with wp-content/themes/twentythirteen and our child theme folder, wp-content/themes/childof2013.
The childof2013 folder will contain, at the very least, a style.css file, with information at the top of the file to tell WordPress this is a separate theme, based on the Twenty Thirteen theme. Anything we do not specifically change in our child theme styles will then fall back to the Twenty Thirteen parameters. The first few lines of the childof2013 style.css will look like this:
@import url('../twentythirteen/style.css');
/*
Theme Name: Child of Twenty Thirteen Theme
Description: Practice creating and experimenting with a child theme.
Template: twentythirteen (must be all lower case, match the folder of the parent theme)
*/
There are more descriptors you can add, though all you really need to designate are the Theme name and the style.css inside the childof2013 folder, and upload into the themes folder of your WordPress install. When you go to the dashboard now, you should see your Child theme listed as an option to activate. Activate the Child of 2013 theme, and at this point there will be no changes from the base Twenty Thirteen theme; it should look identical since we have made no changes and our theme falls back to the parent theme for everything. It’s time to start making some changes! We’ll start with the footer.php file, which contains the line “Proudly Powered by WordPress.” That’s okay, but I much prefer to credit my own business, or the company/client business.
FOOTER.PHP
The code for the footer file for Twenty Thirteen is relatively simple. We’ll dissect it line by line:
<?php /* Begins a comment, informational, does not “code” or do anything. * The template for displaying the footer. * Contains footer content and the closing of the * #main and #page div elements. This is the bulk of what concerns us. * * @package WordPress Informational * @subpackage Twenty_Thirteen Informational * @since Twenty Thirteen 1.0 Informational */ ?> </div><!-- #main --> /* Closes the #main div of the page being displayed. */ <footer id="colophon" role="content info"> /* Begins the actual “footer” of the page – we can change the look and behavior of the footer by editing the #colophon .site-footer elements in our style.css file. */ <?php get_sidebar( 'main' ); ?> /* Grabs the Main sidebar widget - whatever you have added in the “widgets” area will display here. */ <div class="site-info"> /* This is where the WP credits show up, and where I typically make changes to add my own business, or information for the client like address, phone, email, etc. */ <?php do_action( 'twentythirteen_credits' ); ?> /* You can create a new function to show your credits, or simply remove this and hardcode in your own information. */ <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentythirteen' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentythirteen' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentythirteen' ), 'WordPress' ); ?></a> /* For most of the sites I do, the anchor link is entirely removed and replaced by client information. Everything in the "site info" div is redone to suit the client I am working with. */ </div><!-- .site-info --> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
Once I have edited out the generic WordPress info and substituted my own information, I save the footer.php file to my own theme folder. In this case, to the themes/childof2013 folder.
When that is uploaded to my server, and I refresh the page in the browser, my child theme footer.php file is now the one being displayed on the site; everything else defaults to the parent theme, Twenty Thirteen.
Next we’ll tackle header.php, and continue with some of the template page files, like page.php, single.php, and others. As we go, we probably will be making changes to the style.css as well, as we customize the layout and colors and mood of the site. I’m trying to keep it simple and basic — but WordPress can get complex — and an understanding of PHP, CSS, and HTML is quite helpful in putting it all together.
Feedback and suggestions for what you need help with are more than welcome!
Sue Laren is a freelance website designer/developer living in the SF Bay Area (North Bay), married 33 years, with four grown children and two grandchildren. She taught computer lab (basic computer skills) at a local elementary school for many years, and in 2007 started her own web design business, Laren Net Works. Follow her on Twitter at @LarenNetWorks.
2 Comments