Web Designer’s Guide to WordPress (A Review)

wordpress coding, responsive web design, book review 

Web Designer's Guide to WordPressI’ve always known I’m a WP hack, but didn’t know how much of one until I read
Web Designer’s Guide to WordPress by Jesse Friedman.

My old WP theme was modified from the default template so there were many things I didn’t understand and left alone for safety.

Now I know wp_head() action hook in header is necessary for trigger some plug-ins, same goes with wp_footer().

My favorite is the WP_Query() section–the secret of getting any post data the way you want it. (See another useful post about using wp_query from Smashing Magazine)

This book also helped me clean up my code now that I’m braver about writing my own functions in functions.php. The sections on [shortcode] is a good trick for text you have to repeat from time to time in a post.

For people who wants to build a responsive site to work on both mobile devices and on computers, the code to test for the device is way easier than what I’ve read in HTML5 and CSS3 books.

It may be too hard for a complete newbie (to WP and PHP) but if you have played with WP code and you need to do some serious WP theme building, start from Web Designer’s Guide to WordPress to learn how it works and how to work it.

Get Category Slug of The Post in WordPress

wordpress code 

I wanted to get the category slug for the current post but calls like single_cat_title() were not usable:

  • Return null unless you are on a category page
  • Can’t get to the slug string

If each of your post has only 1 category, this is the solution:

global $post;
$categories = get_the_category($post->ID);
$post_cat_slug = $categories[0]->slug;

Explanation by line:
/* get current post info */
/* get the category list for this post */
/* get slug for the 1st category */

To get a cleaner code, I put it in my functions.php and called from my template file.

Customized Global Variables for WordPress

customized global variable, wordpress 

Wanted to have one place for certain set of value in my WP site, after many failures, found this to be the easiest way.

In functions.php, define and initialize a variable:

$GLOBALS['your_var'] = 42;

To access the variable in a template file (between php tags):

echo $GLOBALS['your_var']

Best CSS3 Drop Down Menu Tutorial

css3, drop down menu, modernizer, html5 shiv 

Avoided drop down menu for a long time since many didn’t work right. Now I found many good sites to get a ready-to-go CSS style for it. However, I needed to know what’s going on under the hood, easier on me during debugging.

I learn coding by trying things out in stages and found the tutorial on CSS Menu Maker to be most clear.

As it stated at the end, IE8 doesn’t get it. Since my page is in HTML5, I added a javascript from Modernizer first.

Now I have a nice navigation bar but two more things still didn’t work in IE8 :

  • The rounded corner
  • The shadow for the hover state

I didn’t waste time to fix the rounded corner but the hover state in the submenu has to be fixed. Visitors need to see a reaction to their action.

So, I added a darker background for the submenu items for the hover state at the end of the stylesheet. The /9 is a hack for IE8 and below. Be sure to replace “color” with your own hex code.

.menu li ul a:hover {
background: #color\9;

Safari Above IE?!

Safari, IE 

Safari tops IE in site visitsI couldn’t believe my eye when I saw this today.

Doing a web site redesign for a client, checking to see how HTML5 and CSS3 I can get with her customers. It was shocking what I pulled up in the Analytics.

And no, they are not all from iPhone/iPad.

Wow, just can’t get over it…

Pi-Ling Chang Redesign

logo, business card, tote bag, stamp 

Pi-Ling Chang has been a piano and flute instructor for many years, before I learned to design. The first time I made her business cards is only because I was better at using computer than she was. The second version came when I was still a student.

Pi-Ling Chang private piano and flute instructor, business cardNow Pi-Ling and I both have many more years of experiences under our belts, our ideas also have grown. With the vision of expansion, Pi-Ling asked for a new design that can be used on different medium, for branding and for practical uses.

When she asked me to use bright colors in the design, I was excited. It’s like we both are ready to take a big chance. We settled on a golden yellow and navy blue. A combination that is eye-catching yet classy enough to go with classical music.

Pi-Ling Chang private piano and flute instructor, custom stampOne of her request was a custom stamp so she could put her information on the assignment notebooks for her students. After much researching, I selected Master Mark instead of the chain office supply stores. This was my first design for self-inking stamp, I need a vendor who can answer my questions and they were very helpful in explaining on how to get a good imprint. You can’t get this from the clarks at the chain office supplies stores.

Pi-Ling Chang private piano and flute instructor, student tote bagThe biggest project is the tote bags for her students. With lead scare in the reusable bags out there, we went with Enviro Tote, their bags are made in the US and so are the materials. They were clear on how the design will look after the silkscreening and taught me how to redo the design to get the best result. As you can see from the photo, the logo came out clean with even coverage.

Collaborating with Pi-Ling was fun and inspiring. That must be how her students feel about her lessons. I wish her the best in this new stage of her career!

Import RSS Feed to A Facebook Page, The End

import rss, facebook page 

Still looking to import your blog feed into a Facebook Page? You can stop looking. It’s no longer available. Here is their answer:

We want you to connect with your fans in the most effective ways possible. That’s why as of September 30th (2011) you’ll no longer be able to automatically import posts from your website to your Page notes. The best way to get people to interact with your content is to give them insight into the links you share on your Wall by adding personal comments and responding to feedback from fans.

We’re focused on creating even better tools for Pages. Look for announcements soon.

So, I guess it’s back to manually posting links on your Wall.

OkiData / InDesign Mystery Solved

indesign cs3, okidata, booklet printing 

After much experimenting on my Mysterious InDesign Okidata Issue for printing in booklet format. I finally solved the missing letters/numbers (printed out as crossed rectangles).

The problem only happens when I print only odd or even pages. So, if your printer can do duplex printing, you should be able to print straight from InDesign.

The solution:

  1. print booklet format to a PDF
  2. make a file with even pages only
  3. make another file with odd pages only
  4. print the Even file, flip the stack, print the Odd file