Week 7 introduction to theme development

35
CA274 - Web Content Management Systems and Strategy* henri.makembe@montgomerycolleg e.edu

Transcript of Week 7 introduction to theme development

Page 1: Week 7   introduction to theme development

CA274 - Web Content Management Systems and

Strategy*

[email protected]

Page 2: Week 7   introduction to theme development

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

Page 3: Week 7   introduction to theme development

Week 6 Recap

Homework

Page 4: Week 7   introduction to theme development

• 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

Page 5: Week 7   introduction to theme development

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)

Page 6: Week 7   introduction to theme development

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) ?

Page 7: Week 7   introduction to theme development

InstallWordPress(10 Minutes)

Week 6

Page 8: Week 7   introduction to theme development

Intro To WordPress Development

Page 9: Week 7   introduction to theme development

Intro to WordPressTheme Development

Week 7

Page 10: Week 7   introduction to theme development

WordPress Themes

What are themes? A way to skin WordPress

Page 11: Week 7   introduction to theme development

What’s In A WordPress Theme?

• WordPress themes are a combination of PHP, CSS, and image files

• Requirements:• HTML• CSS• Some PHP• SQL*

Page 12: Week 7   introduction to theme development

Anatomy Of A WordPress Theme

Page 13: Week 7   introduction to theme development

THE PROCESS

1. PLAN2. DESIGN3. BUILD4. TEST & CHECK5. RELEASE6. SUPPORT

Page 14: Week 7   introduction to theme development

Database

Page 15: Week 7   introduction to theme development

Database Schema

Source: SchemaBank.com

Page 16: Week 7   introduction to theme development

File Structure

Page 17: Week 7   introduction to theme development

• /– 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

Page 18: Week 7   introduction to theme development

2004

— themes/— — your-theme/— — — index.php— — — style.css

Page 19: Week 7   introduction to theme development

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

Page 20: Week 7   introduction to theme development
Page 21: Week 7   introduction to theme development

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

Page 22: Week 7   introduction to theme development

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…

Page 23: Week 7   introduction to theme development

Theme Structure

• Index.php– includes header.php– Includes sidebar.php– Includes footer.php

Page 24: Week 7   introduction to theme development

The Loop

If (havePosts)show post stuff

Elsenothing here!

End if

Page 25: Week 7   introduction to theme development

Template Tags

• the_title()• the_permalink()• the_content()• the_excerpt()• And more!

Page 26: Week 7   introduction to theme development

Functions.php

Contains theme related functions and commonly is used to generate dynamic sidebars

Page 27: Week 7   introduction to theme development

Custom Fields

• Allow attaching meta-data to posts.

Page 28: Week 7   introduction to theme development

Custom Post Types

• Used for:– Real Estate Listing– Event Calendar– Movie Database– Issue Management / Ticket System– Etc.

Page 29: Week 7   introduction to theme development

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

Page 30: Week 7   introduction to theme development

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; ?>

Page 31: Week 7   introduction to theme development

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' )

) );

Page 32: Week 7   introduction to theme development

Theme Frameworks

Page 33: Week 7   introduction to theme development

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/

Page 34: Week 7   introduction to theme development

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

Page 35: Week 7   introduction to theme development

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/