Make Wordpress Theme

Making a Custom WordPress Theme

Making a WordPress template requires basic file editing; primarily php and css. WordPress is very ordered and simple to use if you have built PHP websites with typical header and footer includes.

For starters, a simple way to create a custom WordPress theme is to re-work a default template like twentyten or twentyeleven. Since both templates have different PHP functions, you can just pick one as a solid place to start.

With the template, you will edit various files. Here is a list of the various files which will be edited so that WordPress will function normally and can be used to show pages, posts, archives and error messages. Since WordPress displays content using various php files, the list is rather long. Below, is a list and descriptions for files that were edited from the twenyten template to create a custom template.

single.php
Single.php displays an individual post when it is selected from a menu item or category.

page.php
Page.php is used to display pages.

index.php
Index.php is used to display the site’s homepage

archive.php
Archive.php is used to display archives and recent posts

404.php
404.php is used to display errors

comments.php
Displays comments
To remove “comments are closed” look near line 72 and remove the following line:
-<p class=”nocomments”><?php _e( ‘Comments are closed.’, ‘lightningbolt’ ); ?></p>

wp_includes/category_template.php
This file is optional to edit the function get_the_category_list
If you remove $rel, the site can be html5 Valid from W3C

Custom Menu Items
For this template, make custom menu in header.php and make permalinks or use post urls for menu items; using <ul></ul> and <li></li> tags

style.css
Style.css is the bread and butter to styling a new theme and add specs if you want to submit a theme to the WordPress directory.

-add for author name, etc
/*
Theme Name: Put Name Here
Theme URI: http://www.mysite.com
Author: My Name
Author URI: http://www.mysite.com
Description: Custom theme (Twenty Ten)
Version: 1.0
*/

screenshot.png
Change screenshot.png for site image in wp-admin

Making the Theme:

Making the theme requires putting the menu and any desired html in the header.php file. IOt can include any other div tags you want for the website. The page templates like index.php, single.php, page.php and catagory.php can use the same or different html div tags. It is possible to take any html/css template with a css menu and move the div tags into the ideal sections like header.php, footer.php and any other pages that will hold content. When you look a page like index.php you can float a sidebar anywhere and you use the appropriate function to display content.

The code below shows a snippet of index.php. It shows the get_header(); class which gets header on the top, followed by custom div tags which hold content, a sidebar class which loads the sidebar or widget into a floated right position, followed by an almight loop which loads all typical WordPress content on the homepage. Finally, a class to load the footer at the bottom. These 3 classes are existent and look almost exactly the same in the files which will display content.

INDEX.PHP

get_header(); ?>

<div>

<div>

<?php

/* Run the loop to output the posts.

* If you want to overload this in a child theme then include a file

* called loop-index.php and that will be used instead.

get_template_part( ‘loop’, ‘index’ );

?></div>

</div></div>

<?php get_footer(); ?>

SINGLE.PHP
Here is single.php with added static content. As you can see, it has get_header();, <?php get_sidebar(); ?>, get_template_part( ‘loop’, ‘index’ ); and <?php get_footer(); ?> similar to index.php

<?php
get_header(); ?>
<div id=”main2″ >
<div>
<div style=”float:right;”><?php get_sidebar(); ?></div>
<div>
<?php

/* Run the loop to output the posts.

* If you want to overload this in a child theme then include a file

* called loop-index.php and that will be used instead.

            */
            get_template_part( ‘loop’, ‘index’ );
            ?></div>
</div></div>
<div style=”clear:both;”></div>
<div style=”float:left; width:47%; padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border:2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>SERVICES</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”float:right; width:47%;padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border: 2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>ABOUT US</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”clear:both;”></div>
<div style=”display:block; float:left; margin-left:0; “>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; height:auto; margin-top:0px;” ><br /><b><span style=”font-size:16px;”>MOBILE WEB DESIGN</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;” ><br /><b><span style=”font-size:16px;”>WEB 2.0</span></b> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block;float:left; margin-left:0px; “>
<div style=”padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;”><br /><b><span style=”font-size:16px;”>SEO / PAY PER CLICK</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>WEBSITE OPTIMIZATION</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>ONGOING SUPPORT</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>Call Today</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”clear:both;”></div>
<br/>
</div>
<!–End of style–>
<?php get_footer(); ?>

PAGE.PHP
Here is page.php with added content like single.php. It also has get_header();, <?php get_sidebar(); ?>, get_template_part( ‘loop’, ‘page’ ); and <?php get_footer(); ?> similar to index.php

get_header(); ?>

<div id=”main2″ >
<div style=”float:right;”><?php get_sidebar(); ?></div>
<div> <?php

/* Run the loop to output the page.

* If you want to overload this in a child theme then include a file

* called loop-page.php and that will be used instead.

get_template_part( ‘loop’, ‘page’ );

?></div><div style=”clear:both;”></div>
</div>

<div style=”float:left; width:47%; padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border:2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>SERVICES</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”float:right; width:47%;padding:0px 10px 0px 10px; “><code style=”background-color: #dedddd; border: 2px solid #D0D0D0; min-height:110px;”><span style=”color:#dc4000;”><b>ABOUT US</b></span><br/><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </code></div>
<div style=”clear:both;”></div>
<div style=”display:block; float:left; margin-left:0; “>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; height:auto; margin-top:0px;” ><br /><b><span style=”font-size:16px;”>MOBILE WEB DESIGN</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
<div style=”display:block; float:left; margin-left:0px; “>
<div style=” padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;” ><br /><b><span style=”font-size:16px;”>WEB 2.0</span></b> <br /> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div><div style=”display:block;float:left; margin-left:0px; “>
<div style=”padding:0px 5px 0px 5px; width:200px; margin-top:0px; height:auto;”><br /><b><span style=”font-size:16px;”>SEO / PAY PER CLICK</span></b> <br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>
</div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>WEBSITE OPTIMIZATION</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>ONGOING SUPPORT</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”float:right; width:30%; padding:10px 10px 0px 10px; display:block;”><code style=” margin:2px 0px 2px 0px;”><span style=”color:#dc4000;”><b>Call Today</b></span><br/>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </code></div>
<div style=”clear:both;”></div>
<br/><br/>
</div>

<?php get_footer(); ?>

HEADER.PHP
Header.php will look unique. You can go down to the ul and li menu tags and make custom pages.Then, just add any div tags for custom content.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<title><?php
/*

* Print the <title> tag based on what is being viewed.

global $page, $paged;

wp_title( ‘|’, true, ‘right’ );

// Add the blog name.

bloginfo( ‘name’ );

// Add the blog description for the home/front page.

$site_description = get_bloginfo( ‘description’, ‘display’ );

if ( $site_description && ( is_home() || is_front_page() ) )

echo ” | $site_description”;

// Add a page number if necessary:

if ( $paged >= 2 || $page >= 2 )

echo ‘ | ‘ . sprintf( __( ‘Page %s’, ‘lightningbolt’ ), max( $paged, $page ) );

?></title>

<?php

/* We add some JavaScript to pages with the comment form

* to support sites with threaded comments (when in use).

if ( is_singular() && get_option( ‘thread_comments’ ) )

wp_enqueue_script( ‘comment-reply’ );

/* Always have wp_head() just before the closing </head>

* tag of your theme, or you will break many plugins, which

* generally use this hook to add elements to <head> such

* as styles, scripts, and meta tags.

//wp_head();

</head>

<li><a href=”sample-page”>Comment</a></li>

<li><a href=”new-page”>No Comment</a></li>

<li><a href=”new-page”>Contact</a></li>

<li><span style=”font-size:40px; display:none;”><i>Welcome!</i></span></li>

</ul></div>

<? /////?>

<h1 style=”color:#2f2f2f; font-style:italic; padding:10px; “>MY BLOG, STORE AND COMMUNITY</h1>

<div><div><img style=”float:left; padding:0px 10px 0px 10px;” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/website-design-148.png” alt=”web-design”/></div>

<p></p>

<p style=”text-align:justify; “><span style=”font-size:16px; font-family:Arial, Helvetica, sans-serif;”>Welcome to the site!</span><br/><br/><span style=”font-size:18px;”><i>Your website is only limited to your imagination.</i></span></p>

<div style=”clear:both;”></div>
<br/>
<img style=”padding:0px 0px 0px 0px;” src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/header-690.png” alt=”web-design”/></div>

</div>

ADD THEME:
Here is the web address to add a theme to the WordPress directory:
http://wordpress.org/extend/themes/upload/