Create a WordPress Child Theme

by Yang Yang on June 26, 2012

WordPress amazes by making things possible in the simplest and most intuitive way. Child themes are the intended and correct way for customizing a third-party theme and you should always create a child theme to do the customizations so that the original theme stays intact thus ready for upgrade. And this is how you can do it with a file that’s just a few lines.

Follow the steps. Create the child theme folder and its style.css.

How to create a WordPress child theme?

  1. Create a folder in /wp-content/themes and name it however you like as this would be your child theme directory. For instance, you are creating a child theme from Twenty Eleven, and you may name it twentyeleven_one, twentyeleven_two, or something.
  2. Create a style.css file in the new directory and put in the following lines in it:
    /*
    Theme Name:     Twenty Eleven Child One
    Template:       twentyeleven
    */
    
    @import url("../twentyeleven/style.css");
    
  3. That’s it. Now head to Appearances -> Themes and refresh the page to see the new theme that you can activate.

The bold part of the above code is the folder name of the parent theme, so this child theme knows which parent theme it is inheriting from.

Activating Child Theme & Customizations

After you have activated the child theme, everything will be the same as if you have activated the parent theme. And you can overrule the same file in the parent theme by creating an identically named file in the child theme, including .php, .css, .js, .jpg, etc. Note however, you can’t overrule files in a sub-folder of the parent theme.

For example, you can now write some CSS styles in the style.css you just created and it will be overwriting existing styles in style.css in the parent theme directory.

Any customizations to the theme files will be only in the child theme so the parent theme will be free and ready to be upgraded thus preserving your changes.

{ Comments on this entry are closed }

Software to Convert PDF to MS Word Format

by Yang Yang on June 24, 2012

PDFZillaOne of my friends has created a very useful piece of software to do PDF to Word conversions. I find his product a breeze to use so I’m recommending it to my fellow readers. Hopefully it would be of some use to you guys.

Differences between PDF and Word

PDF (.pdf) and MS Word (.docx, .doc) are probably two of the most popular digital file formats for readable documents that are intended for humans. The major difference between the two is that MS Word can be easily edited while PDF is a finalized container of postscript data that are essentially non-editable vector information. Although you can read text in a PDF document, they are actually vector graphics rather than plain text such as those in a MS Word document.

This difference explains why people would want to convert a PDF document to a Word one as they can then make changes to the content and make further use of it. A lot of online tools and desktop applications exist for this purpose, such as PDFZilla, which provides easy procedures to imitate an OCR process to scan and analyze the supplied PDF document and convert it into high quality editable Word, in just 3 clicks. A batch mode is also available for people who want to convert a large number of PDF documents.

How to convert PDF to Word?

This is as simple as 3 clicks. Here are the steps:

  1. Head to http://www.pdfzilla.com and download the latest version of the PDF to Word software.
  2. Run PDFZilla.
  3. Add a PDF file by clicking the big green plus / add button.
  4. Choose the destination format as Word Files (*.doc).
  5. Click “Start Converting Now” button.

Okay, that’s like 8 clicks, but you got have some clicks…😉

Selling PDFZilla for 75% Commission

Lots of my readers are webmasters, so I’m also thinking this might be a good chance to earn some bucks by promoting this software as it’s rather generous of my friend’s offer – 75% affiliate commission. It’s very rare to come by a product of such usability yet of such high commission rate. Definitely much better than those ClickBank hit and run. Think about it.

{ Comments on this entry are closed }

Drop Cap ExampleWhile CSS3 can target the first letter of text inside an element, it’s still not universally supported across major browsers AND it doesn’t work well for elements that have child elements inside. The bullet proof way to target the first letter of a WordPress post would be to capture the content of the post in WordPress theme and match it by regular expression functions in PHP, such as preg_match().

And here’s the code I’ve come up for this job:

ob_start();
the_content();
$content = ob_get_clean();
$content = preg_replace('@<p>\s*((?:<[^<>]+>\s*)*)([^<>\s])@'
, '<p>$1<span class="drop_cap">$2</span>'
, $content
, 1);

echo $content;

Obviously, this code should reside in single.php of your WordPress theme where the content of the posts is being output. Just replace any “the_content()” function in the post area with this snippet.

The key is the regular expressions:

@<p>\s*((?:<[^<>]+>\s*)*)([^<>\s])@

And:

<p>$1<span class="drop_cap">$2</span>

That finds the 1st non-whitespace, printable character (a letter, a numeral, etc.) of a post and adds a surrounding <span> tag with class “drop_cap” to it.

Now you will add some drop cap styles to style.css as class .drop_cap, and the first letter of your posts will have a nice drop cap style. See this blog Mosso Reviews for example.

{ Comments on this entry are closed }

WooThemes.com Discount Coupon Code for 20% Off

by Yang Yang on June 7, 2012

For people who have read my review of WooThemes and wants to sign up a membership with WooThemes.com, don’t forget you can further sweeten the deal by using a Discount Coupon at checkout. Just click to copy and activate this coupon code:

WOO2011
Click To Open/Copy

And you will get $25 off standard membership and $40 off developer membership.

This code is valid as of June, 2012.

{ Comments on this entry are closed }

My WooThemes Review

by Yang Yang on June 7, 2012

WooThemesAs WordPress becomes the de facto standard of web publishing, the need for quality WordPress themes have soared. There are lots of themes vendors across the web but I finally made up my mind to go with WooThemes and signed up a $125 membership with them a few months back. I never looked back. Here are the things I like or don’t like about them off the top of my head.

Good things

  1. Some of the themes look so fantastic and unique! Their themes are much more than just blogs.
  2. They retire old themes that went out of fashion. This means they are very picky of what they offer. When I first signed up, it’s about 125 themes in their repository but recently it has been downsized to 100.
  3. They UPDATE. I log back in my account at WooThemes.com every a few days and the version numbers of the themes change very frequently. Many old themes have been regularly updated and patched since being released more than 2 years ago.
  4. They release new themes every month. While it’s not as exactly as 2 themes per month as they promise, it’s approximately in that pace. And the latest ones are the best.
  5. They have very sophisticated yet easy to use backend configuration panels for every theme. Each of them comes with hundreds of different options regarding a variety of aspects. The administration is quite enjoyable.
    WOOTHEMES CONTROL PANEL
  6. They reply to EVERY THREAD in their member community with usable advice and sensible solutions in less than 24 hours. Sometimes it takes longer for advanced questions that would be assigned to a senior support staff. I asked a total of 16 questions at their community forum and all of them got resolved in less than 48 hours with clear, detailed and professional answers. I actually become better with WordPress (know many useful plugins that make my life easier writing for the web) since I started participating in their forums.
  7. As an intermediate web programmer myself, from viewing their code base and from the answers to my questions, I can tell they have designed their products (themes, theme framework and WooCommerce) well. It’s not a novice-work that’s pieced together and then duplicated over and over again. What they make is a well-formed ecosystem that’s capable of forgiving and extending. It’s both robustly functioning and beautifully usable.
  8. Very great value for money. With this coupon code:

    $25 OFF STANDARD MEMBERSHIP OR $40 OFF DEVELOPER MEMBERSHIP
    WOO2011
    Click To Open/Copy

    You would only need to pay $100 (with $25 OFF, or $40 OFF for developer membership) for a standard membership that instantly enables you to download ALL of their current themes for a month. And subsequent subscription is just $20 per month that you can choose to deactivate or re-activate any time you want without any additional charges.

Not so good things

  1. About 1/2 of the themes don’t look that good, especially old ones. This is probably because they have designed their website so beautiful that I have high expectations from their products and become too easy to be disappointed by their themes.
  2. I tried to think of things I don’t like about them for the last hour…….and I couldn’t think of any, except one time I asked a question about the product image resizing issue for one of their WooCommerce themes and got replies that insisted it was my problem rather than theirs. They turned out to be right. It was my problem because I was not familiar with the WooCommerce options. But still. If a user can be blamed for incompetence to use the software, it’s a developer fail without excuses.

Conclusion

To sum up, I give 4.8 / 5 to WooThemes. Go with them, if WordPress is your core publishing platform. Period. With WooCommerce and their e-Commerce themes, WordPress can be a very powerful online store as well. Being a member of them would make sure you stay on the decisive edge of web design trends for your web projects.

{ Comments on this entry are closed }

I’m having Kavoir moved to Knownhost and now that I have 2 different VPS packages with them, I’m qualified to have an VIP coupon to spread out for 10% off any hosting package purchased with it. It’s one of the best managed VPS hosts around if you search for their reviews on WHT. I’d highly recommend the VS-2 package that is their most cost-effective plan.

KnownHost.com – 75% Off First Month + 10% Off Lifetime

Anyway, if you do make up your mind to sign up with them, go ahead and use this coupon code to claim the 75% off first month and then 10% off lifetime discount:

KnownHost: 75% Off First Month + 10% Off Lifetime
KHBESTUPTIME
Click To Open/Copy

Other than this

I just moved to my new office with a bigger, compound space on 2 floors. Pictured here is the first floor which will serve as a salon for people who are interested in Internet marketing and online businesses. We will talk here about trends and potential opportunities and collaborate on some of them. The second floor will be the actual place where my employees work which is still being decorated and for now is only equipped with a 4-men working unit with 4 DELL Vostro All-in-One computers.

1

Eiffel Eames style plastic armchairs, you can find similar items on Amazon at here and here as well. I love green and black, with a modern tone.

2

Quite spacious, until a 3.9m sofa I ordered comes in. I’m planning to get a bigger library unit than the bookshelf to accommodate more books from Amazon.

3

How does the curtain go with the room theme?

4

Some books I bought on Amazon.

Here are 2 updated pictures of the office after the sofa has shipped in.

Photos taken by the built-in camera of Nokia E71. Not bad for a grandpa phone, eh..

In case you would travel to Xi’an, China, drop me a comment or message and I’ll be very glad to be your host! Winking smile

{ Comments on this entry are closed }

Menus are created and edited from in the WordPress backend and then called in frontend theme to be displayed by the wp_nav_menu() function. On some occasions, we may want to programmatically add one or two menu items to a menu because those menu items change frequently and it would be a chore to have to add / update them in the backend every time any of changes occur.

So how to programmatically add menu items to a WP menu on the fly?

For instance, what we have now in our theme as the top menu:

<ul id="main-nav" class="nav fl">
	<?php
	
	wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s'
	));
	
	?>
</ul>

Firstly, we need to get the HTML returned by wp_nav_menu() by setting the parameter ‘echo’ => false. This way, we can get the menu HTML as a PHP variable and then manipulate it however we want. What I want to do is to add some sub menu items to the “Shop” item:

<ul id="main-nav" class="nav fl">
	<?php
	
	$my_wp_nav_menu = wp_nav_menu(array(
		'depth' => 6, 
		'sort_column' => 'menu_order', 
		'container' => 'ul', 
		'menu_id' => 'main-nav', 
		'menu_class' => 'nav fl', 
		'theme_location' => 'primary-menu', 
		'items_wrap' => '%3$s', 
		'echo' => false
	));
	
	$my_wp_nav_menu = str_replace(
		'>Shop</a></li>', 
		'>Shop</a><ul class="sub-menu">'.$my_sub_items_html.'</ul></li>', 
		$my_wp_nav_menu
	);
	
	echo $my_wp_nav_menu;
	
	?>
</ul>

The key is to insert a sub menu in there. In this case, I used the str_replace() function to do this. Make sure you use appropriate classes for <ul></ul> and <li></li> or they won’t be rendered as a sub menu.

$my_sub_items_html contains the sub menu items such as this:

<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/bags/">Bags</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/accessories/">Accessories</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page"><a href="/product-category/toys/">Toys</a></li>

These can be dynamically generated from one of the taxonomies of your WordPress blog or you can specify your own.

{ Comments on this entry are closed }

The default image header and link on the login / register page of WordPress is a WordPress one, apparently, but when you are enabling registration / login to general users, you would want to use your own logo and website URL as the header rather than the default -  so people don’t get confused and freak out!

It’s amazing how WordPress has made such simple customizations even simpler by the introduction of hooks. Just insert the following snippet in your theme’s functions.php:

add_action('login_head', 'my_custom_login_logo');
function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.dirname(get_bloginfo('stylesheet_url')).'/my_custom_login_logo.png) !important; }
    </style>';
}

add_filter('login_headerurl', 'my_custom_login_link');
function my_custom_login_logo(){
    return ('/'); // put here your website URL such as http://www.example.com/ or simply /
}

Just provide your own logo and upload it to your theme directory as my_custom_login_logo.png. You can also use get_bloginfo(‘template_directory’) for theme path but that would return the parent theme path if you have a child theme. Sensibly, we would put all customizations in the child theme, so dirname(get_bloginfo(‘stylesheet_url’)) is probably a better approach.

Without editing the core files, this solution is upgrade-proof and you don’t have to install any plugin.

{ Comments on this entry are closed }

Firefox has come with a tremendously useful feature that is the spell checking. However the problem is, by default, it only checks the spelling of text in <textarea></textarea> the block text input. How to make it also check the spelling of <input type=”text” /> so that we can be worry-free of misspelled words in single-line input text boxes as well such as when you are entering article titles, product names, etc.?

There is a very simple way to do this. Just fire up your Firefox, type in the address bar and enter:

about:config

And then filter by:

layout.spellcheckDefault

So that you would see a configuration line like this:

firefox spell checker settings

Double click on the Value and change it from 1 to 2. That’s it.

You don’t even have to restart Firefox and it will start inspecting all single-line input text boxes for wrong spellings from now on.

{ Comments on this entry are closed }

Cannot use ctrl-c. How to stop tail -f, etc?

by Yang Yang on May 7, 2012

When I ssh into my Debian Squeeze server and start up tail -f to watch a log file or anything else which uses ctrl-c to exit/stop, ctrl-c does not work. It prints the ^C character on screen and just keeps right on going.

Is there a setting somewhere that can be tweaked or maybe a different key combo that needs pressed?

Search results suggest that it’s a pretty common problem to Debian and that tinkering with the getty settings in /etc/inittab can fix it, but I’m hesitant to mess around in there too much. I may just take a snapshot and then see what happens.

Definitely an inittab thing, in case anyone else runs into this.
This line used to be at the top of the getty stuff

Code:

8:2345:respawn:/sbin/getty 38400 hvc0

I just moved it to the bottom and now ctrl-c works when connected using ssh.

Code:

 1:2345:respawn:/sbin/getty 38400 tty1
 2:23:respawn:/sbin/getty 38400 tty2
 3:23:respawn:/sbin/getty 38400 tty3
 4:23:respawn:/sbin/getty 38400 tty4
 5:23:respawn:/sbin/getty 38400 tty5
 6:23:respawn:/sbin/getty 38400 tty6
 8:2345:respawn:/sbin/getty 38400 hvc0

{ Comments on this entry are closed }