wordpress: creating your own custom theme
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:
- ability for the end-user to modify the web site content without breaking the overall site geography
- 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!