Building a Simple Theme Framework

Transcription

1 Building a Simple Theme Framework by: Joe Casabona

2 Who am I? Native of NYS Yankee Fan WordPress Developer Computer Nerd Star Wars Nerd Author of Building WordPress Themes from Scratch

3 Software Reuse Some General Principles & Tips

4 Software Reuse What is it? Creating code that can be used across several projects. Using existing software to create new software. Why is it Important? It saves time It s easier to test It allows you to focus on more advanced parts of a project.

5 Principles of Reuse Design Your Code Layout functions, classes, page templates before hand! Generalize Where Possible Recognize when you re reusing code snippets Document & Test Thoroughly! Testing will ensure your code works before implementing it 5, 10, or 20 times

6 Define Your Needs We all have different needs! Evaluate Your Process Review Your Code I ll talk about mine. Keep yours in mind. What do you do over and over? Look for the same code across recent projects!

7 Define Your Needs (my needs) Plugable CSS Constants for Theme & Image URLS Common WordPress functionality (menus, sidebars, CPTs, etc.) Most Common theme templates (header, footer, page, index) Common Folders Lightweight

8 Now What? You know what you needs. Now what? Before you code, see what s out there! Can a plugin or other theme fulfill your needs? Is there already some theme you use as a starting point?

9 What s Out There (themes) Thematic Thesis Carrington Genesis Atahualpa

10 What s Out There (Plugins) OptionTree Custom Post Type UI Royal Slider Contact Form 7

11 Building the Framework What to do, what to do...

12 Designing Your Code I noticed I was doing a couple of things over and over Copy K2 Rip out stuff I didn't use Replace it with my standard template Modify Eventually, I would just copy the last theme I created I took my common components and created my framework

13 Ex: Post Attachments function jlc_prnt_attachements($pid){ $args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $pid ); $attachments = get_posts( $args ); if ($attachments) { foreach ( $attachments as $post ) { setup_postdata($post); the_attachment_link($post->id, false, false, true); } } }

14 Necessary Files Style.css Functions.php Index.php That s it! WordPress will fill in the blanks with only these.

15 Recommended Files All Necessary files header.php & footer.php page.php single.php A Custom Post Type generator/template A theme options generator/template search.php archive.php sidebar.php

16 My CSS Single Sheet Compressed normalize.css Some base styles Standard HTML5 Elements Basic Navigation CSS Mobile first approach Basic Media Queries Any common classes and IE Fixes

17 My Functions Constants to use throughout the whole theme: define( 'TEMPPATH', get_bloginfo('stylesheet_directory')); define( 'IMAGES', TEMPPATH. "/images"); Calls to include: Nav Menus Sidebars (2) Custom functions I use across multiple themes (like attachments function from earlier)

18 Using the Framework How and When

19 2 Ways to Use Framework As a Child Theme: Cleaner Easier to update Can overwrite any page As a Boilerplate: One off jobs you don t plan on updating Largely customized jobs where you want to reuse only parts of the framework.

20 As a Child Theme Allows you to create themes that will automatically get updated when you update your framework Bug Fixes Additional Functionality General Theme Updates Overwrites No need to hack together/delete. Import and overwrite!

21 As a Boilerplate Did this for a while! This project started to serve as a simple boilerplate for me Use for one-off projects Projects you won't have control over after initial launch Projects that will be deeply different structurally

22 Which Should I Use? Cliche Answer: It Depends! As with most things in our field, there is no be-allend-all answer. Consider the project at hand and make the call there. Practically speaking, a child theme of your framework will likely work most of the time.

23 Some Tips Test it thoroughly You will use this a lot, so make sure things work as expected across multiple browsers Improve and update it As you grow as a developer, your needs will change. Make sure your framework changes with you.

24 Some Tips (cont) Don't get complacent Do let your growth stagnate because you're using a framework. Stay up on new features, best practices, etc. Let others try it out See how other people use it and get feedback.

25 if there is time... <? Show some code!?>

26 Thank You! Any Questions? Site: casabona.org Slides: casabona.org/wcphilly/

27 Resources WordPress Codex Handcrafted CSS Simplebits (Dan C s site) ThemeForest WPTuts+