Your SlideShare is downloading. ×
0
WORDPRESS THEME
Development
From Scratch
ICT MeetUp 2013
By : Chandra Prakash
Thapa
What is a WordPress theme?
A group of templates and a stylesheet that displays content
entered into the database via the W...
Let’s Start
[ Get Free Responsive Template ]
 Download the brownie template from:
http://www.html5xcss3.com/2012/06/html5...
style.css
[ Template Settings ]
/*
Theme Name: Brownie.
Theme URI: http://merobox.com/
Description: This is my first WordP...
Go to Appearance->Themes?
Add screenshot image inside theme folder
[ wp-content/themes/brownie/screenshot.png ]
Visit the site
[ demo ]
Static Link
1. CSS : <link rel="stylesheet" href=“css/style.css" type="text/css" />
2. Script : <script type="text/javasc...
Visit the site
[ again ]
A Basic Theme Requirement
 404.php - Custom “not found” page
 footer.php - The template called with get_footer()
 funct...
home.phpindex.php
 Create home.php file.
 Copy all code from index.php to home.php
Break Code Into segments
[home.php]
Header.php
// Add wp_head() function before end of </head> tag.
<?php wp_head (); ?>
</head>
<body>
<header class="header_...
Header.php
// Add title to your website
<title>
<?php bloginfo('name'); // Title of the website ?>
<?php wp_title(); // Ti...
Footer.php
// Add wp_footer() function before end of </body> tag.
<?php wp_footer(); ?>
</body>
</html>
Footer Copyright.
[ footer.php ]
 <p>
 &copy;
 <?php echo date('Y'); ?>
 <?php bloginfo('name'); ?>.
 </p>
Home.php
 <?php get_header(); ?>
 Remaining code part.(after excluding header / footer)
 <?php get_footer(); ?>
functions.php
 File is place inside theme folder.
wp-content/themes/yourtheme/functions.php
 Changes default behavior of...
Registering Menu
// registering header and footer menu in functions.php file
function merobox_addmenus() {
register_nav_me...
A look into menu (3.6 version)
Displaying menu (footer menu)
<div class="menu">
<?php
if (has_nav_menu('footer_nav')) {
wp_nav_menu(
array('theme_locatio...
Displaying menu
[ header menu ]
<?php
if (has_nav_menu('header_nav')) {
wp_nav_menu(
array(
'theme_location' => 'header_na...
Theme options
 Option Framework add theme options panel.
 http://wordpress.org/plugins/options-framework/
 Download -> ...
Add Options.php
 Download optons.php file from link below :
 https://github.com/devinsays/options-framework-
plugin/blob...
Dynamic text content
Dynamic text
[ option.php ]
 $options[] = array(
 'name' => __('Why Line one', 'options_check'),
 'desc' => __(' Why to...
Dynamic text display [ home.php]
 Add the following code to display previously added content.
<p>
<?php echo of_get_optio...
Dynamic Image Slider
[home.php]
 The Query
 The Loop
 Reset Query
Dynamic Image Slider
[ Post Thumbnail Support]
// Add post thumbnails support in functions.php file
add_theme_support( 'po...
Dynamic Image Slider
<ul class="slides">
<?php
$slider_cat = of_get_option('image_slider');
// The Query
query_posts( 'pos...
Dynamic Image Slider
[ The Query ]
<ul class="slides">
<?php
// The Query
$slider_cat = of_get_option('image_slider');
que...
Dynamic Image Slider
[ The Loop ]
// The Loop
while ( have_posts() ) : the_post();
?>
<li>
<?php the_post_thumbnail('image...
Dynamic Image Slider
[ Reset Query ]
// Reset Query
wp_reset_query();
?>
</ul>
Featured Content
[home.php]
Featured Content Settings
[ The Option Panel : options.php]
$options[] = array(
'name' => __('Featured Page one', 'options...
Featured Content Display
[ get_post() : home.php]
 <?php
 $pageID = of_get_option('featured_page_one');
 $pageObj = get...
Content Type
 Post
- blog, news style content.
- single.php
 Page
- static content like contact us, about us page.
- pag...
single.phpblog_single.html
 Create single.php file.
 Copy all code from blog_single.html to single.php
Post : Single.php
[ blog, news post ]
sidebar.php
header.php - get_header();
footer.php - get_footer();
Post : Single.php
[Demo Post ]
 https://developers.facebook.com/docs/reference/plugins/comments/
Post : single.php
[ The Loop ]
<?php get_header(); ?>
<?php if (have_posts()) :
while(have_posts()) : the_post(); ?>
Titl...
Page : page.php
[ Demo ]
Page : page.php
[ The Loop ]
<?php get_header(); ?>
<?php if (have_posts()) :
while(have_posts()) : the_post(); ?>
Title:...
Custom Page : mycontact.php
<?php
/*
Template Name: My Contact Page
*/
?>
index.phpsingle.php
 Copy all code from single.php to index.php
 Just remove the_content( ) with the_excerpt( )
 And ad...
Sidebars :
Dynamic Widget Ready
[Demo : page, post]
<div class="widget">
<h2><span>Categories</span></h2>
<!– Content Goes...
Sidebars : Dynamic Widget Ready
[ Registering : functions.php]
register_sidebar(
array(
'name' => 'Sidebar',
'id' => 'righ...
Sidebars : Dynamic Widget Ready
[ Displaying : sidebar.php]
<div class="sidebar">
<?php
if ( !function_exists('dynamic_sid...
Extra : Plugin
[ Next Gen Gallery ]
 http://wordpress.org/plugins/nextgen-gallery/
Extra : Plugin
[ Contact Form 7 ]
 http://wordpress.org/plugins/contact-form-7/
Extra : Plugin
[ WP-PageNavi ]
http://wordpress.org/plugins/wp-pagenavi/
Reference
[ For more ]
 http://codex.wordpress.org
 http://www.youtube.com/watch?v=uwecNcdAUaY
 http://line25.com/tutor...
Thank You!
QUESTIONS?
Chandra Prakash Thapa
@cpthapa
cpthapa@gmail.com
cpthapa.com.np
MeroBox.com
Upcoming SlideShare
Loading in...5
×

WordPress theme development from scratch : ICT MeetUp 2013 Nepal

11,465

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
11,465
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
74
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×