WordCamp Columbus 2010 - Designing a killer WordPress theme

  • View
    185

  • Download
    2

Embed Size (px)

Text of WordCamp Columbus 2010 - Designing a killer WordPress theme

  1. 1. Columbus 2010 Designing a killer WordPress theme -Todd Santoro
  2. 2. 1 Columbus 2010 Designing a killer WordPress theme -Todd Santoro First steps... Copy and paste the DEFAULT theme folder back into the themes folder Rename the folder you just created to your theme name. eg: cool_theme - You can name it what ever you want. No spaces:) Open style.css and focus on the top 10 or so lines. Change all of the information to match your new theme. Most important is the actual theme name. It needs to be what ever you named the directory. In this case cool_theme
  3. 3. 2 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Login to the back-end of WP and configure the instal Install any plug-ins you like. I use Google Site maps, WP-backup, WP-Cache, Head Space 2, Cforms II Back everything up at this point.
  4. 4. 3 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Get some inspiration... I like to use inspiration galleries to get my mojo flowing. My favorites are CSS Zen Garden, Swell CSS, The CSS Awards Fire up your graphics program. Think of your new site as being a header, content block and a footer When the magic is completed isolate each graphic into its simplest form and code up your CSS.
  5. 5. 4 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Now the fun begins... Coding. Start out with basic stuff like editing the footer or taking out the sidebar. Resources: http://net.tutsplus.com/freebies/cheat-sheets/wordpress-cheat-sheat/ http://www.wpbeginner.com/wp-tutorials/25-extremely-useful- tricks-for-the-wordpress-functions-file/ http://www.smashingmagazine.com/ http://www.wpbeginner.com/
  6. 6. 5 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Creating a custom home page will top off your design. Open up page.php and save it as page_home.php. On the first line of the code add this line This will make your new page available in the backend so you can assign it to your home page. Now you can add a jQuery slider, extra graphics or what ever you want.
  7. 7. 6 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Start populating your WP site with content and assigning your templates to certain pages like the Custom Home Page template. Set up your sidebar with widgets. Set up your contact form using Cforms II or something like it.
  8. 8. 7 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Finalize your setup by debugging any trouble areas. The only way to do this is by spending some time looking at every detail in the site. Things to look for are: Do all pixels match up? Are things showing up in the correct places?
  9. 9. 8 Columbus 2010 Designing a killer WordPress theme -Todd Santoro Thats it! Questions?