Elaine poh & colin ho   wicked word press theming techniques
Upcoming SlideShare
Loading in...5
×
 

Elaine poh & colin ho wicked word press theming techniques

on

  • 711 views

 

Statistics

Views

Total Views
711
Views on SlideShare
711
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 ….

Elaine poh & colin ho   wicked word press theming techniques Elaine poh & colin ho wicked word press theming techniques Presentation Transcript

  • Colin Ho Elaine Pohcolin@digitalboomerang.com.sg elaine@digitalboomerang.com.sg
  • Digital Boomerang
  • Digital Boomerang View slide
  • Source: http://creepside.blogspot.com/2008/03/jeepney-stories.html View slide
  • Source: http://www.stuartxchange.org/Jeepney.html
  • Source: http://www.stuartxchange.org/Jeepney.html
  • Hood OrnamentsSource: http://www.stuartxchange.org/Jeepney.html
  • User Feedback MechanismSource: http://pinoyfunnypictures.blogspot.com/2008_10_01_archive.html
  • Amphibious ModeSource: http://newshopper.sulekha.com/
  • Leather Seats and LCD MonitorsSource: http://paulding.blogspot.com/2008/11/amazing-high-
  • SpoilersSource: http://cs.scaleautomag.com/scacs/forums/p/68633/739928.aspx
  • Kobe BryantSource: inside.nikebasketball.com
  • 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/
  • W h a t w e w il l b e g o in gc 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
  • Let’s get
  • T y p ic a l W o r d p r e s sTh e m e header.php index.php sidebar.php List latest posts footer.php Last updated: 8-Jul-2010 © Digital Boomerang 2010 24
  • Homepage List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 25
  • Category List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 26
  • Tag Archive List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 27
  • 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
  • Header.php Display sticky postDisplay a list of most viewed postsDisplay latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 29
  • 1 Setup aC om H g ust omepae © Digital Boomerang 2010 30© Digital Boomerang 2010
  • Set up a cus to mHo 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
  • Set up a cus to mHo 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
  • Header.php home.phpLast updated: 8-Jul-2010 © Digital Boomerang 2010 33
  • National GeographicLast updated: 8-Jul-2010 © Digital Boomerang 2010 34
  • Chris Phelps PhotographyLast updated: 8-Jul-2010 © Digital Boomerang 2010 35
  • RavengraphyLast updated: 8-Jul-2010 © Digital Boomerang 2010 36
  • Set up a cus to mHo 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
  • MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 38
  • MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 39
  • MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 40
  • MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 41
  • Header.phpDisplay only 1 sticky postDisplay a list of most viewed posts Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 42
  • Header.phpDisplay only 1 sticky post Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 43
  • 2 Create multiple post queries © Digital Boomerang 2010 44© Digital Boomerang 2010
  • C r e a t e m u l t ip l e p o s tq 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
  • home.php Query sticky Start of Loop End of Loopsets query Last updated: 8-Jul-2010 © Digital Boomerang 2010 46
  • Header.phpDisplay only 1 sticky post Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 47
  • C r e a t e m u l t ip l e p o s tq 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
  • home.phpQuery latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 49
  • Header.phpDisplay only 1 sticky post Display latest postsExcluding sticky post Last updated: 8-Jul-2010 © Digital Boomerang 2010 50
  • Digital Photography SchoolLast updated: 8-Jul-2010 © Digital Boomerang 2010 51
  • Patrick HoelckLast updated: 8-Jul-2010 © Digital Boomerang 2010 52
  • GOOD MagazineLast updated: 8-Jul-2010 © Digital Boomerang 2010 53
  • 3 Display thumbnails for posts © Digital Boomerang 2010 54© Digital Boomerang 2010
  • 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
  • D is p l a y t h u m b n a il s f o rposts 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
  • functions.phpLast updated: 8-Jul-2010 © Digital Boomerang 2010 57
  • D is p l a y t h u m b n a il s f o rposts 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
  • home.php Displaythumbnails Last updated: 8-Jul-2010 © Digital Boomerang 2010 59
  • D is p l a y t h u m b n a il s f o rposts 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
  • D is p l a y t h u m b n a il s f o r p o s t sthumbnails 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
  • D is p l a y t h u m b n a il s f o rposts 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
  • functions.php Add new thumbnail sizeLast updated: 8-Jul-2010 © Digital Boomerang 2010 63
  • home.phpDisplay bigger thumbnails Last updated: 8-Jul-2010 © Digital Boomerang 2010 64
  • D is p l a y t h u m b n a il s f o rposts 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
  • WPZoom PhotoBlogLast updated: 8-Jul-2010 © Digital Boomerang 2010 66
  • TIME Magazine AbduzeedoLast updated: 8-Jul-2010 © Digital Boomerang 2010 67
  • BerghLast updated: 8-Jul-2010 © Digital Boomerang 2010 68
  • HomepageLast updated: 8-Jul-2010 © Digital Boomerang 2010 69
  • 4 Add labels with Tags © Digital Boomerang 2010 70© Digital Boomerang 2010
  • 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
  • home.phpDisplay a label for each post tagged‘Online Exclusive’. Last updated: 8-Jul-2010 © Digital Boomerang 2010 72
  • Styles.css CSS style for the label, Online ExclusiveLast updated: 8-Jul-2010 © Digital Boomerang 2010 73
  • Ars TechnicaLast updated: 8-Jul-2010 © Digital Boomerang 2010 74
  • 10 StepsLast updated: 8-Jul-2010 © Digital Boomerang 2010 75
  • WIREDLast updated: 8-Jul-2010 © Digital Boomerang 2010 76
  • HomepageLast updated: 8-Jul-2010 © Digital Boomerang 2010 77
  • CategoryLast updated: 8-Jul-2010 © Digital Boomerang 2010 78
  • 5 Stylise individual Posts / Pages © Digital Boomerang 2010 79© Digital Boomerang 2010
  • 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
  • Homepage <body <?php body_class(); ?> > <body class=“home blog”>Last updated: 8-Jul-2010 © Digital Boomerang 2010 81
  • Category<body <?php body_class(); ?> ><body class=“archive category category-on-job”>Last updated: 8-Jul-2010 © Digital Boomerang 2010 82
  • 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
  • Jason SantaMaria’s site
  • Jason SantaMaria’s site
  • Jason SantaMaria’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
  • 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
  • <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
  • <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
  • Carsonified
  • Carsonified
  • Carsonified
  • Carsonified
  • Carsonified
  • Carsonified
  • Carsonified
  • 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
  • B ore y ha a a… ef ou ck wy © Digital Boomerang 2010 103© Digital Boomerang 2010
  • Wordpress in the Future... Join us on Facebook http://www.facebook.com/digitalboomerang © Digital Boomerang 2010 104© Digital Boomerang 2010
  • Questions? © Digital Boomerang 2010 105© Digital Boomerang 2010
  • 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
  • T o o l s t h a t w il l h e l p y o uIE Developer BarProvides web development tools at your fingertips while you browse FORINTERNET EXPLORER 6 AND 7.You can edit, debug, and monitor CSS, HTML, and JavaScript live in any webpage.http://fileforum.betanews.com/detail/Internet-Explorer-Developer-Toolbar Last updated: 8-Jul-2010 © Digital Boomerang 2010 107
  • 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
  • T o o l s t h a t w il l h e l p y o uEasily generate your own CSSstyle sheet code/definitions injust minutes with this free codegenerator. There are alsonumerous helpful articles onCSS properties, tips and trickshttp://www.css-generator.com/ Last updated: 8-Jul-2010 © Digital Boomerang 2010 109
  • 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
  • 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