WordPress Theme Design and Development Workshop - Day 2
26
WordPress Theme Design and Development Workshop Partner:
-
Upload
mizanur-rahaman-mizan -
Category
Technology
-
view
465 -
download
0
Transcript of WordPress Theme Design and Development Workshop - Day 2
WordPress Theme Design and Development
Workshop Partner:
Instructor(s)
Saad AminCofounder and CTOInspire Chittagong
Cofounder & Managing DirectorCodework Builders and Assets Ltd
Instructor(s)
Mizanur Rahaman MizanCofounder and COOInspire Chittagong
FounderBD Pathshala
Different Types of Themes
Frameworks, Parents and Child Themes
• Parent Theme• A base theme that sets up functionality• Can be extended• Must be written to allow overrides
• Child Theme• Extends a parent theme• Can carry over or override elements from parent• Cannot be extended without plugins
• Framework• Not a full theme; more of a plugin for a theme• Allows creation of parent and child themes with shared
functionality
Frameworks, Parents & Children
Resource: http://justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild-themes
Hybrid Core is a framework. - http://themehybrid.com/hybrid-core • No theme structure• Full package goes inside parent theme
Genesis “Framework” is a parent theme - http://www.studiopress.com/features • Has a theme structure• Can be used on its own• Does not go inside of another theme
TwentyTwelve is a parent theme - http://wordpress.org/extend/themes/twentytwelve • Although it has less of a framework built in, same concept
as Genesis “Education” is a child theme -
http://my.studiopress.com/themes/education/ • Cannot be used without Genesis (parent theme) installed
Examples
Starting a ThemeBasic Elements Of All Themes
CSS Stylesheet (style.css)*• Implements the CSS for the theme• Not included by default
enqueue it in functions.php or use <link href=“<?php bloginfo( ‘stylesheet_uri’ ) ?>”/> in
<head>• Provides base information about the theme
Theme name, URI, version, license, etc. (http://codex.wordpress.org/Theme_Development#Theme_Stylesheet)
Index (index.php)• Implements the structure of the theme• Can be split out into multiple files• Acts as fallback for all pages**
* - style.css is the only file required in a child theme; all others fallback to parent theme ** - the Template Hierarchy governs which files are used for each page; index is the final fallback
Required Files
• Theme Functions (functions.php)• Central location for function, variable, constant defintions used
in theme• Included automatically by theme engine before
after_setup_theme action•Default Sidebar (sidebar.php)• Outputs default sidebar (get_sidebar())•Default WordPress Loop (loop.php)• Not included automatically by theme• Used to separate “the loop”*** from other structure•Comments Template (comments.php)• List of comments and comment form; use comments_template() to include
•Search (search.php)• Search results template; automatically used on search results page
Typical Theme Files
•Automatic Template Files (page.php, 404.php, single.php)•Used automatically based on type of page being shown; •Overrides index.php (see the Template Hierarchy)•Miscellaneous Files (sidebar-[slug].php, etc.)•Include with the get_template_part( ‘sidebar’, ‘[slug]’ ) function•Sidebar, header and footer files can be included with:• get_sidebar( ‘[slug]’ )• get_header( ‘[slug]’ )• get_footer( ‘[slug]’ )•Header and Footer (header.php, footer.php)•Not included automatically •Call with get_header() & get_footer()
More Theme Files
Template HierarchyHow WordPress Decides What File To Use
WordPress automatically searches for appropriate theme template file
The WordPress Template Hierarchy
Detailed One:
http://wphierarchy.com/
The LoopThe main content area of your theme
• The Loop outputs the main content area• Loops through all matching content objects
•if ( have_posts() ) : while ( have_posts() ) : the_post();•// Output all of your content•endwhile; endif;•have_posts() and the_post()• Global methods of main query object ($wp_query)• have_posts() generates array of “post” objects• the_post() sets global variables related to current post object
What is “The Loop”?
• Inside the loop, various functions are available
• the_title() – echoes the title of the current post
• the_content() – echoes the body of the current post
• the_post_thumbnail() – echoes the “featured image” for current post
Other “Loop” Functions
If you need to use the same query loop more than once: Use rewind_posts() to reset the loop to be used again You can start your own loop with a custom query: $args = array( post_type' => array( 'portfolio' ),'order' =>
'DESC','posts_per_page' => -1,'showposts' => 13, 'ignore_sticky_posts' => 1); $wp_query = new WP_Query( $args );
if ( $wp_query->have_posts() ) { while ( $wp_query->have_posts() ) { $wp_query->the_post(); } Don’t alter the global $wp_query or use query_posts()
unless you know what you’re doing
More Loop Tips
On One ConditionUsing Conditional Functions In Your Theme
Identify where you are:• is_home() – on the default home page (or the “posts” page if set in Settings)• is_front_page() – on the static front page (set in Settings)• is_admin() / is_network_admin() – anywhere in the admin area (not on the login
page) If (is_admin() ){ if ( current_user_can( 'manage_options' ) ) { /* A user with admin privileges */ } else { /* A user without admin privileges */ } }http://codex.wordpress.org/Roles_and_Capabilities• is_single() / is_page() / is_attachment() / is_singular( $post_type ) –single content
entry• is_post_type_archive() – a list of content entries from a specific content type• is_category() / is_tag() / is_tax() – a list of content entries with a specific
taxonomy• is_404() – a non-existent page• is_search() – showing the list of search results• is_feed() – is a structured feed (RSS, Atom, etc.)
Using Conditional Functions
Not just where you are, but what features are available:• has_post_thumbnail() – whether or not the “featured image” is
set• has_excerpt() – whether a manual excerpt is set for the content• is_active_sidebar() – whether a widgetized area (“sidebar”) has
any widgets• has_nav_menu() – whether a custom menu location has a menu
assigned• is_multisite() – whether the site is part of a multisite network• is_plugin_active() – whether a specific plugin is active on the site• wp_script_is() & wp_style_is() – whether a script/stylesheet has
been registered, enqueued, printed, etc.
Testing Conditions
Putting Things Together
Using This Knowledge To Build a Theme
Choose what to build Full theme Child theme – only requires style.css; all others are optional Theme based on framework – requirements differ based on
framework Fulfill requirements
style.css wp_head() wp_footer() www.inspirechittagong.com/?p=1
Install and test it Don’t be afraid to split things out; use get_template_part() to
include additional theme pieces
Mapping It Out
Creating The ThemeTurning a Design Into a WordPress Theme
Identify goals Wireframe and design Layout priorities Final template design Initial HTML layout
Step 1: Design
Identify layout elements Identify content elements Identify visual decoration Determine common elements Identify alternative layouts
Step 2: Divide and Conquer
• Begin developing basic layout
• Separate layout elements from content elements
• Replace content elements with placeholders
• Create layout structure and style
• Develop content containers (body, widgets, footer, header, etc.)
• Develop custom functionality
Step 3: Develop
Twitter: @mizpress (Mizan) @saadwho (Saad) Website(s): http://www.inspirechittagong.com (Inspire
Chittagong)
http://www.saadamin.info (Saad Amin)http://www.mizpress.com (Mizanur Rahaman
Mizan)
Email: [email protected]
Questions? Comments?
