week 7 introduction to theme development
TRANSCRIPT
1. Class website ca274.beekeeperdev.com
2. Google Group – Sign up from the class website
3. Mid-term Next Week (10/19)
Week 6 Recap
Week 6 Recap
Homework
• Name two competing CMS to WordPress (week 1)
• What are fives steps for the cms development (week 2)
• What are the 4 deliverables content analysis (week 2)
• What are some of the tools you can use to install WordPress locally (week 3)
• What Is the URL of your local server (week 3)
Mid-term review
Mid-term review
• Describe the steps to install WordPress locally (week 3)
• Where in the dashboard can you change specific settings (week 4)
• Details on adding/editing posts and pages (week 4)
• How to install in a plug-in (week 5)• How/where do you find plug-ins (week 5)• What are some considerations when to take
into account when choosing a plug-in (week 5)
Mid-term review
• How many types of hooks does WordPress have? What is difference between them? (week 6)
• What kind of hook did the hello dolly plugin used? (week 6)
• How many files do need in theme (week 7)?• Where does theme file reside (week 7) ?
InstallWordPress(10 Minutes)
Week 6
Intro To WordPress Development
Intro to WordPressTheme Development
Week 7
WordPress Themes
What are themes? A way to skin WordPress
What’s In A WordPress Theme?
• WordPress themes are a combination of PHP, CSS, and image files
• Requirements:• HTML• CSS• Some PHP• SQL*
Anatomy Of A WordPress Theme
THE PROCESS
1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE6. SUPPORT
Database
Database Schema
Source: SchemaBank.com
File Structure
• /– wp-admin/– wp-content/• plugins/
– Each plugin usually has its own directory
• themes/– Each theme has its own directory
• uploads/– Created on first upload (default location)
– wp-includes/– wp-config.php
2004
— themes/— — your-theme/— — — index.php— — — style.css
2010
— themes/— — your-theme/— — — header.php— — — index.php— — — style.css— — — rtl.css— — — comments.php— — — front-page.php— — — home.php— — — single.php— — — page.php
— — — category.php— — — category-1.php— — — category-4.php— — — tag.php— — — taxonomy.php— — — author.php— — — date.php— — — archive.php— — — search.php— — — attachment.php— — — image.php— — — 404.php— — — footer.php
Standard Theme Architecture• Homepage– index.php– home.php
• Single Post– single.php
• Page– page.php
• Category– category.php– archive.php
• Tags– tag.php
• Search Results– search.php
• 404– 404.php
The Stylesheet – style.css
The comment headers in the style.css provide meta info to WP are are REQUIRED
This stylesheet also controls the layout and design elements of your theme…
Theme Structure
• Index.php– includes header.php– Includes sidebar.php– Includes footer.php
The Loop
If (havePosts)show post stuff
Elsenothing here!
End if
Template Tags
• the_title()• the_permalink()• the_content()• the_excerpt()• And more!
Functions.php
Contains theme related functions and commonly is used to generate dynamic sidebars
Custom Fields
• Allow attaching meta-data to posts.
Custom Post Types
• Used for:– Real Estate Listing– Event Calendar– Movie Database– Issue Management / Ticket System– Etc.
Custom Post Type Options• label• singular_label• description• public – query-able from public?• menu_position• menu_icon• hierarchical• query_var• capability_type – permissions• supports• rewrite• taxonomies• register_meta_box_cb• permalink_epmask
Custom Post Types – Integration with the loop
<?php $loop = new WP_Query( array( 'post_type' => my_custom_post_type', 'posts_per_page' => 10 ) ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' );
?><div class="entry-content">
<?php the_content(); ?></div>
<?php endwhile; ?>
Taxonomies• What are taxonomies?
• register_taxonomy()– Shows up in menu system– Demo
register_taxonomy( 'actor', 'post', array(
'hierarchical' => false, 'label' => __('Actors', 'series'), 'query_var' => 'actor', 'rewrite' => array( 'slug' => 'actors' )
) );
Theme Frameworks
Debugging made easy
define( 'SCRIPT_DEBUG', true );
Debugging flags added to wp-config.php:define( 'WP_DEBUG', true );
define( 'SAVEQUERIES', true ); $wpdb->queries
“All” hook:add_action( 'all', create_function( '', 'var_dump( current_filter() );' ) );
Core Control Plugin: http://wordpress.org/extend/plugins/core-control/
Dump Environment Plugin:http://wordpress.org/extend/plugins/dump_env/
Source: http://www.andrewnacin.com/2010/04/23/5-ways-to-debug-wordpress/
Resources• Smashing Magazine - wp.smashingmagazine.com• Planet - planet.wordpress.org• WordPress Codex – codex.wordpress.org• WordPress Forums – wordpress.org/support• All Things WordPress- wordpress.alltop.com • Core Development Blog – devel.wordpress.org
Sources
• http://www.slideshare.net/abrudtkuhl/getting-started-with-wordpress-development/
• http://www.slideshare.net/davidyeiser/how-to-prepare-a-wordpress-theme-for-public-release/