Let's Build a Custom Theme

Let’s Build ACustom Theme WordCamp Orange County 2012 #wcoc @theandystratton

Plan Your Work.Work Your Plan.

Stay Organized. What needs to be dynamic?Organize assets: HTML/CSS/JS/images.

Static HTML/CSS. Highly recommended.Great reference point for possible browser bugs you may find later. Keep in a separate folder, use as starting point.

Our Home Page...

Our Interior Page...

Our Blog Page...

Planning our work.

Link to home page

Link to home page WP Nav Menu

Link to home page WP Nav Menu Custom Post Type (slide)Includes title and featured image.

Home Page Title/Content

Home Page Title/Content Custom ﬁeld for anchor text and URL

Widgetized Sidebar for Footer

the_title()

the_title()the_content()

the_title() Custom call to wp_list_pages() (followed by widgetized sidebar)the_content()

the_date() andcomments_number()

the_date() and comments_number()Featured Image, the_title() and the_excerpt()

the_date() and comments_number() WP Nav Menu & Widgetized SidebarFeatured Image, the_title() and the_excerpt()

BREAK DOWN your design into MANAGEABLEWordPress components.

Let’s dive into some<code/>

Let’s Review.

Stay Organized. Plan your work, work your plan.Organization & planning are key to effective & efficient coding.

Isolate HTML/CSS. Fastest starting point. Focus on user experience, not dev experience.Best way to troubleshoot browser bugs later.

Chunk Things. Dissect markup into manageable pieces. Header, Footer, Sidebar(s), etc. Most can be done with copy/paste andreplacing static functions with WP functions.

Doing It Right. Are you doing it wrong? Enqueue scripts/styles. Use hooks.Avoid hard-coding anything that can be dynamic, hooked or a widget when possible.

Optimized & Secure. Escape your output. Scrub your input.Use core WordPress API’s/functions

Steal Borrow.Refer to TwentyTen/TwentyEleven View other themes. Re-use your code & refine when appropriate.

Context Is Queen. What functionality do they need? Some pieces may not need to beimplemented (e.g. some sites do not have blogs)

Maintain Experience.Design for the user, code for the admin.Maintain the WordPress admin UI when adding options/settings screens, etc.

Thanks ;]

Let's Build a Custom Theme

by Andy Stratton on Jun 05, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Let’s Build a Custom Theme Presentation Transcript