Introduction to WordPress Theme Development

9,389 views

Published on

Introduction for WordPress theme development. let's you know how to prepare resource for theme development.

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

No Downloads
Views
Total views
9,389
On SlideShare
0
From Embeds
0
Number of Embeds
2,429
Actions
Shares
0
Downloads
49
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Introduction to WordPress Theme Development

    1. 1. WordPressIntroduction to create your own theme CC:BY-NC
    2. 2. Info.Name: Sitdhibong LaokokContact: sitdhibong@gmail.comClass Name: WordPress Theme Dev.Office Hours: 24/7 (for e-mail)
    3. 3. Checklist✓ Download WordPress 3.x+ http:/ /www.wordpress.org/ http://www.wordpress.org/download✓ Web server (Public or localhost)✓ PHP 5.2+✓ Database (MySQL might be good)✓ Make it works http://codex.wordpress.org/Installing_WordPress
    4. 4. Serf the Web http://we.in.th
    5. 5. Web Site WordPress Plugin W http://we.in.th WordPress Theme
    6. 6. Example for page structures header There isloop insidethis block content sidebarfor displayblog entry ? Lo o p footer Note: I can rearrange page structure whatever I want.
    7. 7. WordPress theme in the real world erhead si d eb t ar en ntco
    8. 8. Example for Template *A lot more at http://wordpress.org/extend/themes
    9. 9. ThemeHierarchy:Thetemplatefiles arecalled togenerate aWordPresspage
    10. 10. Minimum file for theme • style.css: required for inform theme information • header.php: theme header • index.php: main template • single.php: single post display • page.php: template for static home page • footer.php: theme footer • functions.php: functions file
    11. 11. style.css /* Theme Name: Abracadabra Theme URI: http://we.in.th/theme/abracadabra Theme Description: Just kidding the theme does not exists Author: Apps Tree Info Author URI: http://we.in.th/ Version: 0.1.0 Tags: black, white, two-columns License: GPL 2.0 License URI: license.txt */ body { http://codex.wordpress.org/File_Header padding: 0; margin: 0; } . . .
    12. 12. Twenty Eleven theme screenshot.png WordPressuse for theme thumbnail Version Author Theme Name Description Tags
    13. 13. What is the Loop ? The Loop is used by WordPress to display each of your posts. Enter the Loop Yep Query for blog Have Display posts posts ? post No more post Exit
    14. 14. Here’s the Loop01: <?php02: / index.php /03: get_header(); / get content from ‘header.php’ ?> /04: Loop start here (07-15)05: <div id=”sl-content-wrap”>06: <?php if ( have_posts() ) : ?>07: <?php while( have_posts() ) : the_post(); ?>08: <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>09: <a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>10: <h1><?php the_title(); ?></h1>11: </a>12: <p><?php the_content(); ?></p>13: <p><?php the_tags(‘Tag: ‘, ‘,’, ‘.’); ?></p> have_posts, the_post,14: </div> the_ID, post_class,15: <?php endwhile; ?> the_permalink, the_title,16: <?php endif; ?> the_content, the_tags are17: </div> not PHP’s func.18:19: <?php get_sidebar(); / display content from ‘sidebar.php’ ?> /20:21: <?php get_footer(); / display content from ‘footer.php’ ?> /
    15. 15. the things we’ve get from loop Loop result (04-10) 01: <!-- Header HTML - above --> 02: <!-- In this case: there is only one blog entry --> 03: <div id=”sl-content-wrap”> 04: <div id=”post-1” class=”blog-post text ...”> 05: <a href=”http://www.we.in.th/lorem-ipsum” title=”Lorem Ipsum”> 06: <h1>Lorem Ipsum</h1> 07: </a> 08: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam eret volutpat.</p> 09: <p>Tag: dummy, WP, Template.</p> 10: </div> 11: </div> 12: 13: <!-- Sidebar HTML --> 14: 15: <!-- Footer HTML - below -->
    16. 16. What are tags from previous code ?- It’s called ‘template tags’, here the often use template tags • the_content() • the_meta() • the_title() • the_ID() • the_permalik() • the_post_thumbnail() • the_category() • the_author() • the_tags() • the_shortlink() • the_date() • edit_post_link() • the_time() http://codex.wordpress.org/Template_Tags • the_excerpt()
    17. 17. More Info.• WordPress Codex• WordPress Theme and Design Presentation - Menn Chris

    ×