WordPress theme development from scratch : ICT MeetUp 2013 Nepal

17,921 views

Published on

WordPress theme development from scratch : ICT MeetUp 2013 Nepal

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
17,921
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
94
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordPress theme development from scratch : ICT MeetUp 2013 Nepal

  1. 1. WORDPRESS THEME Development From Scratch ICT MeetUp 2013 By : Chandra Prakash Thapa
  2. 2. What is a WordPress theme? A group of templates and a stylesheet that displays content entered into the database via the WordPress admin. At a minimum, you need:  index.php  style.css
  3. 3. Let’s Start [ Get Free Responsive Template ]  Download the brownie template from: http://www.html5xcss3.com/2012/06/html5-template- responsive-brownie.html  Copy and paste the HTML design file to WordPress theme directory. [ wp-content/themes/brownie ]  Rename the index.html to index.php  Create a style.css file in brownie. [ wp-content/themes/brownie/style.css ]
  4. 4. style.css [ Template Settings ] /* Theme Name: Brownie. Theme URI: http://merobox.com/ Description: This is my first WordPress template. Author: Chandra Prakash Thapa. Author URI: http://cpthapa.com.np/ Version: 1.0 Tags: brown, two-columns, custom-background, License: License URI: General comments (optional). */
  5. 5. Go to Appearance->Themes?
  6. 6. Add screenshot image inside theme folder [ wp-content/themes/brownie/screenshot.png ]
  7. 7. Visit the site [ demo ]
  8. 8. Static Link 1. CSS : <link rel="stylesheet" href=“css/style.css" type="text/css" /> 2. Script : <script type="text/javascript" src=“js/jquery.min.js"></script> 3. Images : <img src=“images/facebook.png" alt="Facebook"> 1. CSS : <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/style.css" type="text/css" /> 2. Script : <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script> 3. Images : <img src="<?php bloginfo('template_url'); ?>/images/facebook.png" alt="Facebook"> To Dynamic Link
  9. 9. Visit the site [ again ]
  10. 10. A Basic Theme Requirement  404.php - Custom “not found” page  footer.php - The template called with get_footer()  functions.php - A place to create custom functions, register sidebars, and other settings  header.php - The template called with get_header()  index.php - The default template  home.php - The basic home template  page.php - Overall template for pages  search.php - Search results template  searchform.php - The template called with get_search_form()  sidebar.php - The template called with get_sidebar()  single.php - Overall template for single posts  style.css - The main stylesheet
  11. 11. home.phpindex.php  Create home.php file.  Copy all code from index.php to home.php
  12. 12. Break Code Into segments [home.php]
  13. 13. Header.php // Add wp_head() function before end of </head> tag. <?php wp_head (); ?> </head> <body> <header class="header_bg clearfix">
  14. 14. Header.php // Add title to your website <title> <?php bloginfo('name'); // Title of the website ?> <?php wp_title(); // Title of the single page or post ?> </title>
  15. 15. Footer.php // Add wp_footer() function before end of </body> tag. <?php wp_footer(); ?> </body> </html>
  16. 16. Footer Copyright. [ footer.php ]  <p>  &copy;  <?php echo date('Y'); ?>  <?php bloginfo('name'); ?>.  </p>
  17. 17. Home.php  <?php get_header(); ?>  Remaining code part.(after excluding header / footer)  <?php get_footer(); ?>
  18. 18. functions.php  File is place inside theme folder. wp-content/themes/yourtheme/functions.php  Changes default behavior of WordPress.  Behaves like WordPress Plugin.  Use it to call PHP or built-in WordPress functions.  Use to define your own functions.  Register menu, sidebar and widgets.
  19. 19. Registering Menu // registering header and footer menu in functions.php file function merobox_addmenus() { register_nav_menus( array( 'header_nav' => 'Header Menu', 'footer_nav' => 'Footer Menu' ) ); } add_action('init', 'merobox_addmenus');
  20. 20. A look into menu (3.6 version)
  21. 21. Displaying menu (footer menu) <div class="menu"> <?php if (has_nav_menu('footer_nav')) { wp_nav_menu( array('theme_location' => 'footer_nav') ); } ?> </div>
  22. 22. Displaying menu [ header menu ] <?php if (has_nav_menu('header_nav')) { wp_nav_menu( array( 'theme_location' => 'header_nav', 'container' => 'nav', 'container_class' => 'main-menu' ) ); } ?>
  23. 23. Theme options  Option Framework add theme options panel.  http://wordpress.org/plugins/options-framework/  Download -> Install -> Activate.
  24. 24. Add Options.php  Download optons.php file from link below :  https://github.com/devinsays/options-framework- plugin/blob/master/options-check/options.php  Add options.php file in the theme folder brownie.
  25. 25. Dynamic text content
  26. 26. Dynamic text [ option.php ]  $options[] = array(  'name' => __('Why Line one', 'options_check'),  'desc' => __(' Why to choose your business line one.', 'options_check'),  'id' => 'why_line_one',  'std' => 'Default Text',  'type' => 'text‘  );
  27. 27. Dynamic text display [ home.php]  Add the following code to display previously added content. <p> <?php echo of_get_option('why_line_one'); ?> </p>
  28. 28. Dynamic Image Slider [home.php]  The Query  The Loop  Reset Query
  29. 29. Dynamic Image Slider [ Post Thumbnail Support] // Add post thumbnails support in functions.php file add_theme_support( 'post-thumbnails' ); // default thumbnail size for photo gallery set_post_thumbnail_size( 281, 140, true ); //thumbnail size for image slider add_image_size( 'image_slide_thumb', 940, 360, true );
  30. 30. Dynamic Image Slider <ul class="slides"> <?php $slider_cat = of_get_option('image_slider'); // The Query query_posts( 'posts_per_page=5&cat='.$slider_cat ); // The Loop while ( have_posts() ) : the_post(); ?> <li> <?php the_post_thumbnail('image_slide_thumb',true); ?> <p class="flex-caption"><?php the_title(); ?></p> </li> <?php endwhile; // Reset Query wp_reset_query(); ?> </ul>
  31. 31. Dynamic Image Slider [ The Query ] <ul class="slides"> <?php // The Query $slider_cat = of_get_option('image_slider'); query_posts( 'posts_per_page=5&cat='.$slider_cat ); [ The Option Panel ] $options[] = array( 'name' => __('Image Slider', 'options_check'), 'desc' => __('Catgory to use for image slider', 'options_check'), 'id' => 'image_slider', 'type' => 'select', 'options' => $options_categories);
  32. 32. Dynamic Image Slider [ The Loop ] // The Loop while ( have_posts() ) : the_post(); ?> <li> <?php the_post_thumbnail('image_slide_thumb',true); ?> <p class="flex-caption"><?php the_title(); ?></p> </li> <?php endwhile;
  33. 33. Dynamic Image Slider [ Reset Query ] // Reset Query wp_reset_query(); ?> </ul>
  34. 34. Featured Content [home.php]
  35. 35. Featured Content Settings [ The Option Panel : options.php] $options[] = array( 'name' => __('Featured Page one', 'options_check'), 'desc' => __('Select the pages to be featured on home page one', 'options_check'), 'id' => 'featured_page_one', 'type' => 'select', 'options' => $options_pages);
  36. 36. Featured Content Display [ get_post() : home.php]  <?php  $pageID = of_get_option('featured_page_one');  $pageObj = get_post($pageID);  $pageContent = $pageObj->post_content;  ?>  <h3><?php echo $pageObj->post_title; ?></h3>  </div>  <p>  <?php echo substr(strip_tags($pageContent),0,500)."...."; ?>  <br />  <a href="<?php echo get_permalink($pageID); ?>">more info</a>  </p>
  37. 37. Content Type  Post - blog, news style content. - single.php  Page - static content like contact us, about us page. - page.php
  38. 38. single.phpblog_single.html  Create single.php file.  Copy all code from blog_single.html to single.php
  39. 39. Post : Single.php [ blog, news post ]
  40. 40. sidebar.php header.php - get_header(); footer.php - get_footer();
  41. 41. Post : Single.php [Demo Post ]  https://developers.facebook.com/docs/reference/plugins/comments/
  42. 42. Post : single.php [ The Loop ] <?php get_header(); ?> <?php if (have_posts()) : while(have_posts()) : the_post(); ?> Title: <?php the_title(); ?> Published date: <?php the_date('F j, Y'); ?> Author: <?php the_author_posts_link() ?> Category: <?php the_category(', '); ?> Tag: <?php the_tags(','); ?> Content: <?php the_content(); ?> <?php endwhile; endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?>
  43. 43. Page : page.php [ Demo ]
  44. 44. Page : page.php [ The Loop ] <?php get_header(); ?> <?php if (have_posts()) : while(have_posts()) : the_post(); ?> Title: <?php the_title(); ?> Content: <?php the_content(); ?> <?php endwhile; endif; ?> <?php get_sidebar(); ?> <?php get_footer(); ?> No Published date: No Author: No Category: No Tag: No Comment
  45. 45. Custom Page : mycontact.php <?php /* Template Name: My Contact Page */ ?>
  46. 46. index.phpsingle.php  Copy all code from single.php to index.php  Just remove the_content( ) with the_excerpt( )  And add read more link using the_permalink( ); Index.php [ default template ]
  47. 47. Sidebars : Dynamic Widget Ready [Demo : page, post] <div class="widget"> <h2><span>Categories</span></h2> <!– Content Goes here --> </div>
  48. 48. Sidebars : Dynamic Widget Ready [ Registering : functions.php] register_sidebar( array( 'name' => 'Sidebar', 'id' => 'right-sidebar', 'before_widget' => '<div class="widget">', 'after_widget' => '</div>', 'before_title' => '<h2><span>', 'after_title' => '</span></h2>', ) );
  49. 49. Sidebars : Dynamic Widget Ready [ Displaying : sidebar.php] <div class="sidebar"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('right-sidebar') ) : endif; ?> </div>
  50. 50. Extra : Plugin [ Next Gen Gallery ]  http://wordpress.org/plugins/nextgen-gallery/
  51. 51. Extra : Plugin [ Contact Form 7 ]  http://wordpress.org/plugins/contact-form-7/
  52. 52. Extra : Plugin [ WP-PageNavi ] http://wordpress.org/plugins/wp-pagenavi/
  53. 53. Reference [ For more ]  http://codex.wordpress.org  http://www.youtube.com/watch?v=uwecNcdAUaY  http://line25.com/tutorials/how-to-create-a-simple-wordpress-blog-theme  http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial  http://www.onextrapixel.com/2011/03/08/how-to-code-a-wordpress-3-0-theme- from-scratch/  Google.com 
  54. 54. Thank You! QUESTIONS? Chandra Prakash Thapa @cpthapa cpthapa@gmail.com cpthapa.com.np MeroBox.com

×