Colin Ho                     Elaine Pohcolin@digitalboomerang.com.sg   elaine@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
Hood                                                    OrnamentsSource: http://www.stuartxchange.org/Jeepney.html
User Feedback                                                                         MechanismSource: http://pinoyfunnypi...
Amphibious                                         ModeSource: http://newshopper.sulekha.com/
Leather Seats                                                             and LCD                                         ...
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-...
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. Displ...
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...
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        ...
O n t h e h o m e p a g e ...                                     header.php               Displays something else        ...
Header.php   Display sticky postDisplay a list of most    viewed postsDisplay latest posts Last updated: 8-Jul-2010    © D...
1                                   Setup aC om H g                                            ust omepae         © Digita...
Set up a cus to mHo m ep ag e                                                 http://beta.challenge.gov.sg         Wh a t ...
Set up a cus to mHo m ep ag e          Ho w :                              WordPress Hierarchy  Step 1: Duplicate index.ph...
Header.php                           home.phpLast updated: 8-Jul-2010     © Digital Boomerang 2010   33
National                                                      GeographicLast updated: 8-Jul-2010   © Digital Boomerang 201...
Chris Phelps                                                      PhotographyLast updated: 8-Jul-2010   © Digital Boomeran...
RavengraphyLast updated: 8-Jul-2010   © Digital Boomerang 2010         36
Set up a cus to mHo m ep ag e                                  header.php                            home.php             ...
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 ...
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. ...
home.php Query sticky                                                                  Start of                           ...
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 bef...
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 Boom...
Digital Photography                                                             SchoolLast updated: 8-Jul-2010   © Digital...
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.cha...
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.p...
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, singl...
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 ...
D is p l a y t h u m b n a il s f o r p o s t sthumbnails                                                            http:...
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...
functions.php                                                      Add new thumbnail sizeLast updated: 8-Jul-2010   © Digi...
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 imag...
WPZoom PhotoBlogLast updated: 8-Jul-2010   © Digital Boomerang 2010             66
TIME Magazine                                                           AbduzeedoLast updated: 8-Jul-2010   © Digital Boom...
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...
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.  St...
home.phpDisplay a label for each post tagged‘Online Exclusive’.   Last updated: 8-Jul-2010   © Digital Boomerang 2010     ...
Styles.css                           CSS style for the label,                              Online ExclusiveLast updated: 8...
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 ...
Stylise individual posts/pages            Wh a t :   To dynamically insert class names where applied.       <?php body_cla...
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 ...
Stylise individual posts/pages .home .ico-exclusive { background:#00A8DF;                   .category .ico-exclusive { lef...
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_cla...
<div id=“post-<?php the_ID(); ?>” the <?php post_class(); ?> ><div=id“post-32” class=“category-episode-12 tag-anna”> Last ...
<div id=“post-<?php the_ID(); ?>” the <?php post_class(); ?> ><div=id“post-32” class=“category-episode-12 tag-hui-leng”> L...
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 pos...
B ore y ha a a…                                     ef ou ck wy         © Digital Boomerang 2010          103© Digital Boo...
Wordpress in the Future...                Join us on Facebook                http://www.facebook.com/digitalboomerang     ...
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 developm...
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 F...
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 ...
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 fr...
T o o l s t h a t w il l h e l p y o u                      Spoon Browser Sandbox                      Run popular browser...
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 cod...
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Elaine poh & colin ho   wicked word press theming techniques
Upcoming SlideShare
Loading in...5
×

Elaine poh & colin ho wicked word press theming techniques

706

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
706
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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 ….
  • Transcript of "Elaine poh & colin ho wicked word press theming techniques"

    1. 1. Colin Ho Elaine Pohcolin@digitalboomerang.com.sg elaine@digitalboomerang.com.sg
    2. 2. Digital Boomerang
    3. 3. Digital Boomerang
    4. 4. Source: http://creepside.blogspot.com/2008/03/jeepney-stories.html
    5. 5. Source: http://www.stuartxchange.org/Jeepney.html
    6. 6. Source: http://www.stuartxchange.org/Jeepney.html
    7. 7. Hood OrnamentsSource: http://www.stuartxchange.org/Jeepney.html
    8. 8. User Feedback MechanismSource: http://pinoyfunnypictures.blogspot.com/2008_10_01_archive.html
    9. 9. Amphibious ModeSource: http://newshopper.sulekha.com/
    10. 10. Leather Seats and LCD MonitorsSource: http://paulding.blogspot.com/2008/11/amazing-high-
    11. 11. SpoilersSource: http://cs.scaleautomag.com/scacs/forums/p/68633/739928.aspx
    12. 12. Kobe BryantSource: inside.nikebasketball.com
    13. 13. 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/
    14. 14. 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
    15. 15. Let’s get
    16. 16. 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
    17. 17. Homepage List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 25
    18. 18. Category List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 26
    19. 19. Tag Archive List latest postsLast updated: 8-Jul-2010 © Digital Boomerang 2010 27
    20. 20. 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
    21. 21. Header.php Display sticky postDisplay a list of most viewed postsDisplay latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 29
    22. 22. 1 Setup aC om H g ust omepae © Digital Boomerang 2010 30© Digital Boomerang 2010
    23. 23. 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
    24. 24. 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
    25. 25. Header.php home.phpLast updated: 8-Jul-2010 © Digital Boomerang 2010 33
    26. 26. National GeographicLast updated: 8-Jul-2010 © Digital Boomerang 2010 34
    27. 27. Chris Phelps PhotographyLast updated: 8-Jul-2010 © Digital Boomerang 2010 35
    28. 28. RavengraphyLast updated: 8-Jul-2010 © Digital Boomerang 2010 36
    29. 29. 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
    30. 30. MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 38
    31. 31. MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 39
    32. 32. MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 40
    33. 33. MCYS SCREENSHOTLast updated: 8-Jul-2010 © Digital Boomerang 2010 41
    34. 34. Header.phpDisplay only 1 sticky postDisplay a list of most viewed posts Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 42
    35. 35. Header.phpDisplay only 1 sticky post Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 43
    36. 36. 2 Create multiple post queries © Digital Boomerang 2010 44© Digital Boomerang 2010
    37. 37. 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
    38. 38. home.php Query sticky Start of Loop End of Loopsets query Last updated: 8-Jul-2010 © Digital Boomerang 2010 46
    39. 39. Header.phpDisplay only 1 sticky post Display latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 47
    40. 40. 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
    41. 41. home.phpQuery latest posts Last updated: 8-Jul-2010 © Digital Boomerang 2010 49
    42. 42. Header.phpDisplay only 1 sticky post Display latest postsExcluding sticky post Last updated: 8-Jul-2010 © Digital Boomerang 2010 50
    43. 43. Digital Photography SchoolLast updated: 8-Jul-2010 © Digital Boomerang 2010 51
    44. 44. Patrick HoelckLast updated: 8-Jul-2010 © Digital Boomerang 2010 52
    45. 45. GOOD MagazineLast updated: 8-Jul-2010 © Digital Boomerang 2010 53
    46. 46. 3 Display thumbnails for posts © Digital Boomerang 2010 54© Digital Boomerang 2010
    47. 47. 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
    48. 48. 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
    49. 49. functions.phpLast updated: 8-Jul-2010 © Digital Boomerang 2010 57
    50. 50. 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
    51. 51. home.php Displaythumbnails Last updated: 8-Jul-2010 © Digital Boomerang 2010 59
    52. 52. 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
    53. 53. 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
    54. 54. 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
    55. 55. functions.php Add new thumbnail sizeLast updated: 8-Jul-2010 © Digital Boomerang 2010 63
    56. 56. home.phpDisplay bigger thumbnails Last updated: 8-Jul-2010 © Digital Boomerang 2010 64
    57. 57. 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
    58. 58. WPZoom PhotoBlogLast updated: 8-Jul-2010 © Digital Boomerang 2010 66
    59. 59. TIME Magazine AbduzeedoLast updated: 8-Jul-2010 © Digital Boomerang 2010 67
    60. 60. BerghLast updated: 8-Jul-2010 © Digital Boomerang 2010 68
    61. 61. HomepageLast updated: 8-Jul-2010 © Digital Boomerang 2010 69
    62. 62. 4 Add labels with Tags © Digital Boomerang 2010 70© Digital Boomerang 2010
    63. 63. 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
    64. 64. home.phpDisplay a label for each post tagged‘Online Exclusive’. Last updated: 8-Jul-2010 © Digital Boomerang 2010 72
    65. 65. Styles.css CSS style for the label, Online ExclusiveLast updated: 8-Jul-2010 © Digital Boomerang 2010 73
    66. 66. Ars TechnicaLast updated: 8-Jul-2010 © Digital Boomerang 2010 74
    67. 67. 10 StepsLast updated: 8-Jul-2010 © Digital Boomerang 2010 75
    68. 68. WIREDLast updated: 8-Jul-2010 © Digital Boomerang 2010 76
    69. 69. HomepageLast updated: 8-Jul-2010 © Digital Boomerang 2010 77
    70. 70. CategoryLast updated: 8-Jul-2010 © Digital Boomerang 2010 78
    71. 71. 5 Stylise individual Posts / Pages © Digital Boomerang 2010 79© Digital Boomerang 2010
    72. 72. 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
    73. 73. Homepage <body <?php body_class(); ?> > <body class=“home blog”>Last updated: 8-Jul-2010 © Digital Boomerang 2010 81
    74. 74. Category<body <?php body_class(); ?> ><body class=“archive category category-on-job”>Last updated: 8-Jul-2010 © Digital Boomerang 2010 82
    75. 75. 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
    76. 76. Jason SantaMaria’s site
    77. 77. Jason SantaMaria’s site
    78. 78. Jason SantaMaria’s site
    79. 79. Last updated: 8-Jul-2010 © Digital Boomerang 2010 87
    80. 80. Last updated: 8-Jul-2010 © Digital Boomerang 2010 88
    81. 81. Last updated: 8-Jul-2010 © Digital Boomerang 2010 89
    82. 82. Last updated: 8-Jul-2010 © Digital Boomerang 2010 90
    83. 83. Last updated: 8-Jul-2010 © Digital Boomerang 2010 91
    84. 84. 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
    85. 85. <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
    86. 86. <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
    87. 87. Carsonified
    88. 88. Carsonified
    89. 89. Carsonified
    90. 90. Carsonified
    91. 91. Carsonified
    92. 92. Carsonified
    93. 93. Carsonified
    94. 94. 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
    95. 95. B ore y ha a a… ef ou ck wy © Digital Boomerang 2010 103© Digital Boomerang 2010
    96. 96. Wordpress in the Future... Join us on Facebook http://www.facebook.com/digitalboomerang © Digital Boomerang 2010 104© Digital Boomerang 2010
    97. 97. Questions? © Digital Boomerang 2010 105© Digital Boomerang 2010
    98. 98. 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
    99. 99. 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
    100. 100. 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
    101. 101. 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
    102. 102. 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
    103. 103. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×