Introduction to WordPress Theme Development
-
Upload
sitdhibong-laokok -
Category
Technology
-
view
8.032 -
download
2
description
Transcript of Introduction to WordPress Theme Development
WordPressIntroduction to create your own theme
CC:BY-NC
Info.Name: Sitdhibong Laokok
Contact: [email protected]
Class Name: WordPress Theme Dev.
Office Hours: 24/7 (for e-mail)
✓ Download WordPress 3.x+
http://www.wordpress.org/
✓Web server (Public or localhost)
✓ PHP 5.2+
✓ Database (MySQL might be good)
✓Make it workshttp://codex.wordpress.org/Installing_WordPress
http://www.wordpress.org/download
Checklist
http://we.in.th
Serf the Web
WordPress Theme
http://we.in.thWordPress Plugin
W
Web Site
Example for page structures
header
content sidebar
footer
There is loop inside this block for display blog entry
Note: I can rearrange page structure whatever I want.
Loop ?
header
content
sidebar
WordPress theme in the real world
Example for Template
*A lot more at http://wordpress.org/extend/themes
Theme Hierarchy: The template files are called to generate a WordPress page
• 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
Minimum file for theme
style.css
/* Theme Name: Abracadabra Theme URI: http://we.in.th/theme/abracadabra Description: Just kidding the theme does not exists Author: Apps Tree Author URI: http://we.in.th/ Version: 0.1.0 Tags: black, white, two-columns
License: GPL 2.0 License URI: license.txt*/
body { padding: 0; margin: 0;}...
Theme Info
http://codex.wordpress.org/File_Header
Tags
Description
Version
screenshot.pnguse for theme thumbnail
Theme Name
Author
Twenty Eleven theme WordPress
What is the Loop ?
The Loop is used by WordPress to display each of your posts.
Enter the Loop
Query for blog posts
Have posts ?
Display post
Exit
Yep
No more post
Here’s the Loop
Loop start here (07-15)
have_posts, the_post, the_ID, post_class, the_permalink, the_title, the_content, the_tags are not PHP’s func.
01: <?php02: // index.php03: get_header(); // get content from ‘header.php’ ?>04: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>14: </div>15: <?php endwhile; ?>16: <?php endif; ?>17: </div>18: 19: <?php get_sidebar(); // display content from ‘sidebar.php’ ?>20:21: <?php get_footer(); // display content from ‘footer.php’ ?>
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 -->
Loop result (04-10)
the things we’ve get from loop
What are tags from previous code ?
- It’s called ‘template tags’, here the often use template tags
• the_content()
• the_title()
• the_permalik()
• the_category()
• the_tags()
• the_date()
• the_time()
• the_excerpt()
• the_meta()
• the_ID()
• the_post_thumbnail()
• the_author()
• the_shortlink()
• edit_post_link()
http://codex.wordpress.org/Template_Tags
More Info.• WordPress Codex
• WordPress Theme and Design Presentation - Menn Chris