Elaine poh & colin ho wicked word press theming techniques

Elaine PohColin Ho

[email protected]@digitalboomerang.com.sg

Digital Boomerang

Digital Boomerang

Source: http://creepside.blogspot.com/2008/03/jeepney-stories.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.


header.php

index.php

Typical Wordpress Theme

sidebar.php

footer.php

List latest posts


Homepage

List latest posts


Category

List latest posts


Tag Archive

List latest posts


header.php

index.php sidebar.php

footer.php

List latest posts

Displays something else only on the homepage

On the homepage...


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


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

http://beta.challenge.gov.sg

Set up a custom Homepage


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



Header.php

home.php


National Geographic


Chris Phelps Photography


Ravengraphy

home.php

header.php

sidebar.php

footer.php

1 query to display latest posts



MCYS SCREENSHOT


MCYS SCREENSHOT


MCYS SCREENSHOT


MCYS SCREENSHOT



Header.php

Display only 1 sticky post

Display a list of most viewed posts



Header.php



Create multiple post queries


2


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



Query sticky

Resets query

home.php

Start of Loop

End of Loop


Header.php




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')));



Query latest posts

home.php


Header.php


Display latest postsExcluding sticky post


Digital Photography School


Patrick Hoelck


GOOD Magazine

Display thumbnails for posts


3




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


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:



functions.php


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

home.php


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

How:





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

thumbnails

thumbnails


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


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


functions.php

Add new thumbnail size


Display bigger thumbnails

home.php


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!



WPZoom PhotoBlog


TIME MagazineAbduzeedo


Bergh


Homepage

Add labels with Tags


4


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


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

home.php


CSS style for the label, Online Exclusive

Styles.css


Ars Technica


10 Steps


WIRED


Homepage


Category


Stylise individual Posts / Pages5


What:To dynamically insert class names where applied.

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

Stylise individual posts/pages


Homepage

<body class=“home blog”>

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


Category

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

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



.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









What:To dynamically insert class names where applied.

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



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

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


<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


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…



Wordpress in the Future...

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

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


Questions?


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


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




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



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/



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



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

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

Notepad ++

Technology

Elaine poh & colin ho wicked word press theming techniques