SlideShare a Scribd company logo
1 of 18
Download to read offline
Rapid Wordpress Theme Development




              Josh Williams
              http://tucsonlabs.com
              Spoke 6 June 22, 2010
Audience

 ●   Theme developers
 ●   Web Designers who want to build their own website.
 ●   Developers coming from other platforms.
 ●




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
What's a theme?

Themes are fles that give any WordPress website its
look and custom features. Themes are nice because they
don't alter any of the core fles WordPress needs to
operate.




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
How can we build themes faster?

 ●   Use child themes (introduced in WordPress 2.7).
 ●   Use a someone else's theme and change it a bit.
 ●   Build a custom framework.
                                    t
 ●   Other options?




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Child Themes

●   Themes that inherit a parent theme (can be simple or advanced).
●   Only requires 1 CSS fle (can't get much easier).
●   Extremely quick for small customizations.
●   You get new features when your parent theme gets them.
●   If something is broken you can always delete your code and fallback
on the parent theme.
●   If you need to overwrite every fle, it's probably not the best choice.




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Using Someone Else's Theme

●   Quick and easy for minor changes.
●   Free or not too expensive.
●   Good for beginners.
●   Possibly bloated and buggy.
●   Future support for new features aren't guaranteed.
●   Licensing issues.




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Building Your Own Framework

●   Get a better understanding of how WordPress works.
●   Use it to make child themes from or customize each theme.
●   Write your own markup and CSS.
●   You won't inherit someone else's bugs.
●   You can (or rather need to) add support for new features as soon as
they come out.
●   Takes longer
●




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Popular Frameworks
●   YUI http://developer.yahoo.com/yui/
●   960 grid - http://960.gs/
●   Blueprint CSS - http://www.blueprintcss.org/


WordPress Specifc Frameworks
●   Thematic - http://themeshaper.com/thematic/
●   WP Framework - http://wpframework.com/
●   Sandbox - http://www.plaintxt.org/themes/sandbox/
●   Carriongton - http://carringtontheme.com/

Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
A General Framework

●   Reset CSS.
●   General typography.
●   Commonly used Styles.
●   CSS properties targeting WordPress specifc classes and ids
●   Logically structured and meaningful markup.
●   Common functions in your functions.php fle.




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Local Development

●   Work ofine
●   No need to wait for uploads
●   XAMP, MAMP, or plain LAMP.




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Import testing data

Don't waste time uploading client content to your desktop
development environment. Import test data to your local WP
installation and use this as your development environment.

●   Saves time – unless you really like copying Lorem Ipsum
●   Have a ton of projects? Build a ton of themes.
●   Use home.php if your developing a custom home page and your
developing more than one site at a time.
●   Go here: http://codex.wordpress.org/Theme_Development_Checklist

Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Theme Folder




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Develop and Test Locally

●   Have a few diferent browsers open when you're building your theme.
This makes CSS problems easier to debug.

●   Get http://www.virtualbox.org/ for installing multiple OS.
●   http://winebottler.kronenberg.org/ For quick ie6 testing.
●   Use Android and Iphone emulators (they do render diferently).
●




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Content Development Environment

If you're developing for a client and they don't have a WordPress driven
site, then set them one up with the 2010 theme to get them started on
publishing their content.

●   Use a sub domain like http://subdomain.tucsonlabs.com
●   Block this site from search engines in the WP admin area




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Custom Templates & Body Class

Custom page templates allow you to make certain pages diferent from
the default. This is very handy for making changes to markup.
<?php
/*
Template Name: Your Custom template-name-goes-here
*/
?>
<body <?php body_class(); ?>> // ads a class to the body tag (since 2.8)
<!--[if lt IE 7]> <body <?php body_class('ie6');?>> <![endif]-->



Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Content Development Environment

If you're developing for a client and they don't have a WordPress driven
site, then set them one up with the 2010 theme to get them started on
publishing their content.

●   Use a sub domain like http://subdomain.tucsonlabs.com
●   Block this site from search engines in the WP admin area




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Upload To Your Server and Test
When you're fnished, backup the database and import it to the live
website. site.




                                    t




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com
Thanks!

Credits
Hubcap building - http://www.fickr.com/photos/usnationalarchives/3887548891/in/photostream/
Farmer with beer - http://www.fickr.com/photos/usnationalarchives/3925999201/sizes/l/
Aircraft Tester - http://www.fickr.com/photos/library_of_congress/2179930812/in/set-72157603671370361/
Hard Hat Worker - http://www.fickr.com/photos/library_of_congress/2179060449/in/set-72157603671370361/
Audience - http://www.fickr.com/photos/library_of_congress/2405656980/sizes/o/in/photostream/
Bike Rider - http://www.fickr.com/photos/library_of_congress/2459820524/sizes/o/in/photostream/
Children - http://www.fickr.com/photos/library_of_congress/2179121221/sizes/o/
Man Reparing Fence - http://www.fickr.com/photos/library_of_congress/2179146486/
Local Shops - http://www.fickr.com/photos/library_of_congress/2179171500/




Rapid Wordpress Theme Development
Josh Williams
http://tucsonlabs.com

More Related Content

What's hot

Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
Justin Foell
 

What's hot (20)

Building a community of Open Source intranet users
Building a community of Open Source intranet usersBuilding a community of Open Source intranet users
Building a community of Open Source intranet users
 
WordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow PresentationWordCamp Sheffield 2014 Theme Workflow Presentation
WordCamp Sheffield 2014 Theme Workflow Presentation
 
Getting the Most out of WordPress.com
Getting the Most out of WordPress.comGetting the Most out of WordPress.com
Getting the Most out of WordPress.com
 
WordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPressWordCamp Bournemouth 2014 - Designing with data in WordPress
WordCamp Bournemouth 2014 - Designing with data in WordPress
 
Web development is now simplified with Wordpress CMS
Web development is now simplified with Wordpress CMSWeb development is now simplified with Wordpress CMS
Web development is now simplified with Wordpress CMS
 
Wordpress 101 Training
Wordpress 101 TrainingWordpress 101 Training
Wordpress 101 Training
 
How to Boost the performance of your Wordpress powered websites
How to Boost the performance of your Wordpress powered websitesHow to Boost the performance of your Wordpress powered websites
How to Boost the performance of your Wordpress powered websites
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
 
WP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and PluginsWP 101 - Local Development - Themes and Plugins
WP 101 - Local Development - Themes and Plugins
 
WordPress Developer tools
WordPress Developer toolsWordPress Developer tools
WordPress Developer tools
 
45 WordPress Interview Questions
45 WordPress Interview Questions45 WordPress Interview Questions
45 WordPress Interview Questions
 
Website using word press
Website using word pressWebsite using word press
Website using word press
 
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
Advanced Custom Fields(ACF) + Page Builder at WordPress meetup Stockholm 2016...
 
Introduction to WordPress Class 1
Introduction to WordPress Class 1Introduction to WordPress Class 1
Introduction to WordPress Class 1
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
WordPress - fixing sites with problems
WordPress - fixing sites with problemsWordPress - fixing sites with problems
WordPress - fixing sites with problems
 
Agile Wordpress
Agile WordpressAgile Wordpress
Agile Wordpress
 
Website Using WordPress
Website Using WordPressWebsite Using WordPress
Website Using WordPress
 
WP 101 - WordPress Basics
WP 101 - WordPress BasicsWP 101 - WordPress Basics
WP 101 - WordPress Basics
 

Similar to Rapid WordPress Theme Development

Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
Joe Querin
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
pamselle
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPress
Jignasa Naik
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
Chris Olbekson
 

Similar to Rapid WordPress Theme Development (20)

WordPress: After The Install
WordPress: After The InstallWordPress: After The Install
WordPress: After The Install
 
Wordpress Workshop: Session One
Wordpress Workshop: Session OneWordpress Workshop: Session One
Wordpress Workshop: Session One
 
Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0Building the next generation of themes with WP Rig 2.0
Building the next generation of themes with WP Rig 2.0
 
Wp frameworks- WordCamp KTM #10
Wp frameworks- WordCamp KTM #10Wp frameworks- WordCamp KTM #10
Wp frameworks- WordCamp KTM #10
 
WordPress 101 Saturday Session
WordPress 101 Saturday SessionWordPress 101 Saturday Session
WordPress 101 Saturday Session
 
Developing Custom WordPress Themes for Clients
Developing Custom WordPress Themes for ClientsDeveloping Custom WordPress Themes for Clients
Developing Custom WordPress Themes for Clients
 
Kick start your career with WordPress
Kick start your career with WordPressKick start your career with WordPress
Kick start your career with WordPress
 
2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore2011 05 word-press-not-just-for-blogging-anymore
2011 05 word-press-not-just-for-blogging-anymore
 
Introduction to WordPress Multisite
Introduction to WordPress MultisiteIntroduction to WordPress Multisite
Introduction to WordPress Multisite
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
 
Kick start your career with wordpress
Kick start your career with wordpressKick start your career with wordpress
Kick start your career with wordpress
 
Architektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan KrausArchitektura html, css i javascript - Jan Kraus
Architektura html, css i javascript - Jan Kraus
 
Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08Wordpress Beyond A Blog Word Camp Toronto08
Wordpress Beyond A Blog Word Camp Toronto08
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Do WordPress developers write code?
Do WordPress developers write code?Do WordPress developers write code?
Do WordPress developers write code?
 
937079
937079937079
937079
 
Theme frameworks & child themes
Theme frameworks & child themesTheme frameworks & child themes
Theme frameworks & child themes
 
How to create a website in wordpress
How to create a website in wordpressHow to create a website in wordpress
How to create a website in wordpress
 
Task runners + theming automating your workflow
Task runners + theming  automating your workflowTask runners + theming  automating your workflow
Task runners + theming automating your workflow
 

Recently uploaded

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 

Recently uploaded (20)

GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Tech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdfTech Trends Report 2024 Future Today Institute.pdf
Tech Trends Report 2024 Future Today Institute.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 

Rapid WordPress Theme Development

  • 1. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com Spoke 6 June 22, 2010
  • 2. Audience ● Theme developers ● Web Designers who want to build their own website. ● Developers coming from other platforms. ● Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 3. What's a theme? Themes are fles that give any WordPress website its look and custom features. Themes are nice because they don't alter any of the core fles WordPress needs to operate. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 4. How can we build themes faster? ● Use child themes (introduced in WordPress 2.7). ● Use a someone else's theme and change it a bit. ● Build a custom framework. t ● Other options? Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 5. Child Themes ● Themes that inherit a parent theme (can be simple or advanced). ● Only requires 1 CSS fle (can't get much easier). ● Extremely quick for small customizations. ● You get new features when your parent theme gets them. ● If something is broken you can always delete your code and fallback on the parent theme. ● If you need to overwrite every fle, it's probably not the best choice. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 6. Using Someone Else's Theme ● Quick and easy for minor changes. ● Free or not too expensive. ● Good for beginners. ● Possibly bloated and buggy. ● Future support for new features aren't guaranteed. ● Licensing issues. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 7. Building Your Own Framework ● Get a better understanding of how WordPress works. ● Use it to make child themes from or customize each theme. ● Write your own markup and CSS. ● You won't inherit someone else's bugs. ● You can (or rather need to) add support for new features as soon as they come out. ● Takes longer ● Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 8. Popular Frameworks ● YUI http://developer.yahoo.com/yui/ ● 960 grid - http://960.gs/ ● Blueprint CSS - http://www.blueprintcss.org/ WordPress Specifc Frameworks ● Thematic - http://themeshaper.com/thematic/ ● WP Framework - http://wpframework.com/ ● Sandbox - http://www.plaintxt.org/themes/sandbox/ ● Carriongton - http://carringtontheme.com/ Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 9. A General Framework ● Reset CSS. ● General typography. ● Commonly used Styles. ● CSS properties targeting WordPress specifc classes and ids ● Logically structured and meaningful markup. ● Common functions in your functions.php fle. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 10. Local Development ● Work ofine ● No need to wait for uploads ● XAMP, MAMP, or plain LAMP. Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 11. Import testing data Don't waste time uploading client content to your desktop development environment. Import test data to your local WP installation and use this as your development environment. ● Saves time – unless you really like copying Lorem Ipsum ● Have a ton of projects? Build a ton of themes. ● Use home.php if your developing a custom home page and your developing more than one site at a time. ● Go here: http://codex.wordpress.org/Theme_Development_Checklist Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 12. Theme Folder Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 13. Develop and Test Locally ● Have a few diferent browsers open when you're building your theme. This makes CSS problems easier to debug. ● Get http://www.virtualbox.org/ for installing multiple OS. ● http://winebottler.kronenberg.org/ For quick ie6 testing. ● Use Android and Iphone emulators (they do render diferently). ● Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 14. Content Development Environment If you're developing for a client and they don't have a WordPress driven site, then set them one up with the 2010 theme to get them started on publishing their content. ● Use a sub domain like http://subdomain.tucsonlabs.com ● Block this site from search engines in the WP admin area Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 15. Custom Templates & Body Class Custom page templates allow you to make certain pages diferent from the default. This is very handy for making changes to markup. <?php /* Template Name: Your Custom template-name-goes-here */ ?> <body <?php body_class(); ?>> // ads a class to the body tag (since 2.8) <!--[if lt IE 7]> <body <?php body_class('ie6');?>> <![endif]--> Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 16. Content Development Environment If you're developing for a client and they don't have a WordPress driven site, then set them one up with the 2010 theme to get them started on publishing their content. ● Use a sub domain like http://subdomain.tucsonlabs.com ● Block this site from search engines in the WP admin area Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 17. Upload To Your Server and Test When you're fnished, backup the database and import it to the live website. site. t Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com
  • 18. Thanks! Credits Hubcap building - http://www.fickr.com/photos/usnationalarchives/3887548891/in/photostream/ Farmer with beer - http://www.fickr.com/photos/usnationalarchives/3925999201/sizes/l/ Aircraft Tester - http://www.fickr.com/photos/library_of_congress/2179930812/in/set-72157603671370361/ Hard Hat Worker - http://www.fickr.com/photos/library_of_congress/2179060449/in/set-72157603671370361/ Audience - http://www.fickr.com/photos/library_of_congress/2405656980/sizes/o/in/photostream/ Bike Rider - http://www.fickr.com/photos/library_of_congress/2459820524/sizes/o/in/photostream/ Children - http://www.fickr.com/photos/library_of_congress/2179121221/sizes/o/ Man Reparing Fence - http://www.fickr.com/photos/library_of_congress/2179146486/ Local Shops - http://www.fickr.com/photos/library_of_congress/2179171500/ Rapid Wordpress Theme Development Josh Williams http://tucsonlabs.com