WordPressIntroduction to create your own theme

CC:BY-NC

Info.Name: Sitdhibong Laokok

Contact: sitdhibong@gmail.com

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