The document provides an introduction to creating a WordPress theme, detailing essential components like necessary software, file hierarchy, and coding structures. It emphasizes the importance of templates and the loop in displaying posts, alongside examples of template tags used in WordPress. Additionally, it includes checklist items to set up WordPress and links to resources for further learning.

1. WordPress
Introduction to create your own theme
CC:BY-NC

2. Info.
Name: Sitdhibong Laokok
Contact: sitdhibong@gmail.com
Class Name: WordPress Theme Dev.
Office Hours: 24/7 (for e-mail)

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. Serf the Web
http://we.in.th

5. Web Site
WordPress Plugin
W
http://we.in.th
WordPress Theme

6. Example for page structures
header
There is
loop inside
this block
content sidebar
for display
blog entry
?
Lo o p
footer
Note: I can rearrange page structure
whatever I want.

7. WordPress theme in the real world
er
head
si
d
eb
t ar
en
nt
co

8. Example for Template
*A lot more at http://wordpress.org/extend/themes

9. Theme
Hierarchy:
The
template
files are
called to
generate a
WordPress
page

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. 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. Twenty Eleven theme
screenshot.png WordPress
use for theme thumbnail
Version
Author
Theme Name
Description
Tags

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. Here’s the Loop
01: <?php
02: / 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 are
17: </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. 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. 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. More Info.
• WordPress Codex
• WordPress Theme and Design
Presentation - Menn Chris