gorirrajoe » html http://gorirrajoe.com another FPSA production Mon, 21 May 2012 01:40:45 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 wordpress: creating your own custom theme http://gorirrajoe.com/wordpress-creating-your-own-custom-theme/ http://gorirrajoe.com/wordpress-creating-your-own-custom-theme/#comments Mon, 27 Jul 2009 00:24:45 +0000 Joey http://www.gorirrajoe.com/?p=965 hot on the heels of my first tutorial, i come back at ya with a new one.

i REALLY like using wordpress as a cms — not only for its ease of customization or its extensive library of useful (mostly) plugins, but for these two huge reasons:

  1. ability for the end-user to modify the web site content without breaking the overall site geography
  2. search engine optimization — yea i kinda did mention them earlier, but several plugins can work to help your site get spidered like the best of them.

so i guess that answers the “why use wordpress?” question — here’s my method of getting a custom theme setup for wordpress
firstly, i’ll need to assume that you, the reader, knows how to write html/css/php code… if you don’t, go here

i normally start off by creating the site geography (layout) through standard HTML (i still like using *gasp* dreamweaver for this step because it speeds up the whole html/css writing)

when creating the stylesheet, save the file as “style.css”

if possible, i try to make the site look as final as possible at this step — it’ll make the code portion a whole lot smoother later on

next, download wordpress to your local machine and go to the “wp-content\themes” directory

go into the “default” folder and rename the “style.css” file to “_style.css” — you’ll be keeping this as a backup. there are some things that you might not have remembered to style (such as comments, image alignment, etc.) that you can easily grab from that file.

place a copy of your custom “style.css” file into the “default” folder

now the part that gets a little tricky… i’m starting to now regret wanting to write this… ha

start with the “header.php” file and, with your html mock-up, compare the two to make sure the <head> portion is similar*

*they obviously won’t be the same, but i meant that you want to port over script code such as the png fix: (file here)

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

or favicons:

<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>
/images/favicon2.ico" />

if the masthead (and perhaps navigation setup) is the same on all pages, i put those into the “header.php” file as well (since all pages of the site will be using this file)

next i go to “footer.php” — normally, this won’t need much modification. maybe some closing <div> tags, copyright info, or even analytics code

next up is the “sidebar.php” file — if the site is a simple site (non-blog), then you probably just want the “wp_list_pages()” function:

this is the skiMonkey “sidebar.php”:

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
<div id="nav" role="complementary">
 <ul>
  <?php wp_list_pages('depth=1&title_li=' ); ?>
 </ul>
</div>

there are a ton of functions within wordpress — it’s all a matter of researching what you’ll need

next, you have the “content” pages — this is the body of the site. the nice part is that once you do one page, the rest of the pages will be easy — start with “page.php” (if you have a non-blog, you’re pretty much done after this, though i would HIGHLY suggest updating all php files)

again, compare the php and html pages, adding in your <div> tags wherever needed.

if you created and tested your html properly (especially by placing lorem ipsum code in the main content area, this should be a quick process)

remember, you’re basically wrapping the content within your <div> tags — no need to totally remove (just edit) the code that is already in the files.

now the moment of truth — upload and install wordpress to your server

after installation, you should be able to go to the site and see your newly styled site!

*yes, i do a lot of assumptions — but that’s where comments come in handy — if you have any questions, ask and i’ll try my best to answer!

]]> http://gorirrajoe.com/wordpress-creating-your-own-custom-theme/feed/ 2