WordPress theme development from scratch : ICT MeetUp 2013 Nepal

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

Go to Appearance->Themes?

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

Visit the site[ demo ]

Static Link1. 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

Visit the site[ again ]

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 filefunction 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 content

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

Dynamic Image Slider [ Post Thumbnail Support]// Add post thumbnails support in functions.php fileadd_theme_support( 'post-thumbnails' );

// default thumbnail size for photo galleryset_post_thumbnail_size( 281, 140, true );

//thumbnail size for image slideradd_image_size( 'image_slide_thumb', 940, 360, true );

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>

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

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><?phpendwhile;

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_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[ Demo ]

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

[email protected]

Technology

WordPress theme development from scratch : ICT MeetUp 2013 Nepal