WordPress theme development from scratch : ICT MeetUp 2013 Nepal
-
Upload
cp-thapa -
Category
Technology
-
view
11.350 -
download
1
description
Transcript of 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