2. Colin Ho Elaine Poh
colin@digitalboomerang.com.sg elaine@digitalboomerang.com.sg
10. Hood
Ornaments
Source: http://www.stuartxchange.org/Jeepney.html
11. User Feedback
Mechanism
Source: http://pinoyfunnypictures.blogspot.com/2008_10_01_archive.html
12. Amphibious
Mode
Source: http://newshopper.sulekha.com/
13. Leather Seats
and LCD
Monitors
Source: http://paulding.blogspot.com/2008/11/amazing-high-
22. W h a t w e w il l b e g o in g
c o v e r in g
1. Set up a custom homepage.
Create multiple post queries.
5. Display thumbnails for posts.
7. Add labels with Tags.
9. Stylise individual posts /pages.
Last updated: 8-Jul-2010 © Digital Boomerang 2010 22
24. T y p ic a l W o r d p r e s s
Th e m e
header.php
index.php sidebar.php
List latest posts
footer.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 24
25. Homepage
List latest posts
Last updated: 8-Jul-2010 © Digital Boomerang 2010 25
26. Category
List latest posts
Last updated: 8-Jul-2010 © Digital Boomerang 2010 26
27. Tag Archive
List latest posts
Last updated: 8-Jul-2010 © Digital Boomerang 2010 27
28. O n t h e h o m e p a g e ...
header.php
Displays something else
only on the homepage
index.php sidebar.php
List latest posts
footer.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 28
29. Header.php
Display sticky post
Display a list of most
viewed posts
Display latest posts
Last updated: 8-Jul-2010 © Digital Boomerang 2010 29
30. 1 Setup aC om H g
ust omepae
© Digital Boomerang 2010 30
© Digital Boomerang 2010
31. Set up a cus to m
Ho m ep ag e
http://beta.challenge.gov.sg
Wh a t :
To load a custom homepage instead
of the WP default homepage
(index.php)
Last updated: 8-Jul-2010 © Digital Boomerang 2010 31
32. Set up a cus to m
Ho m ep ag e
Ho w : WordPress Hierarchy
Step 1: Duplicate index.php Homepage
Step 2: Rename as home.php WP will first look for the
existence of this file.
home.php
If it finds one, WP will
load this file
If it doesn’t, WP will load
the default index.php
index.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 32
33. Header.php
home.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 33
34. National
Geographic
Last updated: 8-Jul-2010 © Digital Boomerang 2010 34
35. Chris Phelps
Photography
Last updated: 8-Jul-2010 © Digital Boomerang 2010 35
37. Set up a cus to m
Ho m ep ag e
header.php
home.php sidebar.php
1 query to display
latest posts
footer.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 37
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 42
44. 2 Create multiple post queries
© Digital Boomerang 2010 44
© Digital Boomerang 2010
45. C r e a t e m u l t ip l e p o s t
q u e r ie s
Ho w :
Step 1: Query sticky post. Paste this code in home.php.
$sticky = get_option( 'sticky_posts' );
query_posts ( array(
'post__in' => $sticky
'caller_get_posts' => 1,
'posts_per_page' => 1 ) );
Step 2: Create a loop to display the sticky post.
Step 3: At the end of the sticky post loop, add this:
wp_reset_query();
// Reset the query
Last updated: 8-Jul-2010 © Digital Boomerang 2010 45
46. home.php
Query sticky
Start of
Loop
End of Loop
sets query
Last updated: 8-Jul-2010 © Digital Boomerang 2010 46
48. C r e a t e m u l t ip l e p o s t
q u e r ie s
Ho w :
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')
));
Last updated: 8-Jul-2010 © Digital Boomerang 2010 48
50. Header.php
Display only 1 sticky post
Display latest posts
Excluding sticky post
Last updated: 8-Jul-2010 © Digital Boomerang 2010 50
54. 3 Display thumbnails for posts
© Digital Boomerang 2010 54
© Digital Boomerang 2010
55. D is p l a y t h u m b n a il s f o r p o s t s
http://beta.challenge.gov.sg
Wh a t :
To display a thumbnail of a post in a
listing.
Last updated: 8-Jul-2010 © Digital Boomerang 2010 55
56. D is p l a y t h u m b n a il s f o r
posts
Ho w
:
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
Last updated: 8-Jul-2010 © Digital Boomerang 2010 56
58. D is p l a y t h u m b n a il s f o r
posts
Ho w
:
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
Last updated: 8-Jul-2010 © Digital Boomerang 2010 58
60. D is p l a y t h u m b n a il s f o r
posts
Ho w
:
Step 3: Upload images for posts.
Select image as “featured
image” in every post.
Last updated: 8-Jul-2010 © Digital Boomerang 2010 60
61. D is p l a y t h u m b n a il s f o r p o s t s
thumbnails
http://beta.challenge.gov.sg
Wh a t :
To display a thumbnail of a post in a
listing.
thumbnails
Last updated: 8-Jul-2010 © Digital Boomerang 2010 61
62. D is p l a y t h u m b n a il s f o r
posts
Ho w
:
Step 1: Add this line into functions.php.
add_image_size(‘big-thumbnail’, 400, 250, true );
// Set bigger thumbnails for posts
Step 2: Add this line of text into page.php, single.php,
home.php or even index.php within the Loop.
the_post_thumbnail(‘big-thumbnail’);
// Displays thumbnails 400 by 250
the_post_thumbnail();
// Displays default thumbnail, 200 by 200
Last updated: 8-Jul-2010 © Digital Boomerang 2010 62
63. functions.php
Add new thumbnail size
Last updated: 8-Jul-2010 © Digital Boomerang 2010 63
65. D is p l a y t h u m b n a il s f o r
posts
T ip s
• 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!
Last updated: 8-Jul-2010 © Digital Boomerang 2010 65
67. TIME Magazine
Abduzeedo
Last updated: 8-Jul-2010 © Digital Boomerang 2010 67
70. 4
Add labels with Tags
© Digital Boomerang 2010 70
© Digital Boomerang 2010
71. Ad d l a b e l s w it h T a g s
Ho w
:
Step 1: Create a tag named ‘Online Exclusive’ for your post.
Step 2: In the loop of home.php, enter these lines of code.
if ( has_tag('online-exclusive') ) {
echo "<span class='tag-excl'>Online Exclusive</span>";
}
Last updated: 8-Jul-2010 © Digital Boomerang 2010 71
72. home.php
Display a label for
each post tagged
‘Online Exclusive’.
Last updated: 8-Jul-2010 © Digital Boomerang 2010 72
73. Styles.css
CSS style for the label,
Online Exclusive
Last updated: 8-Jul-2010 © Digital Boomerang 2010 73
79. 5
Stylise individual Posts / Pages
© Digital Boomerang 2010 79
© Digital Boomerang 2010
80. Stylise individual posts/pages
Wh a t :
To dynamically insert class names where applied.
<?php body_class(); ?>
// declared in header.php
Last updated: 8-Jul-2010 © Digital Boomerang 2010 80
81. Homepage
<body <?php body_class(); ?> >
<body class=“home blog”>
Last updated: 8-Jul-2010 © Digital Boomerang 2010 81
83. Stylise individual posts/pages
.home .ico-exclusive {
background:#00A8DF; .category .ico-exclusive {
left:0; top:61px; background-image:
height:15px; url(images/ico-excl.png);
width:120px; right:0; bottom:-10px;
text-align:left; height:45px; width:125px;
color:#fff; }
}
Last updated: 8-Jul-2010 © Digital Boomerang 2010 83
92. Stylise individual posts/pages
Wh a t :
To dynamically insert class names where applied.
<?php post_class(); ?>
// declared in content areas
Last updated: 8-Jul-2010 © Digital Boomerang 2010 92
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 93
94. <div id=“post-<?php the_ID(); ?>” the <?php post_class(); ?> >
<div=id“post-32” class=“category-episode-12 tag-hui-leng”>
Last updated: 8-Jul-2010 © Digital Boomerang 2010 94
102. Re c a p t h e H a c k s
1. Set up a custom homepage.
Create multiple post queries.
5. Display thumbnails for posts.
7. Add labels with Tags.
9. Stylise individual posts /pages.
Last updated: 8-Jul-2010 © Digital Boomerang 2010 102
103. B ore y ha a a…
ef ou ck wy
© Digital Boomerang 2010 103
© Digital Boomerang 2010
104. Wordpress in the Future...
Join us on Facebook
http://www.facebook.com/digitalboomerang
© Digital Boomerang 2010 104
© Digital Boomerang 2010
105. Questions?
© Digital Boomerang 2010 105
© Digital Boomerang 2010
106. T o o l s t h a t w il l h e l p y o u
Firebug
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.
http://getfirebug.com/
Inspect and edit Tweak
HTML CSS
Last updated: 8-Jul-2010 © Digital Boomerang 2010 106
107. T o o l s t h a t w il l h e l p y o u
IE Developer Bar
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.
http://fileforum.betanews.com/detail/Internet-Explorer-Developer-Toolbar
Last updated: 8-Jul-2010 © Digital Boomerang 2010 107
108. T o o l s t h a t w il l h e l p y o u
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 108
109. T o o l s t h a t w il l h e l p y o u
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 109
110. T o o l s t h a t w il l h e l p y o u
Spoon Browser Sandbox
Run popular browsers without installs. Helps to easily test
compatibility of your CSS and functionality on different
browsers.
http://spoon.net/browsers/
Last updated: 8-Jul-2010 © Digital Boomerang 2010 110
111. T o o l s t h a t w il l h e l p y o u
Notepad ++
Notepad++ is a free source code editor that supports
several languages (including HTML, XML, Javascript, PHP,
CSS).
http://notepad-plus-plus.org/
Last updated: 8-Jul-2010 © Digital Boomerang 2010 111
Editor's Notes Now I can go ahead to create something like that. X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more By default, 1 query. Need 1 loop to display. X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more Talk in more detail. First query to display sticky. Going to show u how to do this. Create multiple post queries First, First, X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more Start: There are only 2 steps. Go to code to show. Go to code to show. Go to code to show. Go to code to show. Break it up. Go to code to show. Go to code to show. http://markjaquith.wordpress.com/2009/12/23/new-in-wordpress-2-9-post-thumbnail-images/ X4 to explain 4 queries in tabs, 4 different loop. hao lian more X4 to explain 4 queries in tabs, 4 different loop. hao lian more Note: unique name must be one word. No spacing. For good practice, keep the Value to a consistent entry. You might have other uses for this in the future. CSS styles….screenshot So the end results will look like this. So the end results will look like this. So the end results will look like this. So the end results will look like this. So the end results will look like this. Demo Sixlives.sg Stylise individual posts /pages With css, we a But what if say for a site, there are 5 authors. And for each author, we wanted to create a different look for their posts. If You think body_class can handle this, you are wrong! Stylise individual posts /pages Recap our super charged slides. Need a closure – repeat the hacks Say what are the possibilities with the other sites. Realte the hacks to say maybe sgem Join us on fb to find out more Happy hacking! If theres time… if not ….
