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 
*/

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="type/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>

<div id="content" style="padding:0px">

footer.php

<div style="clear:both;"></div>
</diV>
<nav id="menu">
<?php wp_nav_menu( array( 'container' => '' ) ); ?>
</nav>
<?php
wp_footer();
?>
</body>
</html>

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

The Loop

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

<h1><?php the_title(); ?></h1>

<p><span class="entry-date"><?php echo get_the_date(); ?></span></p>

<p><?php the_content( $more_link_text, $strip_teaser, $more_file ); ?></p>

<?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>

<nav id="menunav">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Navigation") ) : ?>
<?php endif; ?>
</nav><br>




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

Menu

This is a little involved.

Go to your dashboard and create a menu.

Put pages on the Menu.

Go to Widgets.

Drop the "custom menu" widget in the Navigation Widget area.

Select the name of the menu in the dropdown.


Styling the colors of your buttons, placement of the button bar verticaly, and addjusting the padding on the buttons is achieved by modifying the CSS found in style.css. Open style.css and look for section 5 - GENERAL HORIZONTAL MENU STYLES. It will look like the following:

/* 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;
}

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>
<!------ <div id="PageBody" class="PageBody"><p><?php the_excerpt(); ?></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;
height:20px;
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.



<style>
#header {
background-image: url(<?php bloginfo('template_directory'); ?>/images/<?php the_ID(); ?>.jpg);
}
</style>

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 */}

Author Tags

Bookmark Tags

Category Tags

Comment Tags

General Tags

Link Tags

Post Tags