WordPress Theme Development and Customization

© 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
Introduction
Wordpress Files Structure
Theme Files Structure
Step to Create Theme
Understanding Theme Files
Creating Custom Template files
Child Theme
Introduction on Bootstrap Theme
Quiz 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 together
Header.php – Holds all the header information. Also, if all the files
were lumped together, this would be the beginning of the WordPress
theme
Sidebar.php – It has all the code for the sidebar
Footer.php – Holds the footer code
Other files that you will also find in a WordPress theme are:
Single.php – A single blog post code
Comments.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.php
Index.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

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.php
single.php
index.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.php
page-{id}.php - If the page ID is 6, WordPress will look to use page-6.php
page.php
index.php

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.php
category-{id}.php - If the category's ID were 6, WordPress would look
for category-6.php
category.php
archive.php
index.php
Similarly Read About Following Template Display:
Tag display tag.php
Custom Taxonomies display taxonomy.php
Author display author.php
Date display date.php
Search Result display search.php
404 (Not Found) display 404.php
Attachment 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
<?php get_sidebar( ‘home’ ); ?>
 footer.php -> footer-{template name}.php
Example: if template page like footer-home.php
<?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 for
function 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 Theme
A 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 file
your 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 features
Custom post types and taxonomies
Menus and sidebars
Widgets
Shortcodes
Metaboxes
Parent theme actions and filters
JavaScript 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

The End Of Then Session
Thank You !

WordPress Theme Development and Customization

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie WordPress Theme Development and Customization

Ähnlich wie WordPress Theme Development and Customization (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WordPress Theme Development and Customization