• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Overview on WordPress theme file structure and working functionality
 

Overview on WordPress theme file structure and working functionality

on

  • 5,012 views

Basic overview on WordPress theme file structure and working functionality.

Basic overview on WordPress theme file structure and working functionality.

Statistics

Views

Total Views
5,012
Views on SlideShare
5,012
Embed Views
0

Actions

Likes
0
Downloads
21
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Overview on WordPress theme file structure and working functionality Overview on WordPress theme file structure and working functionality Presentation Transcript

    • © 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
    • 3© Copyright 2010 Nibiru Solutions Private Limited 3 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.
    • 4© Copyright 2010 Nibiru Solutions Private Limited 4 Wordpress File Structure
    • 5© Copyright 2010 Nibiru Solutions Private Limited 5 Understanding Theme Files And Structure -1
    • 6© Copyright 2010 Nibiru Solutions Private Limited 6 Understanding Theme Files And Structure -2 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
    • 7© Copyright 2010 Nibiru Solutions Private Limited 7 Understanding Theme Files And Structure -3 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
    • 8© Copyright 2010 Nibiru Solutions Private Limited 8 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.
    • 9© Copyright 2010 Nibiru Solutions Private Limited 9 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
    • 10© Copyright 2010 Nibiru Solutions Private Limited 10 The Template Hierarchy In Detail -2 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
    • 11© Copyright 2010 Nibiru Solutions Private Limited 11 The Template Hierarchy In Detail -3 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
    • 12© Copyright 2010 Nibiru Solutions Private Limited 12 hi
    • 13© Copyright 2010 Nibiru Solutions Private Limited 13 Creating a Custom Template Page -1
    • 14© Copyright 2010 Nibiru Solutions Private Limited 14 Creating a Custom Template Page -2
    • 15© Copyright 2010 Nibiru Solutions Private Limited 15 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’ ); ?>
    • 16© Copyright 2010 Nibiru Solutions Private Limited 16 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>
    • 17© Copyright 2010 Nibiru Solutions Private Limited 17 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>', ) ); }
    • 18© Copyright 2010 Nibiru Solutions Private Limited 18 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; ?>
    • 19© Copyright 2010 Nibiru Solutions Private Limited 19 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.
    • 20© Copyright 2010 Nibiru Solutions Private Limited 20 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.
    • 21© Copyright 2010 Nibiru Solutions Private Limited 21 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.
    • 22© Copyright 2010 Nibiru Solutions Private Limited 22 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. } }
    • 23© Copyright 2010 Nibiru Solutions Private Limited 23 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
    • 24© Copyright 2010 Nibiru Solutions Private Limited 24 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
    • 25© Copyright 2010 Nibiru Solutions Private Limited 25 The End Of Then Session Thank You !