Sunday, September 2, 2012

Creating your own theme in Wordpress

All of this can be found at the wordpress codex but if looking through that seems to intimidate you, then here is the "spark notes" version of the things you need to get your Child theme started.  But first... you may ask, "What is a child theme?" its basically building a theme that is piggy backed on another so that it may be easier to code, since you aren't coding from scratch.  If you find a theme that is almost perfect but you only need to rearrange some things then this allows for a good foundation so that you don't get half way through it all and realize the site is failing left and right.  With that said here are the 2 thing you need to create a theme.

a Folder that you will upload to the server under your THEMES folder within your wordpress install.
a CSS file with this information at the top.

/*
Theme Name:     Twenty Eleven Child  <--this can be what ever you want to call it.
Theme URI:      http://example.com/  <-- your website preferably
Description:    Child theme for the Twenty Eleven theme <--again what ever you want
Author:         Your name here  <--Give yourself some credit!
Author URI:     http://example.com/about/  <-- credit credit credit
Template: twentyeleven <--REALLY IMPORTANT spell this right it has to be the exact name of the theme you are piggy backing Version: 0.1.0 <--if you are making the theme for others to use it allows them to see how many updates you have given the theme. */
After that the theme will show up when you go to the wordpress  admin.  If you want you can upload a screenshot of the theme but if you don't have a design layout yet then you can leave it blank.  The screenshot is located in the theme folder you created as screenshot.png.  It will pull this image and place it into the box where you can see your theme before you activate it.

You can either place this piece of code to help keep what you want of the styling from the mother theme or not include it to start from scratch (as far as CSS)


@import url("../twentyeleven/style.css");
if you are not using twentyeleven as a parent theme just replace with the correct spelling of the theme you are using and all will be good.

This piece of code pulls in all the css from the parent theme and allows you to write over the css you want.

Other files can also be added to help customize your theme even more.

header.php
footer.php
index.php

These are all modules that can be customized once and spread through your site without having to write out the code a million times.  Change something in the header and it gets applied to any page with
<?php get_header?> attached to it.  Pretty nice.

Like I said everything you need to know about wordpress is at codex.wordpress.org but thought this might help for a quick reference as well.

No comments:

Post a Comment