child theme

April WordPress Meetup in Seattle

By + in CSS, PHP, WordPress 1 Comment Tags: , , , , , , , , , , , ,

Jeff Dance the founder of Fresh Consulting and I had great time speaking at the April WordPress Meetup in Seattle. We spoke on the topic of 7 Tips to Save Time in WordPress with mix of beginner to intermediate level topics.

Here is the short re-cap of our  time-saving tips and tools we mentioned:

  1. Provide a planning document to walk through content, design, tech, brand, etc
  2. Share basic training videos and resources with WordPress Manual Plugin
  3. Show, Don’t Tell! Utilize Skitch, Join.me,  GoToMeeting.
  4. Provide an easy backup solution with BackupBuddy
  5. Use functions.php to minimize child-theme updates, read How to add web fonts in WordPress theme and still keep it easy to update your theme & How to selectively include scripts on specific pages in WordPress
  6. Use shortcode to minimize code, read WordPress Shortcode – Back to Top and How to use shortcode in WordPress widget
  7. Use custom fields to minimize repetitive coding, check out Advanced Custom Fields which lets you add custom fields to pages and posts easily with a little bit of PHP coding

I’ll be attending WordCamp Seattle 2012 next month and hope to see you guys again there!

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

Simple CSS Template for WordPress Child Theme

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

Keep custom CSS in one and safe place

I’ve been using Child Theme for almost all the WordPress websites I create. Instead of using options that comes with theme to modify styles or enter custom CSS, I keep all of my css overwrites in Child Theme’s style.css file. Storing custom css in child-theme stylesheet not only keeps all changes in one place, but it also keeps the custom css relatively safer. There were couple times I lost my custom css that I stored in theme’s option panel from theme switching or updating.

The child-theme template

Here is the standard child-theme template I use for all of my projects to keep them easy for me and others to understand where custom CSS applies in typical WordPress website setup.

How to add indicators for 3rd level menu navigation

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

Multi-level navigation indicator with jQuery

One of the popular requests I receive when I develop a website with more than 2 level navigation tier is to add indicators for 3rd level navigation. Using jQuery, this can be achieved easily by utilizing FireBug to examine the markup structure on menu items.

jQuery Code

I wrote example codes for jQuery to look for 2nd level menu items that contain 3rd level menu items, and append html markup that adds the symbol » at the right hand side. The example here should work with websites utilizing jQuery Slide Menu that is commonly used in websites including WordPress themes based websites. Be sure to adjust the code for your website if the following example does not work out of the box.

jQuery for WordPress Websites

Add the following code into functions.php, preferably inside child-theme.

jQuery for Other Websites

Add the following code anywhere appropriate.

CSS Code

Lastly, add the following CSS code into your CSS file and adjust it for your website style so that it’s visible and positioned right.

The Result

Once you add example codes like above, you should be able to see a little indicator next to the 2nd level menu item that contains 3rd level menu like this:

Bonus: CoffeeScript example

I’ve been slowly learning CoffeeScript which makes me happy to code with jQuery. I’ve included CoffeeScript version of the example jQuery code above.

If you want to quickly experiment the code on your website, be sure to include the following api in your website header.

How to use shortcode in WordPress widget

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

Edit Functions.php

There are times you need to use various Shortcode in Text Widget to minimize the coding. However, WordPress does not allow the use of Shortcode in the widget by default. Just install the following code into your child-theme’s functions.php and you can start to use Shortcode in widgets.

How about in PHP?

Yes, you can also run Shortcode in your PHP files such as page templates. Replace “Shortcode_Name” with actual Shortcode available on your WordPress to use.

How to add web fonts in WordPress theme and still keep it easy to update your theme

By + in CSS, PHP, WordPress 1 Comment Tags: , , , , ,

Why Web Font?

Lately, I started utilizing Google Web Fonts on my client projects. It’s a better alternative to Cufon that I had horrible experience with. If you haven’t used web fonts in any projects yet, here are couple reasons why you should:

  1. It works just like a regular font that you can control size and style with CSS and texts are selectable
  2. There are many font options from ones easy to read to ones look creative
  3. Many web fonts are optimized for reading text on screens
  4. Many web fonts are free to download so you can use consistent fonts on web graphics

Now, the challenge is including web fonts in a way that does not bring in extra steps when you update your WordPress theme. From including script in header.php to inserting @import in CSS file, there are different way to embed web fonts.

Don’t Edit Your Theme File

The less ideal way to include web font are to use @import in CSS (slower loading), use JavaScript (client-dependent), or include script link in header.php of your parent theme (destructive). These methods make it difficult to track your edits and makes it harder to update your theme files. If you haven’t figured out already, learn how to create child-theme for your WordPress theme.

Include CSS in Functions.php

The ideal way is to include css file in the header file of your WordPress theme via functions.php in your child-theme. This method will work in almost any WordPress themes, does not touch the original theme files, and you don’t even have to update header.php in your child-theme every time the parent theme gets updated. Combined with Conditional Tags in WordPress, you can even selectively include the web font on pages of your choice.

Example of Google Font Embed in functions.php

Here is an example of embedding Open Sans web font in header of the website via child-theme’s functions.php:

Now specify in your child-theme CSS file what element use the web font:

The Easy Alternative Method

If you just want to do a quick test of web fonts or don’t have access to theme files, utilize theme option of your theme if it gives you options to include any script in either header or footer. If your theme does not have such option, try some plugins that lets you add scripts in header of footer of your theme.