Introduction

Here you will find all you need to learn the basics of creating WordPress themes from scratch.

REMEMBER that these files can only be viewed on the internet. You CANNOT "View in Browser". PHP files can only be processed on a server that has the PHP module in place. The process below will require a lot of FTPing.

All of these files to be created will be in a root folder. On the server your root folder will be FTPed to the wp-content/themes directory.

CAUTION!!! Wordpress directories(folders) all have an index.php. If you FTP your index.php into the wrong folder, it will overwrite the one that should be there and your site most likely will crash. So be careful when you are moving your files.

Process

Essential Files

style.css

/*
Theme Name: MY THEME NAME
Theme URI: http: //www.MY PORTFOLIO SITE
Description: DESCRIPTION OF THEME
Author: MY NAME
Version: 1.0
License: GNU General Public LicenseTags:
*/

/*
1 - GENERAL IMAGE RELATED
2 - RESPONSIVE WIDTH CLASSES
3 - COLLAPSES DIV STRUCTURE ON NARROW DEVICES
4 - STYLES FLYOUT MENU
5 - GENERAL HORIZONTAL MENU STYLES
6 - GENERAL WORDPRESS WIDGET STYLES
7 - BEGIN YOUR GENERAL STYLES FOR
*/

/*
@@@@@@@@@@@@@@@@@ 1 - GENERAL IMAGE RELATED
*/

*html .clearfix {
   height: 1%;
}
.clearfix {
   display: block;
}
img.alignright {
   float: right;
   margin: 0 0 1em 1em}
img.alignleft {
   float: left;
   margin: 0 1em 1em 0}
img.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto}
a img.alignright {
   float: right;
   margin: 0 0 1em 1em}
a img.alignleft {
   float: left;
   margin: 0 1em 1em 0}
a img.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto}
a:active {
   outline: none;
}

/*
@@@@@@@@@@@@@@@@@ 2 - RESPONSIVE WIDTH CLASSES
*/

.fluid_01 {
   width: 8.33333%;
}
.fluid_02 {
   width: 16.66666666%;
}
.fluid_03 {
   width: 25.0%;
}
.fluid_04 {
   width: 33.333%;
}
.fluid_05 {
   width: 41.666666%;
}
.fluid_06 {
   width: 50.00%;
}
.fluid_07 {
   width: 58.33333%;
}
.fluid_08 {
   width: 66.666666%;
}
.fluid_09 {
   width: 75%;
}
.fluid_10 {
   width: 83.333%;
}
.fluid_11 {
   width: 91.666%;
}
.fluid_12 {
   width: 100%;
}
.nested {
   margin: 10px;
}
.thumbnail img {
   max-width: 100%;
   height: auto;
}

.twenty {width: 20%;height:auto} .twentyfive {width: 25%;height:auto} .thirty {width: 30%;height:auto} .thirtyfive {width: 35%;height:auto} .forty {width: 40%;height:auto} .fortyfive {width: 45%;height:auto} .fifty {width: 50%;height:auto} .fiftyfive{width: 55%;height:auto} .sixty {width: 60%;height:auto} .sixtyfive {width: 65%;height:auto} .seventy {width: 70%;height:auto} .seventyfive {width: 75%;height:auto} .eighty {width: 80%;height:auto} .eightyfive {width: 85%;height:auto} .ninty {width: 90%;height:auto} .nintyfive {width: 95%;height:auto} .onehundred {width: 100%;height:auto} .hundred {width: 100%;height:auto}

#header,
#footer,
#container {
   position: relative;
   background-size: 100%;
}

/*
@@@@@@@@@@@@@@@@@ 3 - COLLAPSES DIV STRUCTURE ON NARROW DEVICES
*/

@media screen and (min-width: 0px) and (max-width: 479px) {
   .fluid_01,
.fluid_02,
.fluid_03,
.fluid_04,
.fluid_05,
.fluid_06,
.fluid_07,
.fluid_09,
.fluid_08,
.fluid_10,
.fluid_11,
.fluid_12 {
   display: block;
   float: none;
   min-width: 100%;
}
}

/*
@@@@@@@@@@@@@@@@@ 4 - STYLES FLYOUT MENU
*/

/*Background of right side when Menu is open*/
html.mmenu-opened #mmenu-blocker {
   background-color: #eee;
}
.mmenu {/*Background of left large menun bar*/
background-color: #000;
}
.mmenu li {/*hr between menu items on left nav*/
border: none;
   border-top: 1px solid #333;
   border-bottom: 1px solid #222;
}
.mmenu li > a:link,
.mmenu li > span,
{/*Rest state on Large Nav*/
color: #eee;
}
.mmenu li > a:visited {/*visited state on Large Nav*/
color: #eee;
}
.mmenu li > a:hover {/*Hover state on Large Nav*/
color: #ccc;
}/*Background of active button on left bar*/
.mmenu li.mmenu-selected > a,
.mmenu li.mmenu-selected > span {
   background-color: #369;
}
/*Background arrow indicating there is sub menus when button is selected*/
.mmenu li.mmenu-selected > a.mmenu-subopen {
   background-color: #369;
}
/*left border indicating there is sub menus when button is selected*/
.mmenu a.mmenu-subopen {
   border-left: 1px solid #111;
}
/*top button to close menu*/
.mmenu a.mmenu-subclose {
   background-color: #369;
}
/*Arrows*/
.mmenu a.mmenu-subopen:after,
.mmenu a.mmenu-subclose:before {
   border: 4px solid rgba( 255,
255,
255,
0.5 );
   border-left: none;
   border-top: none;
}

/*
@@@@@@@@@@@@@@@@@ 5 - GENERAL HORIZONTAL MENU STYLES
*/

/* Functionality */

#menunav,
#menunav ul {
   margin: 0;
   padding: 0;
   list-style: none;
}
#menunav ul.menu li {
   float: left;
   margin-left: 1px}
#menunav ul.menu li:hover {
   position: relative;
}
#menunav ul.menu li:hover > ul {
   visibility: visible;
}
#menunav ul.menu ul {
   visibility: hidden;
   position: absolute;
   Z-index: 999;
   left: -1px;
}
#menunav ul.menu ul li a:link {
   display: inline-block;
   text-align: left;
}

/* Style */

#menunav {
   position: absolute;
   top: 220px;
}
#menunav ul.menu ul li a:link {
   width: 160px;
   margin-top: 8px}/* STYLES DROPDOWNS */
#menunav ul.menu ul ul {
   left: 160px;
   top: 0px;
}

/* POSITIONS SECOND+ DROPDOWNS */
#menunav .menu-item > a:link,
/* Main button Rest/Visited state */
#menunav .menu-ancestor > a:link,
#menunav .page_item > a:link,
#menunav .page_ancestor > a:link,
#menunav .menu-item > a:visited,
#menunav .menu-ancestor > a:visited,
#menunav .page_item > a:visited,
#menunav .page_ancestor > a:visited {
   font-family: sans-serif;
   text-decoration: none;
   padding: 7px 25px;
   font-size: 14px;
   background-color: RED;
   color: YELLOW;
}
#menunav .menu-item > a:hover,/* Main button Hover state */
#menunav .menu-ancestor > a:hover,
#menunav .page_item > a:hover,
#menunav .page_ancestor > a:hover {
   background-color: BLUE;
   color: GREEN;
}
#menunav .current-menu-item > a:link, /* Current button Rest/Visited state */
#menunav .current-menu-ancestor > a:link,
#menunav .current_page_item > a:link,
#menunav .current_page_ancestor > a:link,
#menunav .current-menu-item > a:visited,
#menunav .current-menu-ancestor > a:visited,
#menunav .current_page_item > a:visited,
#menunav .current_page_ancestor > a:visited {
   background-color: VIOLET;
   color: ORANGE;
}
#menunav .current-menu-item > a:hover, /* Current button Hover state */
#menunav .current-menu-ancestor > a:hover,
#menunav .current_page_item > a:hover,
#menunav .current_page_ancestor > a:hover {
   background-color: BROWN;
   color: YELLOW;
}

/*
@@@@@@@@@@@@@@@@@ 6 - GENERAL WORDPRESS WIDGET STYLES
*/

.cat-item a:link,/* ARCHIVES,PAGES,CATEGORIES LINKS */
.widget_recent_entries a:link,
.widget_archive a:link,
.widget_pages a:link,
.cat-item a:visited,
.widget_recent_entries li a:visited,
.widget_archive li a:visited,
.widget_pages a:visited {
   list-style-type: none;
   font-weight: normal;
   color: #fff;
   margin-left: -40px;
   text-decoration: none;
}
.cat-item a:hover,/* ARCHIVES,PAGES,CATEGORIES HOVER */
.widget_recent_entries li a:hover,
.widget_archive li a:hover,
.widget_pages a:hover {
   font-weight: normal;
   color: #eee;
}
.textwidget {/* TEXT WIDGET */
font-size: 14pt;
}
.widgettitle {/* SPACE ABOVE/AROUND THE TITLE BLOCKS */
width: 100%;
   margin-top: 10px;
   list-style-type: none;
   font-size: 14pt;
   padding: 8px 2px;
   background: #900;
   color: white;
   text-align: center}
li,
li.widget {
   list-style-type: none;
}
#calendar_wrap {/* BOX THAT HOLDS WHOLE CALENDAR */
padding-left: 30px;
}
#calendar_wrap caption {/* CALENDAR MONTH LABEL */
font-size: 14pt;
   font-weight: normal;
   color: #fff;
}
#calendar_wrap th {/* CALENDAR WEEKDAY LABEL */
font-size: 14pt;
   font-weight: bold;
   color: #eee;
   text-align: center;
   padding: 1px}
#calendar_wrap td {/* CALENDAR DATES UNLINKED */
font-size: 14pt;
   font-weight: normal;
   color: #ccc;
   text-align: center;
   padding: 1px}
#calendar_wrap a:link {/* CALENDAR DATES LINKED */
font-size: 14pt;
   font-weight: bold;
   color: #FFF}
#calendar_wrap a:visited {/*CALENDAR DATES LINKED */
font-size: 14pt;
   font-weight: bold;
   color: #FFF}
#calendar_wrap a:hover {/* CALENDAR DATES LINKED */
font-size: 14pt;
   font-weight: bold;
   color: #900}
textarea {
   background-color: #eee;
   border: 1px solid #008800;
}
input {
   background-color: #eee;
   border: 1px solid #008000;
}
.screen-reader-text {
   display: none;
}
#s {/* SEARCHBOX */
height: 22px;
   width: 100%;
   border: 1px solid #000;
   padding: 3px;
}
#searchsubmit,
#submit {/* SEACH BUTTON LINK */
background-color: #369;
   color: #ffffff;
   border: 1px solid #000;
   background-image: url(images/button_bg.jpg);
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   margin: 5px;
}
#searchsubmit:hover,
#submit:hover {/* SEACH BUTTON HOVER */
background-color: #000;
}
.form-allowed-tags {
   display: none}
.avatar {
   display: none}

/*
@@@@@@@@@@@@@@@@@ 7 - BEGIN YOUR GENERAL STYLES
*/

New Project

Create a file called style.css in your root folder. Paste the code to the left in it.

Change MY THEME NAME and all other text to customize the theme.

In order for Dreamweaver to see the fluid and nested classes, you will have to put the following code in the the index.html near the top.

Right-click image below and save in theme directory as screenshot.png.

Converting a Site already created to WordPress

If you don't have a file already called style.css, create one. If you have a style.css file already, paste this code at the top of the styles.

If you have your styles in a stylesheet other than styles.css, create the style.css with the code to the left. Then move all your styles to this one.

Change MY THEME NAME and all other text in all caps to customize the theme.

Right-click image below and save in theme directory as screenshot.png.

Code HTML page

Here are some things to remember when coding index.html.

Save all the files you create in a root folder. You will be uploading the whole folder to wp-content/themes/ at a certain point in the creation of your theme. If you see anything like file://mac/gfxstudent/documents/web_integration/responsive......, start over. Your files are already messed up because you didn't save something in the root folder.

Make sure you pasted <link rel="stylesheet" href="style.css" type="text/css"> in the head of the index.html right under the </title> tag.

YOU CANNOT HAVE SPACES OR SPECIAL CHARACTERS IN DIV NAMES OR CLASS NAMES OR FOLDER NAMES. If you do not understand this imperative, you probably shouldn't be taking on this endeavor.

After creating the #container, make sure every other div is between the <div id="container"> and the </div> of the container. Add a bunch of spaces between them so that you don't make this greivious mistake.

When creating all the divs contained in this container div, use the fluid classes. Additionally, apply the nested class in the divs where you want "padding".

Delete the "content for container goes here" in the container div. Leave the other "contents for....". They will help you when placing WordPress Code.

index.php

<?php get_header(); ?>

PASTE HERE

<?php get_footer(); ?>

header.php

<!DOCTYPE html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php
global $page, $paged;
wp_title( '|', true, 'right' );
bloginfo( 'name' );
$site_description = get_bloginfo( 'description', 'display' );
echo " | $site_description";
?></title>
<link rel="SHORTCUT ICON" href="http://mooseloose.com/moose.ico"/>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/js/slider.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.mmenu.js"></script>
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=yes" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/js/mmenu.css" type="text/css" media="screen">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/media.css" type="text/css" media="screen">
<script type="text/javascript">
var $feardearg = jQuery.noConflict(); $feardearg(function() {
$feardearg('nav#menu').mmenu();
});
</script>
</head>
<body>

footer.php

functions.php

<?php
if (function_exists('register_sidebar'))
register_sidebar(array('name' => 'Navigation',));
register_sidebar(array('name' => 'Left',));
register_sidebar(array('name' => 'Right',));
add_theme_support('post-thumbnails');
?>

register_sidebar(array('name' => 'MY OWN WIDGET AREA',));

Java Script Folder Zip

Download js.zip

Menu in #header div

Download PSD Template

The Loop

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php edit_post_link('<font color="red">Edit</font>','',''); ?>

<?php endwhile; else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>

Side Bars

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Left") ) : ?>
<?php endif; ?><br>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right") ) : ?>
<?php endif; ?><br>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("MY OWN WIDGET AREA") ) : ?>
<?php endif; ?><br>

#menunav,#menunav ul {margin: 0;padding: 0;list-style: none;}
#menunav ul.menu li {float: left;margin-left: 1px}
#menunav ul.menu li:hover {position: relative;}
#menunav ul.menu li:hover > ul { visibility: visible;}
#menunav ul.menu ul {visibility: hidden;position: absolute;Z-index: 999;left: -1px;}
#menunav ul.menu ul li a:link {display: inline-block;text-align:left;}

/* Style */
#menunav{position:absolute;top:220px;}
#menunav ul.menu ul li a:link {width:160px;margin-top:8px}/* STYLES DROPDOWNS */
#menunav ul.menu ul ul {left:160px;top:0px;}/* POSITIONS SECOND+ DROPDOWNS */

#menunav .menu-item > a:link, /* Main button Rest/Visited state */
#menunav .menu-ancestor > a:link,
#menunav .page_item > a:link,
#menunav .page_ancestor > a:link,
#menunav .menu-item > a:visited,
#menunav .menu-ancestor > a:visited,
#menunav .page_item > a:visited,
#menunav .page_ancestor > a:visited {
font-family:sans-serif;
text-decoration: none;
padding: 7px 25px;
font-size: 14px;
background-color: RED;
color: YELLOW;
}

#menunav .menu-item > a:hover,/* Main button Hover state */
#menunav .menu-ancestor > a:hover,
#menunav .page_item > a:hover,
#menunav .page_ancestor > a:hover {
background-color: BLUE;
color: GREEN;
}

#menunav .current-menu-item > a:link, /* Current button Rest/Visited state */
#menunav .current-menu-ancestor > a:link,
#menunav .current_page_item > a:link,
#menunav .current_page_ancestor > a:link,
#menunav .current-menu-item > a:visited,
#menunav .current-menu-ancestor > a:visited,
#menunav .current_page_item > a:visited,
#menunav .current_page_ancestor > a:visited {
background-color: VIOLET;
color: ORANGE;
}

#menunav .current-menu-item > a:hover, /* Current button Hover state */
#menunav .current-menu-ancestor > a:hover,
#menunav .current_page_item > a:hover,
#menunav .current_page_ancestor > a:hover {
background-color:BROWN;
color:YELLOW;
}

After a couple of times doing this you will totally understand this. Hang in there. It is not as complicated as you think at first.

The colors have been made especially ugly so that you will clearly see where the colors need to be changed to customize your menu.

You can move your menu up or down with the following code found in the css:

#menunav{position:absolute;top:220px;}
#menunav ul.menu ul li a:link {width:160px;margin-top:8px}/* STYLES DROPDOWNS */
#menunav ul.menu ul ul {left:160px;top:0px;}/* POSITIONS SECOND+ DROPDOWNS */
}

You can adjust the height of the buttons by changing the font to the size you like and then adding padding to the top and bottom in the following code:

#menunav .menu-item > a:link, /* Main button Rest/Visited state */
#menunav .menu-ancestor > a:link,
#menunav .page_item > a:link,
#menunav .page_ancestor > a:link,
#menunav .menu-item > a:visited,
#menunav .menu-ancestor > a:visited,
#menunav .page_item > a:visited,
#menunav .page_ancestor > a:visited {
font-family:sans-serif;
Width: 100px;
text-decoration: none;
padding: 7px 25px;
font-size: 14px;
background-color: RED;
color: YELLOW;
}

Paste the css on this page to the left (not the above example) in the style.css above where your #container is styled. The code to the left is tiny, but it will paste the right size.

Featured Thumbnail

<?php if ( has_post_thumbnail() ) { ?>
<div class="thumbnail">
<?php the_post_thumbnail( '100%' ); ?>
</div>
<?php } ?>

Page within a Page

You can have the contents of any number of other pages placed in divs in the main page. for example, you may wish to have a page with footer information to be inserted in the footer div so that the client can edit that content. Or you can have a few columns of news items or ads or quotes.

############ In index.php ##########

<?php
wp_reset_query();
query_posts('page_id=PAGE_ID');
if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="PageTitle" class="PageTitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div id="PageBody" class="PageBody"><p><?php the_content(); ?></p></div>

<?php edit_post_link('<font color="red">+</font>','',''); ?>
<?php endwhile; else: ?>
<?php endif; wp_reset_query();
?>

############ In style.css ##########

.PageTitle{
background-color: #369;
width:100%;
padding:3px;
}

.PageTitle a:link,.PageTitle a:visited{
font-size:18px;
font-weight:bold;
text-decoration:none;
font-family:inherit;
color: #fff;
}

.PageTitle a:hover{
font-family:inherit;
color: #eee;
}

#PageBody{
width:100%;
margin-top:10px;
}

#PageBody p{
font-family:inherit;
font-weight: normal;
font-size:14px;
}

Template Tag

<?php
/*
Template Name: NAME_OF_TEMPLATE
*/
?>

*********** copy above ******************

Save Template as Tname_of_template.php

Path to Featured Thumbnail

<?php
//Get the Thumbnail URL
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 720,405 ), false, '' );
echo $src[0];
?>

Path to Theme

<?php bloginfo('template_directory'); ?>/

Unique Header Image per page. Must be in the loop.

Sometimes you need to create a path to the current theme. Where you installed the theme is really the root folder, not the theme folder. So, on occasion, you have to include the whole path to the theme folder from the root. The top code to the left is the dynamically generated path to the current theme.

Unique Header

The bottom snippet is an example. Let's say you want a different header image on each page. Each page has its own page/post number. <?php the_ID(); ?> goes into the database and finds out what the number to the page is and places it on the document. <?php bloginfo('template_directory'); ?>/images/ places the path to the theme > images folder.

If you want a unique header on page 75, for example. You would create an image named "75.jpg and put it in the images folder of your theme.

There are other ways to do this, but this example should let you know how important "getting the path to current theme" is. This isn't a very good way to do it if the site is very dynamic.

Responsive Widget & Nav Styling

/*
@@@@@@@@@ @@@@@@@@ 1 - NAVIGATION BUTTON STYLES
*/

#header a {
  background-image: url(menud.png);
background-size:100%;
  width: 20px;
  height: 20px;
  top: 40px;
  left: 10px;
}
#header a:hover {
  background-image: url(menub.png);
}
#menunav{position:absolute;top:220px;} /* Move Buttons Up and Down */
#menunav ul.menu ul li a:link {width:160px;margin-top:8px}/* STYLES DROPDOWNS */
#menunav ul.menu ul ul {left:160px;top:0px;}/* POSITIONS SECOND+ DROPDOWNS */

#menunav .menu-item > a:link, /* Main button Rest/Visited state */
#menunav .menu-ancestor > a:link,
#menunav .page_item > a:link,
#menunav .page_ancestor > a:link,
#menunav .menu-item > a:visited,
#menunav .menu-ancestor > a:visited,
#menunav .page_item > a:visited,
#menunav .page_ancestor > a:visited {
padding: 10px 20px;
font-size: 14px;
}

/*
@@@@@@@ @@@@@@@@@@ 2 - WORDPRESS WIDGET STYLES
*/

.cat-item a:link, /* ARCHIVES, PAGES, CATEGORIES LINKS */
.widget_recent_entries a:link,
.widget_archive a:link,
.widget_pages a:link,
.cat-item a:visited,
.widget_recent_entries li a:visited,
.widget_archive li a:visited,
.widget_pages a:visited{
margin-left: -40px;
}

.textwidget {/* TEXT WIDGET */
font-size:14pt;
}

.widgettitle {/* SPACE ABOVE/AROUND THE TITLE BLOCKS */
width: 100%;
margin-top: 10px;
font-size: 14pt;
padding: 8px 2px;
}

#calendar_wrap {/* BOX THAT HOLDS WHOLE CALENDAR */
padding-left: 25px;
}
#calendar_wrap caption {/* MONTH LABEL */
font-size: 14pt;
}

#calendar_wrap th {/* WEEKDAY LABEL */
font-size: 14pt;
padding: 1px}

#calendar_wrap td {/* DATES UNLINKED */
font-size: 14pt;
padding: 1px}

#calendar_wrap a:link {/* DATES LINKED */
font-size: 14pt;
}

#calendar_wrap a:visited {/* DATES LINKED */
font-size: 14pt;
}

#calendar_wrap a:hover {/* DATES LINKED */
font-size: 14pt;
}

#s { /* SEARCHBOX */
height: 22px;
width: 100%;
padding: 3px;
}

#searchsubmit,#submit {/* SEACH BUTTON LINK */
margin: 5px;
}

/*
@@@@@@@@ @@@@@@@@@ 3 - YOUR STYLING
*/

media.css

@media screen and (min-width: 960px) and (max-width: 3000px)
{/* Begin */

/* end */}

@media screen and (min-width: 768px) and (max-width: 959px)
{/* Begin */

/* end */}

@media screen and (min-width: 480px) and (max-width: 767px)
{/* Begin */

/* end */}

@media screen and (min-width: 0px) and (max-width: 479px)
{/* Begin */

/* end */}

Create a file and call it media.css and paste this code in it. This is where you will make all the adjustments to the site at different widths.

Copy all the CSS code you created for all of your divs in dreamweaver. Paste it into the first media screen (960px-3000px).

Delete any declarations that will not be effected by the various sizings (color, floats, etc). Leave only those delarations that will be different per screen size (height, padding, font-size, etc).

Make all changes so that the page looks right at screen res 960px- and larger

Copy all that code and paste it in the 768px-959px media screen. Make all changes so that the page looks right at screen res 768px-959px.

Copy all that code and paste it in the 480px-767px media screen. Make all changes so that the page looks right at screen res 480px-767px.

Introduction

Process

Essential Files

style.css

Code HTML page

index.php

header.php

footer.php

functions.php

Java Script Folder Zip

Menu in #header div

The Loop

Side Bars

Menu

Featured Thumbnail

Page within a Page

Template Tag

Path to Featured Thumbnail

Path to Theme

Unique Header Image per page. Must be in the loop.

Responsive Widget & Nav Styling

media.css

Author Tags

Bookmark Tags

Category Tags

Comment Tags

General Tags

Link Tags

Nav Tags

Post Tags