elaine poh & colin ho wicked word press theming techniques
TRANSCRIPT
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
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 ++