Elaine poh & colin ho wicked word press theming techniques

Elaine PohColin Ho

elaine@digitalboomerang.com.sgcolin@digitalboomerang.com.sg

Digital Boomerang

Digital Boomerang

Source: http://creepside.blogspot.com/2008/03/jeepney-stories.html

Source: http://www.stuartxchange.org/Jeepney.html

Source: http://www.stuartxchange.org/Jeepney.html

Source: http://www.stuartxchange.org/Jeepney.html

Hood Ornaments

Source: http://pinoyfunnypictures.blogspot.com/2008_10_01_archive.html

User Feedback Mechanism

Source: http://newshopper.sulekha.com/

AmphibiousMode

Source: http://paulding.blogspot.com/2008/11/amazing-high-tech-jeepney.html

Leather Seats and LCD Monitors

Source: http://cs.scaleautomag.com/scacs/forums/p/68633/739928.aspx

Spoilers

Source: inside.nikebasketball.com

Kobe Bryant

Source: http://sulit.com.ph/, http://blog.asiahotels.com/boracay-guide/, http://www.pvegetah.com/2009/04/electric-vehicle-in-other-place-of-the-philippines/

Last updated: 8-Jul-2010 © Digital Boomerang 2010 22

1. Set up a custom homepage.

Create multiple post queries.

1. Display thumbnails for posts.

2. Add labels with Tags.

3. Stylise individual posts /pages.

What we will be going covering

Let’s get dirty.

Last updated: 8-Jul-2010 © Digital Boomerang 2010 24

header.php

index.php

Typical Wordpress Theme

sidebar.php

footer.php

List latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 25

Homepage

List latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 26

Category

List latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 27

Tag Archive

List latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 28

header.php

index.php sidebar.php

footer.php

List latest posts

Displays something else only on the homepage

On the homepage...

Last updated: 8-Jul-2010 © Digital Boomerang 2010 29

Header.php

Display sticky post

Display a list of most viewed posts

Display latest posts

Set up a Custom Homepage

© Digital Boomerang 2010 30© Digital Boomerang 2010

1

Last updated: 8-Jul-2010 © Digital Boomerang 2010 31

What:To load a custom homepage instead of the WP default homepage (index.php)

http://beta.challenge.gov.sg

Set up a custom Homepage

Last updated: 8-Jul-2010 © Digital Boomerang 2010 32

Homepage

Homepage

home.phphome.php

index.phpindex.php

How:

Step 1: Duplicate index.php

Step 2: Rename as home.php

WordPress Hierarchy

WP will first look for the existence of this file.

If it finds one, WP will load this file

If it doesn’t, WP will load the default index.php

Set up a custom Homepage

Last updated: 8-Jul-2010 © Digital Boomerang 2010 33

Header.php

home.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 34

National Geographic

Last updated: 8-Jul-2010 © Digital Boomerang 2010 35

Chris Phelps Photography

Last updated: 8-Jul-2010 © Digital Boomerang 2010 36

Ravengraphy

home.php

header.php

sidebar.php

footer.php

1 query to display latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 37

Set up a custom Homepage

MCYS SCREENSHOT

Last updated: 8-Jul-2010 © Digital Boomerang 2010 38

MCYS SCREENSHOT

Last updated: 8-Jul-2010 © Digital Boomerang 2010 39

MCYS SCREENSHOT

Last updated: 8-Jul-2010 © Digital Boomerang 2010 40

MCYS SCREENSHOT

Last updated: 8-Jul-2010 © Digital Boomerang 2010 41

Last updated: 8-Jul-2010 © Digital Boomerang 2010 42

Header.php

Display only 1 sticky post

Display a list of most viewed posts

Display latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 43

Header.php

Display only 1 sticky post

Display latest posts

Create multiple post queries

© Digital Boomerang 2010 44© Digital Boomerang 2010

2

Last updated: 8-Jul-2010 © Digital Boomerang 2010 45

How: Step 1: Query sticky post. Paste this code in home.php.

Step 2: Create a loop to display the sticky post.

Step 3: At the end of the sticky post loop, add this:

$sticky = get_option( 'sticky_posts' );

query_posts ( array( 'post__in' => $sticky'caller_get_posts' => 1, 'posts_per_page' => 1 ) );

wp_reset_query();// Reset the query

Create multiple post queries

Last updated: 8-Jul-2010 © Digital Boomerang 2010 46

Query sticky

Resets query

home.php

Start of Loop

End of Loop

Last updated: 8-Jul-2010 © Digital Boomerang 2010 47

Header.php

Display only 1 sticky post

Display latest posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 48

How: Step 1: Query 10 latest posts excluding sticky posts before the latest posts loop.

query_posts(array('posts_per_page' => 10, 'post__not_in' =>get_option('sticky_posts')));

Create multiple post queries

Last updated: 8-Jul-2010 © Digital Boomerang 2010 49

Query latest posts

home.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 50

Header.php

Display only 1 sticky post

Display latest postsExcluding sticky post

Last updated: 8-Jul-2010 © Digital Boomerang 2010 51

Digital Photography School

Last updated: 8-Jul-2010 © Digital Boomerang 2010 52

Patrick Hoelck

Last updated: 8-Jul-2010 © Digital Boomerang 2010 53

GOOD Magazine

Display thumbnails for posts

© Digital Boomerang 2010 54© Digital Boomerang 2010

3

Last updated: 8-Jul-2010 © Digital Boomerang 2010 55

Display thumbnails for posts

http://beta.challenge.gov.sg

What:To display a thumbnail of a post in a listing.

Last updated: 8-Jul-2010 © Digital Boomerang 2010 56

Step 1: Add these 2 lines of text into functions.php.

add_theme_support( 'post-thumbnails' );// Declares that your theme supports this feature.

set_post_thumbnail_size( 200, 200, true ); // Sets Thumbnail size, crops to 200 by 200

How:

Display thumbnails for posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 57

functions.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 58

Step 2: Add this line of text into page.php, single.php, home.php or even index.php within the Loop.

the_post_thumbnail(); // Displays default thumbnail, 200 by 200

How:

Display thumbnails for posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 59

Display thumbnails

home.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 60

Step 3: Upload images for posts. Select image as “featured image” in every post.

How:

Display thumbnails for posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 61

Display thumbnails for posts

http://beta.challenge.gov.sg

What:To display a thumbnail of a post in a listing.

thumbnails

thumbnails

Last updated: 8-Jul-2010 © Digital Boomerang 2010 62

Step 1: Add this line into functions.php.

Step 2: Add this line of text into page.php, single.php, home.php or even index.php within the Loop.

add_image_size(‘big-thumbnail’, 400, 250, true );// Set bigger thumbnails for posts

How:

the_post_thumbnail(‘big-thumbnail’);// Displays thumbnails 400 by 250

Display thumbnails for posts

the_post_thumbnail(); // Displays default thumbnail, 200 by 200

Last updated: 8-Jul-2010 © Digital Boomerang 2010 63

functions.php

Add new thumbnail size

Last updated: 8-Jul-2010 © Digital Boomerang 2010 64

Display bigger thumbnails

home.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 65

Tips

• Only applicable for WP2.9 and above.

• Make sure an image is selected as “Featured Image”

• Thumbnail sizes can’t be changed after setting.

So plan ahead!

Display thumbnails for posts

Last updated: 8-Jul-2010 © Digital Boomerang 2010 66

WPZoom PhotoBlog

Last updated: 8-Jul-2010 © Digital Boomerang 2010 67

TIME MagazineAbduzeedo

Last updated: 8-Jul-2010 © Digital Boomerang 2010 68

Bergh

Last updated: 8-Jul-2010 © Digital Boomerang 2010 69

Homepage

Add labels with Tags

© Digital Boomerang 2010 70© Digital Boomerang 2010

4

Last updated: 8-Jul-2010 © Digital Boomerang 2010 71

Step 1: Create a tag named ‘Online Exclusive’ for your post.

Step 2: In the loop of home.php, enter these lines of code.

How:

if ( has_tag('online-exclusive') ) {echo "<span class='tag-excl'>Online Exclusive</span>"; }

Add labels with Tags

Last updated: 8-Jul-2010 © Digital Boomerang 2010 72

Display a label for each post tagged ‘Online Exclusive’.

home.php

Last updated: 8-Jul-2010 © Digital Boomerang 2010 73

CSS style for the label, Online Exclusive

Styles.css

Last updated: 8-Jul-2010 © Digital Boomerang 2010 74

Ars Technica

Last updated: 8-Jul-2010 © Digital Boomerang 2010 75

10 Steps

Last updated: 8-Jul-2010 © Digital Boomerang 2010 76

WIRED

Last updated: 8-Jul-2010 © Digital Boomerang 2010 77

Homepage

Last updated: 8-Jul-2010 © Digital Boomerang 2010 78

Category

© Digital Boomerang 2010 79© Digital Boomerang 2010

Stylise individual Posts / Pages5

Last updated: 8-Jul-2010 © Digital Boomerang 2010 80

What:To dynamically insert class names where applied.

<?php body_class(); ?>// declared in header.php

Stylise individual posts/pages

Last updated: 8-Jul-2010 © Digital Boomerang 2010 81

Homepage

<body class=“home blog”>

<body <?php body_class(); ?> >

Last updated: 8-Jul-2010 © Digital Boomerang 2010 82

Category

<body class=“archive category category-on-job”>

<body <?php body_class(); ?> >

Last updated: 8-Jul-2010 © Digital Boomerang 2010 83

Stylise individual posts/pages

.home .ico-exclusive {background:#00A8DF;left:0; top:61px;height:15px; width:120px;text-align:left;color:#fff;}

.category .ico-exclusive {background-image: url(images/ico-excl.png);right:0; bottom:-10px;height:45px; width:125px;}

Jason Santa Maria’s site

Jason Santa Maria’s site

Jason Santa Maria’s site

Last updated: 8-Jul-2010 © Digital Boomerang 2010 87

Last updated: 8-Jul-2010 © Digital Boomerang 2010 88

Last updated: 8-Jul-2010 © Digital Boomerang 2010 89

Last updated: 8-Jul-2010 © Digital Boomerang 2010 90

Last updated: 8-Jul-2010 © Digital Boomerang 2010 91

Last updated: 8-Jul-2010 © Digital Boomerang 2010 92

What:To dynamically insert class names where applied.

<?php post_class(); ?>// declared in content areas

Stylise individual posts/pages

Last updated: 8-Jul-2010 © Digital Boomerang 2010 93

<div id=“post-<?php the_ID(); ?>” the <?php post_class(); ?> >

<div=id“post-32” class=“category-episode-12 tag-anna”>

Last updated: 8-Jul-2010 © Digital Boomerang 2010 94

<div id=“post-<?php the_ID(); ?>” the <?php post_class(); ?> >

<div=id“post-32” class=“category-episode-12 tag-hui-leng”>

Carsonified

Carsonified

Carsonified

Carsonified

Carsonified

Carsonified

Carsonified

Last updated: 8-Jul-2010 © Digital Boomerang 2010 102

1. Set up a custom homepage.

Create multiple post queries.

1. Display thumbnails for posts.

2. Add labels with Tags.

3. Stylise individual posts /pages.

Recap the Hacks

Before you hack away…

© Digital Boomerang 2010 103© Digital Boomerang 2010

© Digital Boomerang 2010 104© Digital Boomerang 2010

Wordpress in the Future...

Join us on Facebookhttp://www.facebook.com/digitalboomerang

Join us on Facebookhttp://www.facebook.com/digitalboomerang

© Digital Boomerang 2010 105© Digital Boomerang 2010

Questions?

Last updated: 8-Jul-2010 © Digital Boomerang 2010 106

Provides web development tools at your fingertips while you browse.

You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug

Inspect and edit HTML

Tweak CSS

Tools that will help you

http://getfirebug.com/

http://fileforum.betanews.com/detail/Internet-Explorer-Developer-Toolbar/1127145234/1

Last updated: 8-Jul-2010 © Digital Boomerang 2010 107

Provides web development tools at your fingertips while you browse FOR INTERNET EXPLORER 6 AND 7.

You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

IE Developer Bar

Tools that will help you

Last updated: 8-Jul-2010 © Digital Boomerang 2010 108

Tools that will help you

IE Tester

IETester is a free Web Browser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 andIE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process. 

http://www.my-debugbar.com/wiki/IETester/HomePage

Last updated: 8-Jul-2010 © Digital Boomerang 2010 109

Tools that will help you

Easily generate your own CSS style sheet code/definitions in just minutes with this free code generator. There are also numerous helpful articles on CSS properties, tips and tricks

http://www.css-generator.com/

Last updated: 8-Jul-2010 © Digital Boomerang 2010 110

Tools that will help you

Run popular browsers without installs. Helps to easily test compatibility of your CSS and functionality on different browsers.

http://spoon.net/browsers/

Spoon Browser Sandbox

Last updated: 8-Jul-2010 © Digital Boomerang 2010 111

Tools that will help you

Notepad++ is a free source code editor that supports several languages (including HTML, XML, Javascript, PHP, CSS).

http://notepad-plus-plus.org/

Notepad ++