1. Workshop Partner:

2. Saad Amin Cofounder and CTO Inspire Chittagong Cofounder & Managing Director Codework Builders and Assets Ltd

3. Mizanur Rahaman Mizan Cofounder and COO Inspire Chittagong Founder BD Pathshala

4. Frameworks, Parents and Child Themes

5. 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 Resource:Resource: http:// justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild- themeshttp:// justintadlock.com/archives/2010/08/16/frameworks-parent-child-and-grandchild- themes

6.  Hybrid Core is a framework. - http://themehybrid.com/hybrid-core http:// No theme structure Full package goes inside parent theme  Genesis “Framework” is a parent theme - http://www.studiopress.com/features http:// 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 http:// Although it has less of a framework built in, same concept as Genesis  “Education” is a child theme - http://my.studiopress.com/themes/education/ http://my.studiopress.com/themes/education Cannot be used without Genesis (parent theme) installed

7. Basic Elements Of All Themes

8.  CSS Stylesheet (style.css)* Implements the CSS for the theme Not included by default  enqueue it in functions.php or  use ”/> in Provides base information about the theme  Theme name, URI, version, license, etc. (http://codex.wordpress.org/Theme_Development#Theme_S tylesheet)http://  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

9. 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

10. 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()

11. How WordPress Decides What File To Use

12.  WordPress automatically searches for appropriate theme template file Detailed One: http://wphierarchy.com/

13. The main content area of your theme

14. 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

15. 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

16.  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

17. Using Conditional Functions In Your Theme

18.  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.)

19.  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.

20. Using This Knowledge To Build a Theme

21.  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 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

22. Turning a Design Into a WordPress Theme

23.  Identify goals  Wireframe and design  Layout priorities  Final template design  Initial HTML layout

24.  Identify layout elements  Identify content elements  Identify visual decoration  Determine common elements  Identify alternative layouts

25. 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

26.  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)http://www.inspirechittagong.com http://www.saadamin.info http://www.mizpress.com  Email: admin@inspirechittagong.com 