Customizing WordPress Themes

Twenty Twelve Theme

This is one example of a basic theme that has been changed. As you can see, you can change a theme into almost anything you want.

What we’ll cover:

1) Preparation

2) Process1) Using theme tools2) CSS3) Footer & Favicon updates

3) Review

Preparation

What you need to get started:

-Site with WordPress installed and theme close to what you are looking for.

-FTP access to site

-Image editing software (i.e. Photoshop)

-Knowledge of CSS

-Backup copy of the original theme. (Just in case)

Don’t make changes on a live site!

Use a development site like sub-domain or folder within your site, or set up on a server that is not yet active.

If a customer has a domain name and hosting, but not a current site, I recommend the Maintenance Mode Plugin http://sw-guide.de/wordpress/plugins/maintenance-mode/, so that you can Build the site and Experiment before the site goes live. This plugin puts up a “Coming Soon” notice for all visitors who are not logged in.

Tip:

Some helpful tools:

I recommend using ColorPic for Windowshttp://www.iconico.com/colorpic/ to help you choose colors and find their hex code. This can help you match logo colors. Or Color Picker for Mac.

Measurements:

There are a couple good add-ons/extensions for Chrome & FF including MeasureIt! and Page Ruler. They can be a big help in determining sizes.

CSS Button Maker

http://www.cssbuttongenerator.com/ This is an incredible resource for creating

professional looking buttons.

Backup files!

Not only before you begin, but as you make changes. You can use a text editor like notepad to copy & paste the file you’re working on, but you can also use ftp to copy all the files over.

Understanding how WordPress works:

The theme tells WordPress how to display data.

The actual data (posts & pages) are stored in the MySqL database.

Within the theme, there are CSS files and PHP files.

The CSS files tell the theme how to look.

The PHP files tell the theme what to do (ie where to put what content from the database.)

Theme Database

CSS PHP

These files are broken into sections to match the website.

header.php -includes logo and

navigationindex.php or home.php -home pagepage.php - single pagessidebar.php -can be on either sidefooter.php

And the style sheet:

This section requires knowledge of CSS. If you have a good theme, it will be broken into logical categories, header, sidebar, footer, etc. with good commenting in the code.

Importance of using Child ThemesIf you decide to make changes to a default theme like Twenty Twelve,

keep in mind that it will be updated and you don’t want to lose your changes. Therefore, you need to rename the theme or create a child theme.

1) WordPress Child Themes are located in /wp-content/themes/ like any other WordPress Theme.

2) They’re activated from the WordPress admin like any other theme.

3) They’ll always have a style.css file and may often include a functions.php file.

4) They’re just like any other WordPress theme, except they don’t need any other files.

Inherits traits of Parent Theme

To create such a theme, you must specify a template to inherit. We need to make an appropriately named directory in /wp-content/themes/ for our new child theme. That gives us /wp-content/themes/child-theme-name/.

In that /child-theme-name/ directory create a new file called style.css. Open style.css up in your favorite text editor. Copy the following style sheet header into style.css and save the file.

/*Theme Name: ChildThemeDescription: A child theme for 2010 themeTemplate: twentyten (case sensitive)Author: Laura HartwigLicense: GNU General Public License*/@import url("../twentyten/style.css");

For the functions.php file, simply copy this code to create a new file:

<?php// This theme uses wp_nav_menu() in one location.register_nav_menus( array(

'primary' => __( 'Primary Navigation', 'twentyten' ),

) );?>

Important to Remember about Child Themes:

If in the original style.css you have :#colophon { border-top: 2pt solid #000; }

Simply removing the border-top: 2pt solid #000; part will NOT remove the border – you would need to have the following none value to override the original style.css:

#colophon { border-top: none; }

Find out more info about Child Themes here:http://codex.wordpress.org/Child_Themes

ProcessLet’s begin!

Theme Tools

Let’s make changes the easy way first:

Many WordPress themes now allow you to easily change your

• Header• Menu• Background

You’ll notice that the suggested size for the header is 960x250 for this theme. I wanted to use only 150px tall. Sometimes you must change the setting for the header in the style.css file or the functions.php file, but this theme adjusts automatically.

Of course, you’ll see that it inserted the image below the navigation. We want to move it back on top. Go to

Appearance > Editor > Header.php

MenusDoes everyone know how to use the custom

menus?

You can also change the background the same way if

this is an option.

CSS

If you are using a theme that doesn’t offer a header image customization, you can find the image

info in the style.css file. Usually:

#header {background: #73a0cf url(‘images/header.jpg’);

}Or, in the 2012 theme:.header-image

Background color:

For 2012 theme, it is under

body {background-color: (keep in mind there may be more than one “body”)

CSS Help:

“Inspect Element” on Google Chrome

Firebug Add-on for Firefox or Chrome to help decipher css.

You can use these methods to change font color & size, page title, navigation, sidebar, h tags, really anything.You can also use CSS to change spacing.

Remember that yellow indicates margins and purple indicates padding.

Also keep in mind that changing the CSS will change that item for the entire site.

Web Safe Fonts

List of web safe fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp

Remember that just because that font on your computer looks great on your site, that may not be what everyone else is seeing. If people don’t have that font installed on their computer, they won’t see it. There are a very few fonts that are on every computer.

Google Fonts

http://www.google.com/fonts/

1) Select the font you like and choose “Quick Use”

2) Add the @import code to your style sheet near the top. (make sure it is not in the commented out section)

3) Integrate the font adding the font-family to your element.

4) If there are more than one width you would like to use, be sure to add that.

For my example, I put this in my style.css sheet: @import url(http://fonts.googleapis.com/css?family=Chela+One);

H Tags

This is one of the most under utilized options I see. Most themes have already stylized your H Tags for you. Plus, this is good SEO practice.

But we can do better.

First, customize your CSS in your style.css file

Footer

Customizing text on footer: footer.php

Part one- site info:

<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' ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentytwelve' ), 'WordPress' ); ?></a>

</div><!-- .site-info -->

Remove that highlighted line and add

<div class="site-info"><?php do_action( 'twentytwelve_credits' ); ?>

Put your custom text here. </div><!-- .site-info -->

Favicon

Changing the favicon:

a) First you need a favicon file. Start by creating it with your photo editing software. To make things easier, make a square file ( I like to use 48px by 48px). You can save it as any type of image, jpg, png, gif. , but name the file “favicon”.

b) Then I like to use

http://tools.dynamicdrive.com/favicon/ to actually create the .ico file. Simply upload your image, and then download the file it returns.

c) upload your favicon.ico file into your root directory or the images file of your root directory.

d) add this to the header.php file if not already

there:<link rel="icon"

href="http://www.YourDomainName.com/favicon.ico" type="image/x-icon" />

I like to put it in next to the other link files like<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />

e) Some themes already have a favicon with them. In that case, you will need to locate the file, usually

– wp-content/theme/yourtheme/images and

replace the old file with your own. Sometimes there is a caching issue and you won’t see your new favicon right away, but try another browser or computer to double check.

Don’t Forget

Test in different browsers and make sure you are W3C

compliant(http://validator.w3.org/).

Download this presentation:

Laura@MarkNetGroup.com845-206-9908

Follow me for more tips:

Contact me:

https://www.facebook.com/laurahartwigdesignhttp://wpdecoder.com/

http://wpdecoder.com/the-basics/customizing-themes/