Wordcamp 2010 Themes for Beginners

WordPress Themes for Beginners(non-programmers)

Bonnie VaskoVaskoInteractive.com

@vaskointeractv

Bonnie Vasko

UI Developer at Comcast (until recently, that is)

Developer at NetReach (maker of cmScribe cms)

Freelance web developer@vaskointeractv

About this Talk:High Level OverviewNot a code reviewWalk away with an understanding ofWhere to find themesPaid vs. FreeParent / Child ThemesTheme FrameworksTheme Structure

What is a theme?

It’s a way to your skin your siteHow your site looksHow your site worksKeeps the functionality separate from the core wordpress files

3 Ways to Install a Theme

1 - Search and Install from the admin panel2 - Upload a zip file from your computer, let wordpress decompress, and install3 - FTP your theme to wp-content/themes

How to choose a themePlan your site layout before choosing

Not choose the theme, and follow thatThink about what functionality you will needHave your site content planned

Will you be using pages or postsCategories or tagssocial media integration

PAGES

CATEGORIES

JQUERY SLIDERWITH CUSTOM HTML

RECENTPOSTS

SOCIAL MEDIA

FEATURED

CONTENTAREA

PHOTO FEED

Where to get themesThe WordPress Repository (Free)Smashing Magazine (free, updated annually)Woo Themes : High QualityPaid Themes:

Woo ThemesTheme ForestMany more....

Parent / Child ThemesA child theme inherits the functionality of the parent themeYou can create a child of any themeUpgrade the parent theme without losing your changesLive DemoChild Theme Basics

Setting up a child theme(in 4 easy steps)Create a new folder, and add a style.css fileModify the child theme’s style.css headerImport & override parent stylesOptional step: Override parent theme templates

Theme FrameworksWhat is a framework?Gives you a starting point - styles and layout that are common to all themes are already set up3 free frameworks: Hybrid, Thematic & SandboxAdvantages: Large community, widely used, openPaid frameworks: Thesis & Genesis

Template FilesTemplate files are the building blocks of your WordPress site. They fit together like the pieces of a puzzle to generate the web pages on your site. Some templates (the header and footer template files for example) are used on all the web pages, while others are used only under specific conditions.

Header Header <?php get_header(); ?> this is a template tag

Footer Footer <?php get_footer(); ?>

ContentContent““The Loop”The Loop”

SidebarSidebar <?php get_sidebar(); ?>

REPRODUCED (WITH PERMISSION) FROM “Dig into Wordpress” BY CHRIS COYIER AND JEFF STARR

Theme Files

REPRODUCED (WITH PERMISSION) FROM “Dig into Wordpress” BY CHRIS COYIER AND JEFF STARR

The LoopThe Loop is used by WordPress to display each of your posts. Using The Loop, WordPress processes each of the posts to be displayed on the current page and formats them according to how they match specified criteria within The Loop tags. Any HTML or PHP code placed in the Loop will be repeated on each post. When WordPress documentation states "This tag must be within The Loop", such as for specific Template Tag or plugins, the tag will be repeated for each post.

<?php// The Loopif (have_posts()) : while (have_posts()) : the_post();?>

http://codex.wordpress.org/The_Loop