Writing for Packt

We welcome all inquiries from people who are interested in authoring. Book proposals should be sent to author packtpub.com. If your book idea is still at an early stage and you would like to discuss it first before writing a formal book proposal, contact us one of our commissioning editors will get in touch with you. We're not just looking for published authors if you have strong technical skills but no writing experience, our experienced editors can help you develop a writing career, or simply...

About the Author

Tessa Blakeley Silver's background is in print design and traditional illustration. She evolved over the years into web and multimedia development, where she focuses on usability and interface design. Tessa owns a consulting and development company hyper3media (also pronounced as hyper-cube media) http hyper3media.com. Prior to starting her company, Tessa was the VP of Interactive Technologies at eHigherEducation an online learning and technology company developing compelling multimedia...

Even more template files

We now have an index. php template file as well as a footer. php, sidebar. php, header. php, home. php, and category. php file The fun doesn't have to stop there. Remember the whole point of these separated out template files is to reduce duplicate markup and code. While I'm an advocate of keeping things simple, if you notice that any of your markup and code is duplicated in two or more files, I would suggest you separate it out into its own template file. While WordPress only has a few include...

Dynamic Menus and Interactive Elements

As was the case in the previous chapter, most of the techniques that I'm about to discuss in this chapter are often used inappropriately and needlessly. They can create issues with usability and accessibility standards, but if you haven't already been asked for one or more of these features, you will be Chances are that clients have already asked you for drop-down menus, slick Flash headers, You Tube embeds, and other interactive content that they insist will give their site pizazz In this...

Classes output by the wplistpages template tag

We first discussed the wp_list_pages template tag in Chapter 2. In Chapter 3, we discovered that if you pass this template tag a parameter of title_li , WordPress assumes you're going to use the list as a set of navigation links, so it helps you out by adding the following class styles to the < li> tags generated by the template ,page_item This is applied to each list item tag in a page list (even page lists generated by the Page widget). .page-item-(number) for example, .page-item-23 This...

Word Pressspecific styles for navigation

WordPress does now output several predefined CSS styles. There is a template tag that not only outputs the page links wrapped in an < li> tag, but adds the class attribute page_item to it along with several other class styles and possibilities depending on the state of the link within WordPress. For example, if the selected page link also happens to be the current page displayed, then an additional class called current_page_item is additionally applied. If your WordPress theme was to take...

Birmingham Mumbai

No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the...

Bodyclass class styles

As of WordPress 2.8, we now have the body_class() function. This function works similar to the post_class function and can be placed directly, out of the loop, in the beginning < body> tag. Simply add the body class function to the template file that your opening < body> tag is placed in, like so < body < php body_class() > > When you check the View Source on your theme in the browser, depending on what type of content has loaded, you'll notice and be able to target (on a larger...

6

Declaration dropped. Warning Error in parsing value for property 'height'. Declaration dropped. Warning Error in parsing value for property 'margin-top'. Declaration dropped. Warning Error in parsing value for property 'margin-top'. Declaration dropped. Source File http www.wpd ev.ete r nal ur banyo uth.com wp-content the me s oQ_maq azine thickbox.css Line j Warning Unknown property 'filter' Declaration dropped. Source File Warning Error in parsing value for...

264

Value Error color 315aSca is nota valid color 3 or 6 hexad cimals numbers 315a6ca (j'RI Family names containing whitespace should be quoted. It quoting is omitted, any whitespace characters before and after the name are ignored and any sequence of whitespace characters inside the name is converted to a single space. Same colors for color and background-color in two contexts container2 and .thisMonth Same colors for color and background-color in two contexts footer and thisMonth Same colors for...

Reference

If you like quick reference guides and cheatsheet charts, this chapter is for you. It's one thing to be walked through a general development and another when you're developing on your own. Often, you'll just need the syntax of a function or template tag or know what all the CSS classes a function outputs. This chapter will cover information to help you with your WordPress theme development. It includes A comprehensive listing of essential template tags The various CSS class styles generated by...

Implementing lightBox

Unfortunately, there's a small drawback in implementing lightBox. Because I'm targeting all the < a href> links inside WordPress, my page navigation links, any outbound link, or link to download something that's not a link to an image, gets an unexpected result. As you can see in the following screenshot, after clicking on a link to another page, the results are interesting. This is easily remedied if you know a bit about jQuery's selectors. First off, we'll simply target the area we want...

R

About 24 getting started 27 overview 25, 27 radical approach 25 sketch, usability 29, 30 sketching 27-29 structure, starting with 30 basic stylesheet, attaching 33 basic stylesheet, CSS file 33-35 design, creating 31 DOCTYPE 32 main body 32 semantic HTML structure 35, 36 starting with 30, 31 XHTML file requirements 33 rapid prototyping 25 ReadMe.txt file basics 148, 149 creating 148 Rich Interface Application. See RIAs RIAs 187 classic corners 243-245 CSS3 property 248 in table-less design 244...

Summary

Aside from a handful of CSS style classes output by a few template tags, WordPress lets you completely control your own XHTML markup and CSS styles, even through the template tags We've reviewed WordPress' template hierarchy, top template tags, as well as include and loop functions that will help you with your theme. I've also introduced you to the under-belly of WordPress' core functions and shortcodes, should you choose to venture far out into the world of WordPress theme and plugin...

L Publishing J

ISBN 978-1-847196-56-9 Paperback 296 pages Create your own complete blog or web site from scratch with WordPress 1. Everything you need to set up your own feature-rich WordPress blog or web site 2. Clear and practical explanations of all aspects of WordPress 3. In-depth coverage of installation, themes, syndication, and podcasting 4. Explore WordPress as a fully functioning content management system ISBN 978-1-847197-38-2 Paperback 275 pages 100 simple but incredibly useful recipes to take...

9

Design Tips for Working with WordPress Finally, we are into the last chapter of the title. For this last chapter, let's sum things up by giving you the following A few final design tips and tricks Troubleshooting ideas to take with you into your future WordPress theme designs As we've gone through this book, there are quite a few tips that have been given to you along the way. Here are the top four to remember Create and keep lists Keep all of the lists namely check lists, color lists, font...

Lists

In Chapters 2 and 3, we created a horizontally-styled list and then amended it to handle SuckerFish dropdowns. There are specific list properties that can help you control your lists to display vertically and horizontally. For an overview of all the list properties, check out My most important list properties are controlling the liststyle For lists, more than just properties, what you really need to know is how to structure CSS rules that will target the various list elements properly. For...

Twominute color schemes

When it comes to color schemes, I say, don't sweat it. Mother nature, or at the very least, someone else has already created some of the best color schemes for us. Sure, you can just look at another site or blog you like and see how they handled their color scheme, but it's hard to look at someone else's design and not be influenced by more than just their color scheme. For those intent on an original design, here's my color scheme trick. If your site will be displaying a prominent, permanent...

Is the ActiveX restriction still around

In 2006, the IE browser upped its security, so users had to validate content that shows up in the Flash player (or any player) via Microsoft's ActiveX controls). Your Flash content starts to play, but there's a grey outline around the player area which may or may not mess up your design. If your content is interactive, then people will need to click to activate it. This is annoying, but the main workaround involved injecting controls and players via JavaScript. Essentially, you need to include...

The road to validation

You'll always want to validate your XHTML first. This is just as well because W3C's CSS validator won't even look at your CSS, if your XHTML isn't valid. Go to http validator.w3.org and if your file is on a server, you can just enter in the URL address to it. If you're working locally, from your browser you'll need to choose Save Page As and save an HTML file of your theme's WordPress output and upload that full HTML file output to the validator using the upload field provided. In this example,...

Handling users without Flash older versions of Flash and IE6 users

While the previous method is extremely clean and simple, it doesn't help all of your site's users in dealing with Flash. What about users who don't have Flash installed or have an older version that won't support your content What about IE users who have the Active X restrain You'll want your site and theme to gracefully handle users who do not have Flash (if you've used the overlay method, they'll simply see the CSS background image and probably not know anything is wrong ) or an older version...

Cd

Mrs - CSS * For * PI Imagr* T tafnrmnrlon i.*J ttsr ellnnrnut * y' Otirllnr * 11 - Tools Q VI LfiJf> Cpen Source for mrk end p fay Really I.ong Article Title Name The More Text The Better Cause You Never Know Inrini ip-.um ridor lit nmpt, trnsrririwr idijinring t'lil. Sc-ri nm nrr mi vnlutfiiit vi-stiJiiLum. IJl pel ir-nH'- iiji- siigilh mrtus. Fn ruhiixxl IrlLin iil .niU'. IJl Irrtus. hJunr adiplsclng, Kraesent luctus., massa quts vulputate rhcncusf juste turps mollis dolor, nee blandit rift...

Including jQuery in Word Press

You can activate WordPress' bundled jQuery in two different ways Place the following code in your header.php file before closing the < head> tag < php wp_enqueue_script(jquery) > < php wp_head() > < script add jQuery code here jQuery(document).ready(function() jQuery(p).click(function() alert(Hello world ) ) Alternatively, you can register the wp_enqueue_script (and any custom jQuery code you write) in your theme's functions.php file. If your theme doesn't have a functions.php...

Fun with other page layouts

Because we don't have archive.php and category.php template files in our template directory, the index.php template file is covering links to Categories (Columns) and archives (a.k.a. Past Issues). This on its own is working well enough, but you can certainly improve these pages by pasting your index.php code into a new archive.php and or category.php page, and then customize those page views even further. For instance, you could place the following code into your category.php page, just above...

Plugin hooks

Whether you're developing for the public or for a specific client, or just yourself, you'll still want to create a theme that's robust and can play well with others. the others being plugins. Plugins can be created to add additional functionally to WordPress for just about anything you can imagine, so long as the plugin API offers a Hook for it. In general, unless you're a plugin developer, you probably don't have much need to pour over the plugin API. There are, however, a few hooks that...

O

Status Published 0 Make this post sticky If you're updating a theme to 2.7+, you probably don't see the .sticky class at work. In your loop, under the while (have_posts()) code, make sure you replace the class tag in the beginning div from this < div class post id post-< php the_ID() > > to this < div < php post_class() > id post-< php the_ID() > > The post_class template tag will ensure that the div has all sorts of associated classes appear, such as, the original post...

Quick review

OK, to review what we've done so far, you should have three views now 1. One template view for your home page that shows the large home page header and link to comments. 2. One template view for your article (post) pages, which uses the internal header and displays your comments. Because this layout is for articles, The Zine link is left with the class current_page_item. 3. One template page view for static pages.

Class styles generated by Word Press

As we learned in Chapter 3, WordPress content is generated mostly by those bits of PHP code known as template tags, which look like have_posts or the_category, and so on. Until recently, WordPress template tags did not output many CSS styles. In Chapter 3, we used the wp_list_pages tag and learned it output a few classes that could be used to style menu items. With the release of 2.7 and now 2.8, we have a few new template tag functions that output quite a few class styles. What I find...

Keywords and descriptions

Most people just hardcode some general keyword and description meta tags into their theme's template files that best describe the overall gist of their WordPress site. However, if you want to aid in your content being indexed by search engines a little better and or you use your WordPress site to cover a wide range of diverse information that an overall gist of keywords and a description just won't cover, you'll want to make metatags in your template files a bit more dynamic. There are several...

Getting Started as a Word Press Theme Designer

Welcome to WordPress theme design This title is intended to take you through the ins and outs of creating sophisticated professional themes for the WordPress personal publishing platform. WordPress was originally, and is foremost, a blog system. Throughout the majority of this book's chapters for simplicity's sake I'll be referring to it as a blog or blog system. But don't be fooled Since its inception, WordPress has evolved way beyond mere blogging capabilities and has many standard features...

Creating the footerphp template file

We'll start first with the footer.php file, as this will remain consistent across all page types for my theme 1. Create a new file in your theme's directory and name it footer.php. 2. Open up your index.php file and cut all the markup and WordPress PHP from the beginning of the footer in the markup to the end of the HTML page's last tag 3. Paste the selected code into your new footer.php file. 4. In your index.php file, where your footer code used to be, add the WordPress include template tag...

Creating the sidebarphp template file

Currently, the main sidebar (the sidebar that's just on the right-hand side of my layout) is still just XHTML markup. Let's get it out into its own template file and included into the index.php file, and then see about making it more dynamic with WordPress template tags. This will essentially be the same as creating the footer.php file 1. First, create a new template file named sidebar.php in your theme's directory. 2. Now cut everything that makes up your sidebar markup into that file. In our...

Using Word Press bundled includes versus including your own or using a CDN

As I mentioned earlier, the wp_enqueue_script function allows for a safe load of jQuery (and other includes) into noConflict mode. Loading your own version from Google Code or from your own site has the potential for problems down the line. For one thing, some plugins may also use the jQuery library (from WordPress' bundle or included directly in their own plugin), and they are going to load it up as well. They may load in older versions of jQuery or even a newer one. Having multiple versions...

Color schemes with GIMP or Photoshop

Pick one or two images which strike you and drop them into Photoshop or GIMP. A thumbnail is fine in a pinch, but you'll probably want an image a bit bigger than the thumbnail. Don't use photos with a watermark, as the watermark will affect the palette output. Lose the watermark Most stock sites have a watermark and there's nothing you can do about that. You can create a free login on Getty Images's Photodisc (http Photodisc.com). Once logged in, the watermark is removed from the comp images...

Color schemes

Now that the general layout is hammered down, we're ready to move onto more exciting design elements. You'll want a predefined palette of three to ten colors arranged in a hierarchy from most prominent to least. I like to create a simple text file that lists the colors' hex values and then add my own comments for each color and how I plan to use it in the theme. This makes it easy for me to add the colors to my CSS file, and then later to my Photoshop document as I create graphic interface...

More template files Home internal and static pages

As I mentioned earlier, the advantage of having your WordPress theme's parts separated into individual template pages is that your theme will be more flexible and able to accommodate a wider range of content. As nice as my theme currently looks, there are some problems with it that can only be dealt with if I break down the theme's design into further WordPress template pages. To start, I only want that huge 300 pixel-high header graphic to load on the home page. It's neat to give the feel of a...

Classes output by the media manager

The following are the options available when uploading an image using WordPress' media manager Any images uploaded through WordPress' media manager will have the following classes elegantly applied, depending on the options you selected when uploading the image .aligncenter This style is generated if you select Center. A good way to ensure this style is centered is display block margin-left auto margin-right auto .alignleft This class is generated if you select Left. .alignright This class is...

Adding in the favicon

The last touch is to take the favicon.ico file we created in Chapter 2 and make sure it loads up in our theme. To activate the favicon, follow these steps 1. Make sure the favicon.ico file is placed into the root of your theme's directory. 2. In your header.php file, locate your favicon link and target your theme's directory using the bloginfo template tag like so < link href < php bloginfo('template_directory') > favicon.ico rel shortcut icon type image x-icon > That should do it. When...

Theme packaging basics

To make sure your template is ready to go public, run through the following steps before packaging it up 1. Remove all the unnecessary files hanging out in your theme's root directory As I work on a theme, I often copy in files from the default theme in order to quickly reference them. I make sure to name them something like orig_header.php, and so on, for quick and easy reference of template tags that I will use in my theme, but those must be cleared out before you package up. Be sure that...

Internal pages

Now that our home page is working, it's time to modify the index.php file for the internal page layout. Using the same rapid prototyping process we used to generate the home page layout in Chapter 2, I've created a mockup of my internal layout. Updating the index.php file to be an internal page The biggest difference between my internal pages and my home page is the header. As a result, it will be easier to start off by just copying my current home.php page back over into the index.php page. 1....

Custom fonts with CSS3

Safari and Firefox 3.1+ both support the font-face rule that allows your stylesheet to point to a .ttf or .otf (open type font) on your server. You can then reference that font in your stylesheet using the normal font-family property like the following font-family CuprumFFU src url('Cuprum.otf') h3 font-family CuprumFFU, sans-serif Incidentally, IE has tried to implement this since version 5. The drawback is that they use the .eot format and it hasn't fully caught on. Safari and Firefox...

Problem with setting up a Lightbox effect in Word Press

While Lightbox JS is simple to add to your template (remember, Script.aculo. us and Prototype are available in WordPress via that wp_enqueue_script function). However, in order for Lightbox JS to work, you need to add a custom rel lightbox attribute to each < a href tag that will call an image into the Lightbox. I find this very easily done by flipping over to the HTML view in your WordPress Post or Page editor and just adding it in to the XHTML markup. Well, easy for me and maybe you, but...

Creating your Word Press workflow

Your work flow will pretty much look like the following You'll be editing CSS and XHTML in your HTML editor. After each edit, you'll hit Save, then use Alt + Tab or the taskbar to switch over to your browser window. You'll then hit Refresh and check the results (I'll normally recommend using Alt + Tab to switch over to the directed window, but you can use your own way). Depending on where you are in this process, you might also have two or more browser windows or tabs open one with your...

Including threaded comments

Threaded comments were introduced in version 2.7. They're great in that they allow a post's commenters to interact with each other as well as commenting to the posts author. A new comment on the post will show up, as normal at the bottom (or top if that option was set in the Administration panel), but if someone wants to comment on a comment, it will show up beneath that comment nested in one level. You can specify how many levels deep you'd like to allow commenting to go. This brings about a...

Adding tag display to your theme

In the interest of keeping things straightforward and concise, we didn't include tag-display capability to our theme in Chapter 3. That's OK, we'll do it now. This feature is very easy to add using the the_tags() template tag. Within any pages that display The Loop in your theme, decide where you'd like your tags to be displayed. I prefer them to be on top, under the author's name and category display. I'll add the following template tag just under the author and category tags in my loop < p...

Creating a custom page template

Let's use the following steps for creating a custom page template in our theme 1. Create a new file that contains the markup, CSS styles, and template tags you'd like your optional template page to have. I made a copy of my page.php and called it page_dynmc.php. I then copied the following comment loop back into it < div id pagecomments> < div class comments> < div comments_number(No Comments,< span response,< span Comments) > < div> < comments_popup_link(Add Your...

Using PHP to make graphic headers easy

I like to simplify this process by using a simple PHP script with a local TrueType font to help me quickly generate my header graphics. I can then just include them into my CSS sheet, dynamically setting up the text that the header needs to say. This technique is very useful if your site is going to be mainly controlled by a client, as they'll probably have to let you know every time they make a new header that needs to be a graphic loaded in via CSS. You'll be able to accommodate them...

Modifying the basic comments display

Because this is the Web and not a paper magazine, there are WordPress features I should take advantage of. I want to show what Column (a.k.a. WordPress category) the article has been posted to. I also want to take advantage of having people's comments and ideas on the article and help keep it fresh. So, I'll show how many comments have been added to the post. But again, some editing will need to happen, as I don't want those two items lumped together at the end of the article section. I've...

Testing other browsers and platforms

I'll mostly be talking about working in Firefox and then fixing for IE. Perhaps this is quite unfair, assuming you're working on Windows or a Mac OS, and that the source of all your design woes will (of course) be Microsoft IE's fault. But as I mentioned in Chapter 1, this book is not about only using Firefox You must check your theme in all browsers and, if possible, other platforms, especially the ones you know your audience uses the most. I surf with Opera a lot and find that sometimes...

Do it yourself or use plugins

In this chapter and the next one, I'll discuss how to use some of these techniques yourself and will also direct you to comparable plugins. In the case of more complex techniques, I will show you plugins that do the job and point you in the direction for learning more about doing it yourself. As to the question, should I use plugins or do it myself , it depends on a few things such as the following Your technical comfort level The level of control you want over the theme Whether your theme is...

Creating a basic loop

I'll start by pasting the following code (which I've copied from the default theme's index.php loop) into my widest column under my This Month header, overwriting the sample content. This code will ensure that the sample posts I've added to my WordPress installation will show up < php while (have_posts()) the_post() > < div < php post_class() > id post-< php the_ID() > > < h2> < a href < php the_permalink() > rel bookmark title Permanent Link to < php...

Out of the box model thinking

Your best bet is again to not use hacks. This is achieved in a couple of ways. First, you can break your XHTML markup down a little more. That means, for example, instead of one div layer leftSide width 200px border 2px This is clearly going to give you problems in quirks mode IE, because the div will stay at 200 pixels wide and squish your border and padding inside it. It would be better to tuck an extra div or other XHTML element inside the leftSide id such as < div Then, you can control...

Inline magazine

Lorem psum dolor sit. arret, consectetuer adipiscing eltt, 5ed a eras net orci volutpat vestibulum. Ut pellentesque sagittis metus. In euisrnod tellus id ante. Ut lectus. Nunc adipiscing. Praesent luctus, massa quis vu Iputate rhoncus, justo turpis mollis dolor, nec blandit nisi mauris et pede. Maecenas nec nibh. Nulla velit tellus, ornare nec, egestas eget, cursus sed, risus. Pellentesque sit amet velit eu urna v hicula semper. Ut tincidunt eras eu dolor. 5ed leo. Morbi viverra, tortor eu...

Column Layout Floating div tags versus CSS tables

IE8 finally offers full support of CSS tables (which are actually a CSS2 standard and not a CSS3 standard). There's no doubt that CSS tables relieve a lot of frustration in dealing with column layouts in design. In this design, however, you'll note that I stick to a more traditional floating cleared div structure that uses the pushbottom class with a clear property to make sure the footer stays at the bottom of the longest column. The main reason behind this is to ensure that the site is easily...

Breaking it up Header footer and sidebar template files

Now that we've got the Loop working in our theme, it's time to start breaking the theme down into template files which will help us make sure edits flow consistently across all of the various aspects of the theme. My rule of thumb for separating markup and code into its own template file is, first and foremost, avoiding duplicate markup and code. Second, you'll be able to create template files to address any unique markup and code that should only appear in special circumstances, like on a home...

Create a new theme directory

To get started, we'll create a copy of the existing default theme. I'm using a development installation of WordPress 2.8.5 on my local machine within MAMP. If you're working remotely, you can follow my instructions using an FTP client instead of the desktop Copy and Paste commands. 1. Create a new directory that has a completely unique name that best suits your project. 2. Important Don't skip this step Copy in your XHTML CSS mockup files and the image directory. Rename your index.html file to...

Passing Flash a Word Press variable

So now you've popped a nice Flash header into your theme. Here's a quick trick to make it all the more impressive. If you'd like to keep track of what page, post, or category your WordPress user has clicked on and display a relevant image or animation in the header, you can pass your Flash SWF file a variable from WordPress using PHP. I've made a small and simple Flash movie that will fit right over the top-right of my internal page's header. I'd like my Flash header to display some extra text...

CSS3the new way to round corners

Those of you who are mostly interested in users surfing on Safari 3.1+ or Firefox 3.1+ are in for a few breaks. You can use the CSS 3 border-radius property to set up rounded corners on your div tags like the following .roundedCorner width 15 0px background-color D9D8C6 -moz-border-radius 10px -webkit-border-radius 105px border 1px solid 9E9C76 padding 10px Both Safari and Firefox seem to have their own property name. Firefox's property name starts with -moz while Safari's starts with -webkit...

Navigation

As we've discussed, one of the many cool things about WordPress is that it outputs all lists and links with < li> tags wrapping each item. This lets you specify if you want the list to be an ordered or unordered list and what ID or class you'd like to assign to it, even though by default, all lists are vertical with bullets. Using CSS, you have a wide range of options for styling your WordPress lists. You can turn them into horizontal menus and even multilevel drop-down menus (I'll show you...

Meta tag plugins

If you're a serious blogger and really need more robust options for your meta tags, you might want to try one of the following two WordPress plugins All in One SEO Pack by uberdose 2.0. (http wordpress.org extend plugins all-in-one-seo-pack ) This plugin not only utilizes the the_exerpt() tag as we just did, but also allows you to set your own specific keywords and several other great options for handling robust meta tag information for each post. Meta SEO Pack by Daniel Fruzynski (http...

Creating the graphical elements

Now, except for those multicolored borders I've put around each of my containing div tags (they will be removed shortly), I have an XHTML and CSS design that's not half bad. Let's polish it off Snap a screenshot (Ctrl+Prt Scr on a PC or use Grab, the free capture program on a Mac) of your layout and paste it into a blank Photoshop document, or open it up into Photoshop. This is where (after realizing that blocking out layout directly in CSS isn't so bad) I've had web designers argue with me...

Theme Design and Approach

Welcome to this chapter on theme design and approach. My hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation. The purpose of this chapter is to help you create a working XHTML and CSS-based mockup, with a view to having it end up being a WordPress theme while staying compliant with W3C standards and table-less CSS layout techniques. Theme design is essentially web design and, throughout the chapter, we'll...

Adding a SWF to the template using swfObject

If you'd like to use the swfobject.js file and method, you can read the full documentation here documentation. But essentially, we're going to use the dynamic publishing option to include our SWF file. 1. Using the SWF file included in this book's code packet, create a new directory in your theme called flash and place the SWF file in it. Then, create a div with alternative content and a script tag that includes the following JavaScript < script myContent, 300, 120, 9.0.0) < script> <...

Preface

This book will take you through the ins and outs of creating sophisticated, professional themes for the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build a custom WordPress theme. This book reviews best practices in development tools and setting up your WordPress sandbox, through design tips and suggestions, to setting up your theme's template structure, coding markup, testing and debugging, to taking it live. The last three chapters are...

Dont forget about your 404 page

Error 404 pages are where servers direct browsers when a URL seeks a missing page. While it's easy to think you won't really need a 404 page with a WordPress install, you'd be surprised. Even though all the links to the article or page you deleted are removed automatically from within your site, someone else might have created a link on their site to your post, which will no longer work. The 4 04.php template page is how you'll handle these requests. Features (2) Office Productivity (1) On The...

JQuerys Thick Box and Color Box plugins

ThickBox installs and works very similar to jQuery's lightBox. However, in addition to handling images similar to Lightbox JS, it can also handle inline content, iFrame content, and AJAX content be sure to check out the examples on the Thickbox page The downside is ThickBox requires that you add a special class thickbox to your lt a href tag markup. The good news is, because it's a class attribute, TinyMCE doesn't strip this out, but you'll need to have content editors that know how to add that...