WordPress theme development from scratch : ICT MeetUp 2013 Nepal

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 WordPress admin.
At a minimum, you need:
 index.php
 style.css

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 ]

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).
*/

Add screenshot image inside theme folder
[ wp-content/themes/brownie/screenshot.png ]

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

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

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_bg clearfix">

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>

Footer.php
// Add wp_footer() function before end of </body> tag.
<?php wp_footer(); ?>
</body>
</html>

Footer Copyright.
[ footer.php ]
 <p>
 ©
 <?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 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.

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');

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_location' => 'footer_nav')
);
}
?>
</div>

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'
)
);
}
?>

Theme options
 Option Framework add theme options panel.
 http://wordpress.org/plugins/options-framework/
 Download -> Install -> Activate.

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.

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‘
 );

Dynamic text display [ home.php]
 Add the following code to display previously added content.
<p>
<?php echo of_get_option('why_line_one'); ?>
</p>

Dynamic Image Slider
[home.php]
 The Query
 The Loop
 Reset Query

[ 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 );

[ 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);

[ 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;

[ Reset Query ]
// Reset Query
wp_reset_query();
?>
</ul>

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);

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>

Content Type
 Post
- blog, news style content.
- single.php
 Page
- static content like contact us, about us page.
- page.php

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(); ?>
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(); ?>

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

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 add read more link using the_permalink( );
Index.php
[ default template ]

Sidebars :
Dynamic Widget Ready
[Demo : page, post]
<div class="widget">
<h2><span>Categories</span></h2>
<!– Content Goes here -->
</div>

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>',
)
);

Sidebars : Dynamic Widget Ready
[ Displaying : sidebar.php]
<div class="sidebar">
<?php
if ( !function_exists('dynamic_sidebar') ||
!dynamic_sidebar('right-sidebar') ) :
endif;
?>
</div>

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/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 

Thank You!
QUESTIONS?
Chandra Prakash Thapa
@cpthapa
cpthapa@gmail.com
cpthapa.com.np
MeroBox.com

WordPress theme development from scratch : ICT MeetUp 2013 Nepal

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (14)

Similar to WordPress theme development from scratch : ICT MeetUp 2013 Nepal

Similar to WordPress theme development from scratch : ICT MeetUp 2013 Nepal (20)

Recently uploaded

Recently uploaded (20)

WordPress theme development from scratch : ICT MeetUp 2013 Nepal