Simple Steps to Modify the Look and Feel of Your Site

1. Twenty Twelve Theme

2. 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.

3. 1) Preparation
2) Process
1) Using theme tools
2) CSS
3) Footer & Favicon updates
3) Review

5. -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)

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

7. 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:

9. I recommend using ColorPic for Windows
http://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.

10. 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.

11. http://www.cssbuttongenerator.com/
This is an incredible resource for creating
professional looking buttons.

12. 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.

13. 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

14. header.php
-includes logo and
navigation
index.php or home.php
-home page
page.php
- single pages
sidebar.php
-can be on either side
footer.php

15. 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.

16. If 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.

17. 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/.

18. 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: ChildTheme
Description: A child theme for 2010 theme
Template: twentyten (case sensitive)
Author: Laura Hartwig
License: GNU General Public License
*/
@import url("../twentyten/style.css");

19. <?php
// This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
'primary' => __( 'Primary Navigation',
'twentyten' ),
) );
?>

20. 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; }

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

25. Many WordPress themes
now allow you to easily
change your
• Header
• Menu
• Background

27. 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.

28. 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

30. Does everyone know how to use the custom
menus?

31. You can also change the
background the same way if this
is an option.

33. 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

34. For 2012 theme, it is under
body {background-color:
(keep in mind there may be more than one “body”)

35. “Inspect Element” on Google Chrome

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

39. 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.

40. 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.

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

42. 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);

43. 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.

44. But we can do better.
First, customize your CSS in your style.css file

46. 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 -->

47. <div class="site-info">
<?php do_action( 'twentytwelve_credits' ); ?>
Put your custom text here.
</div><!-- .site-info -->

49. 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”.

50. 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.

51. d) add this to the header.php file if not already there:
<link rel="icon"
href="http://www.YourDomainName.com/favico
n.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' ); ?>" />

52. 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.

54. Test in different browsers and make
sure you are W3C compliant
(http://validator.w3.org/).

55. Laura@MarkNetGroup.com
845-206-9908
https://www.facebook.com/laurahartwigdesign
http://wpdecoder.com/
http://wpdecoder.com/the-basics/customizing-themes/