Process
Essential Files
Introduction
Here you will find all you need to learn the basics of creating WordPress themes from scratch.
The exercise is limited. Although you can have a completely functional wordPress site once you understand these foundational concepts, you will want to explore further. For example, the site you will create here will not be responsive. That is a major shortcoming, but our purpose is to understand the basics before you move on to greater endeavors. We don't want heads exploding at the beginning of a long journey.
index.php
<?php get_header(); ?>
PASTE HERE
<?php get_footer(); ?>
header.php
<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="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" type="text/css">
</head>
<body>
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 License
Tags:
*/
*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;}
.menu a:link {padding: 4px 15px;font-size:14px}
ul.menu ul ul { left: 135px}
li{font-size:12pt;}
#calendar_wrap{margin-top:-10px;margin-left:0px}
#calendar_wrap caption{font-size:12pt;}
#calendar_wrap a:link{font-size:12pt;}
#calendar_wrap th{font-size:12pt;}
#calendar_wrap td{font-size:12pt;}
.logged-in-as a:link{font-size:12pt}
.widgettitle{font-size:12pt;padding:8px 2px;}
.widget_archive ul{margin-left:-30px}
.textwidget{font-size: 12pt;line-height:15pt;}
.widget_archive a:link{font-size:12pt}
.widget_archive a:visited{font-size:12pt}
.widget_archive a:hover{font-size:12pt}
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');
?>
The Loop
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<span class="entry-date"><?php echo get_the_date(); ?></span>
<p><?php the_content( $more_link_text, $strip_teaser, $more_file ); ?></p>
<?php edit_post_link('<font color="red">+</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>
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.
Use the CSS Menu Wizard to create Menu CSS
Leave the "class" as it is (menu). WordPress will be looking for that specific class.
You will only need to copy the CSS that will be created. The actual buttons will be created Dynamically by WordPress. Of course, paste the CSS code in style.css.
Featured 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:hover{
background-color: #f00;
}
.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;
}
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];
?>
Word Press Widget Styles
.cat-item a:link, /* ARCHIVES,PAGES,CATEGORIES LINKS */
.page_itema:link,
.widget_recent_entries a:link,
.widget_archive a:link,
.widget_pages a:link{
list-style-type: none;
font-weight: normal;
color: #000;
margin-left: -40px;
text-decoration: none;
}
.cat-item a:visited, /* ARCHIVES,PAGES,CATEGORIES VISITED */
.page_item a:visited,
.widget_recent_entries li a:visited,
.widget_archive li a:visited,
.widget_pages a:visited {
list-style-type: none;
}
.cat-item a:hover, /* ARCHIVES,PAGES,CATEGORIES HOVER */
.page_item a:hover,
.widget_recent_entries li a:hover,
.widget_archive li a:hover,
.widget_pages a:hover {
font-weight: normal;
color: #900;
}
.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: black;
color: white;
text-align: center
}
li,li.widget {
list-style-type: none;
}
#calendar_wrap {/* BOX THAT HOLDS WHOLE CALENDAR */
padding-left: 50px;
}
#calendar_wrap caption {/* MONTH LABEL */
font-size: 14pt;
font-weight: normal;
color: #369;
}
#calendar_wrap th {/* WEEKDAY LABEL */
font-size: 14pt;
font-weight: bold;
color: #000;
text-align: center;
padding: 1px}
#calendar_wrap td {/* DATES UNLINKED */
font-size: 14pt;
font-weight: normal;
color: #FF0000;
text-align: center;
padding: 1px}
#calendar_wrap a:link {/* DATES LINKED */
font-size: 14pt;
font-weight: bold}
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}
Template Tag
<?php
/*
Template Name: NAME_OF_TEMPLATE
*/
?>
*********** copy above ******************
Save Template as Tname_of_template.php
Bookmark Tags
Remove Dashbord Items
function MooseRemove() {
remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
remove_meta_box( 'dashboard_primary', 'dashboard', 'side' );
remove_meta_box( 'dashboard_secondary', 'dashboard', 'side' );
remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
remove_meta_box( 'dashboard_browser_nag', 'dashboard', 'normal' );
}
add_action('wp_dashboard_setup', 'MooseRemove' );