Overview on WordPress theme file structure and working functionality

© Copyright 2010 Nibiru Solutions Private Limited 1

Learning and Development Session on Wordpress

Presented by: Rakesh

2© Copyright 2010 Nibiru Solutions Private Limited 2

Agenda

IntroductionWordpress Files StructureTheme Files StructureStep to Create Theme Understanding Theme Files Creating Custom Template filesChild ThemeIntroduction on Bootstrap ThemeQuiz Questions


Introduction

What is Wordpress ?WordPress is an open source Content Management System (CMS) which can be used to built websites and Blogs.

WordPress was released in 2003 by (Matt Mullenweg and Mike Little) and it is based on PHP & MYSQL.

WordPress was released in 2003 by (Matt Mullenweg and Mike Little) and it is based on PHP & MYSQL.

The wordpress 3.5.2 version released in June 2013.

By focusing on user experience and web standards we can create a tool different from anything else out there.


Wordpress File Structure


Understanding Theme Files And Structure -1



The basic file structure of a WordPress theme is as follows:Style.css – The stylesheet holds all the formatting and styles of the theme Index.php – This is the main WordPress theme file that ties all the other files togetherHeader.php – Holds all the header information. Also, if all the files were lumped together, this would be the beginning of the WordPress themeSidebar.php – It has all the code for the sidebarFooter.php – Holds the footer codeOther files that you will also find in a WordPress theme are:Single.php – A single blog post codeComments.php – This is where you place the code to control the behavior of the blog comments



Page.php - Controls the behavior of your individual pages

Search.php – This is if you want to add search capability to your WordPress theme

Searchform.php – Controls the way the search box behaves

404.php – Customize the landing page if your readers get an 404 error

Functions.php – A way to further customize your WordPress theme

Archives php – How to display the archive results


Example of Template Hierarchy and Working Flow

If your blog is at http://example.com/blog/ and a visitor clicks on a link to a category page like http://example.com/blog/category/your-cat/:

Here is the progression of how WordPress uses the template hierarchy to find and generate the right file.

WordPress looks for a template file in the current Theme's directory that matches the category's ID.

1- If the category's ID is 4, WordPress looks for a template file named category-4.php.

2- If it is missing, WordPress next looks for a generic category template file, category.php.

3- If this file does not exist either, WordPress looks for a generic archive template, archive.php.

4- If it is missing as well, WordPress falls back on the main Theme template file, index.php.


The Template Hierarchy In Detail -1

Home Page display :Template file used to render the Blog Posts Index , whether on the site front page or on a static page.

Home.phpIndex.php

Front Page display :Template file used to render the Site Front Page, whether the front page displays the Blog Posts Index or a static page. The Front Page template takes precedence over the Blog Posts Index (Home) template.

front-page.php - Used for both Your latest posts or A static page as set in the Front page displays section of Settings -> Reading

http://codex.wordpress.org/Administration_Panels

http://codex.wordpress.org/Settings_Reading_SubPanel



Single Post display:Template file used to render a single post page.

single-{post_type}.php - If the post type were product, WordPress would look for single-product.phpsingle.phpindex.php

Page display:Template file used to render a static page (page post-type).

page-{slug}.php - If the page slug is recent-news, WordPress will look to use page-recent-news.phppage-{id}.php - If the page ID is 6, WordPress will look to use page-6.phppage.phpindex.php

http://codex.wordpress.org/Post_Types



Category display:Template file used to render a Category Archive Index page

category-{slug}.php - If the category's slug were news, WordPress would look for category-news.phpcategory-{id}.php - If the category's ID were 6, WordPress would look for category-6.phpcategory.phparchive.phpindex.php

Similarly Read About Following Template Display:Tag display tag.phpCustom Taxonomies display taxonomy.phpAuthor display author.phpDate display date.phpSearch Result display search.php404 (Not Found) display 404.phpAttachment display attachment.php


hi


Creating a Custom Template Page -1


Creating a Custom Template Page -2


Including custom file in Template page -1

Create a Template page of following generic pages like :

Header.php -> header-{template name}.php Example: if template page like header-home.php

Call this file in Template page like <?php get_header( ‘home’ ); ?>

Sidebar.php -> sidebar-{template name}.php Example: if template page like sidebar-home.php Call this file in Template page like <?php get_sidebar( ‘home’ ); ?>

footer.php -> footer-{template name}.php Example: if template page like footer-home.php Call this file in Template page like <?php get_footer( ‘home’ ); ?>


Including custom file in Template page -2

Including content pages in Template Page. Content page in theme are like

loop.php, loop-page.php, loop-single.php, ect.. ( TwentyTen theme) content.php, content-page.php, content-single.php, etc (Eleven ,

Twelve )

Wordpress dynamically call these page using get_template_part() Function

Example : call content-page.php in template page as <?php get_template_part( 'content', 'page' ); ?>

Dynamically Including other file css, js and php in Template Page.

<?php echo get_template_directory_uri( ) ; ?>

Example : Example.js file in header page. <script src="<?php echo get_template_directory_uri( ) ; ?>

/js/example.js“ type="text/javascript"></script>


Create Dynamic Sidebar Widget s And Call In Template Page

This is function dependent.To Create a dynamic Sidebar Widget :

Go to function.php in theme file and find forfunction twentyten_widgets_init(){

register_sidebar ( array ('name' => __( ‘My Widget Area', 'twentyten' ),'id' => ‘my-widget-area','description' => __( 'The my widget area',

'twentyten' ),'before_widget' => '<li id="%1$s" class="widget-

container %2$s">','after_widget' => '</li>','before_title' => '<h3 class="widget-title">','after_title' => '</h3>',

) );}


Create Dynamic Sidebar Widget s And Call In Template Page-2

Call In Template Page .<?php if ( is_active_sidebar( ' my-widget-area’ ) ) : ?>

<?php dynamic_sidebar( ' my-widget-area' ); ?><?php endif; ?>


Child Theme -1

Child ThemeA WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.A child theme is the safest and easiest way to modify an existing theme.Instead of modifying the theme files directly.

Why use a Child Theme? If you modify an existing theme and it is updated, your changes will be lost. you can update the parent theme (which might be important for security or functionality) and still keep your changes. It can speed up development time.


Child Theme -2

How to Create a Child Theme 1- Create a directory in theme

Folder and name whatever you want.But it is common practice to use the name of the parent theme folder with “-child” appended to it.

2- In the child theme directory, create a file called style.css. This is the only file required to make a child theme.


Child Theme-3

3- The style.css must be start with following line. /* Theme Name: Twenty Twelve Child Theme URI: http://example.com/ Description: Child theme for the Twenty Twelve theme Author: Your name here Author URI: http://example.com/about/ Template: twentytwelve Version: 0.1.0 */ 4- The child theme’s stylesheet will overwrite the parent

theme’s stylesheet. To do this, you need to start the stylesheet with the following

line: @import url("../twentytwelve/style.css"); Note : If you put other CSS rules before the @import, it will

not work.

5- Activate the child theme , go to Administration Panels > Appearance > Themes.





Child Theme -4

Working with template fileyour child theme can overwrite any file in the parent theme:

simply include a file of the same name in the child theme directory, and it will overwrite the equivalent file in the parent theme directory.

Example : if you want to change the PHP code for the site header, you can include a header.php in your child theme's directory, and that file will be used instead of the parent theme's header.php.

Unlike style.css then function.php of a child does not override. and create your own function in child theme function. Note : use following way to create new function if ( ! function_exists( ‘my_theme_function' ) ) { f unction my_theme_function() { // Do something. } }


What You Can Modify Using Child Theme

Through the child theme’s functions.php file we can deal with:

Theme featuresCustom post types and taxonomiesMenus and sidebarsWidgets Shortcodes MetaboxesParent theme actions and filtersJavaScript and CSS


What You Can Modify Using Child Theme

Lets Explain one of Above How to Remove Theme Feature:

hooked to the WordPress after_setup_theme action. We also set 10 as a third parameter (priority), so we are sure that the function is triggered before the parent one.

add_action( 'after_setup_theme', 'remove_parent_theme_features', 10 );

function remove_parent_theme_features() { remove_theme_support( 'post-formats' ); remove_theme_support( 'post-thumbnails' ); remove_theme_support( 'custom-background' ); remove_theme_support( 'custom-header' ); remove_theme_support( 'automatic-feed-links' ); }

http://wp.tutsplus.com/tutorials/creative-coding/how-to-modify-the-parent-theme-behavior-within-the-child-theme/

http://codex.wordpress.org/Function_Reference

http://codex.wordpress.org/Plugin_API/Action_Reference/after_setup_theme



http://codex.wordpress.org/Function_Reference


The End Of Then Session

Thank You !

Education

Overview on WordPress theme file structure and working functionality