Exporting an image for CSS Sprite with Illustrator the easy way

By + in Coding, CSS No Comments Tags: , , ,

Use Illustrator Artboard

I prefer designing a web graphic to be used with CSS Sprite on Illustrator because of Artboard. The Artboard gives each graphic a place to stay within a clearly designated area (no need to use guidelines), and it’s easy to align a graphic in center & middle of the Artboard precisely. The trick is to give no spacing between each Artboard and create a master Artboard to export an image that contains all graphics.

Export the master artboard

The Result

You can utilize some CSS Sprites Generatorsto automatically create CSS rules to sprite up the images. I personally prefer to hand code them because it seems faster than using GUI tools to select the areas.

How to control where widgets show up in WordPress

By + in WordPress No Comments Tags: , ,

Widget Logic Plugin

One of the frequent requests I receive from my clients when designing their website is to display unique sidebar content per page. Although you can create custom sidebar and assign it to each page, it causes duplicate of content and makes it harder to sync the widget content as a result. Instead, I recommend you try Widget Logic plugin that lets you control display of widget using  WordPress Conditional Tags.

Example Conditional Tags

Only Display if…

For example, you can selectively display testimonials on related pages.

Do not display if…

You can also use negation in the conditional tags. For example, you can condition a mini contact form to show up in sidebar on every page except for your Contact page (no need to display two contact forms in one page).

Different specification method

You can specify the specific page in different ways.

An example style guide for WordPress files and folders

By + in WordPress No Comments Tags: , , , ,

Get Organized

There are so many ways to organize files and folders in WordPress, and it can get confusing if there is no agreement among your development team on where you put certain files. I’ve written an example style guide that I developed to better organize files and folders in WordPress sites for my team.

Media Files

  • Add any media files such as images, audio, movies, and documents in /media/
  • Create subfolders for each file types within /media/ if there are many files
  • Combine commonly used images such as social media icons and use CSS Sprites to reduce loading time

Child Theme

  • Create a Child Theme for any theme you select to keep parent theme untouched
  • Add any images that over-rides parent theme image in /wp-content/themes/child-theme/img/
  • Add any page or function specific stylesheet files in /wp-content/themes/child-theme/css/
  • Add any additional JavaScript files in /wp-content/themes/child-theme/js/
    • Include common files such as jQuery via functions.php for a faster load time
  • Add functions.php file to add your custom functions and avoid copying unnecessary files from parent theme to Child Theme to add small functions

How to remove theme author copyright text in the WordPress theme

By + in jQuery, WordPress No Comments Tags: , ,

Removing Copyright information of Theme Author

Have you ever purchased a WordPress theme that came with a link to Author’s website in the footer? There is a reason you ‘bought’ the theme and displaying a copyright information that has nothing to do with your business or client business just doesn’t work. Some themes provide you an option to edit the copyright information in the footer but some themes hard code the copyright text in the theme files. Instead of editing parent theme or copying over the footer file to Child theme, here is a code snippet you can add in the functions.php to over-write the copyright text all together.

jQuery Snippet in functions.php

Use the following jQuery code in the functions.php and replace the ‘.copyright’ part with matching class or ID of the container where copyright information is put under.