WordPress: 10 Tips To Optimize Your Theme

The beauty of WordPress is in how easy it is to adapt for different tasks. One can extend it with just a couple of lines of code. In this post, we’ll review 10 shortcode snippets that will tweak and optimize your WordPress theme. You can add all of these code snippets to the functions.php file in your WordPress theme.


Limit The Excerpt’s Word Count Link

One thing that can go wrong in WordPress magazine themes is when users include too many words before the more tag. Sure, they could handcraft the excerpt in the dedicated field, but on a website that has hundreds of posts and on which the text above the more tag has always been used as the excerpt, going back to create excerpts for all of those posts by hand would be cumbersome. In this case, we can limit the number of words shown in the excerpt by using this code:

Here, we’re using a WordPress filter hook, which is a function that parses and (usually) modifies data before it gets stored in the database or displayed on a page. In this case, we’re setting the number of words shown in the excerpt to 10.


Add A Favicon Using A WordPress Hook Link

Hooks allow us to insert custom code without touching the template. This gives us a lot of flexibility, because now, whenever we need to change something, we only have to change the function that’s plugged into a certain hook. For example, you can add a favicon to your website without touching the header.php file, just by plugging a function into the wp_head hook:

The favicon.ico file should be located at the root of your theme. We’re now using an action hook, which is a function that is triggered at specific points during an execution by WordPress’ core. In this case, the hook triggers any function that’s attached to it when a page is launched in the browser. But other hooks can be triggered when saving a post, registering a user and so on. Some themes even have their own action hooks, which, like WordPress’ core action hooks, can be used to launch functions at specific points of an execution.


Detect Safari On iOS Link

Nowadays, websites serve mobile versions using different techniques. WordPress offers a safe way to check for the mobile Safari browser so that you know when a visitor is using an iPhone or iPad.

WordPress sets the $is_phone variable internally, and you can use it to embed an alternative style sheet, show alternative content or display a different video format. In the following example, the $is_iphone variable is run, and different style sheets are applied depending on the value returned:

In this case, we’re using the standard WordPress function wp_enqueue_style2 to add styles to the head element of the Web page. The action that we’re attaching our function to is wp_print_styles; so, we’re basically telling WordPress to output the relevant style sheet when it prints all of the other required style sheets.


Remove Elements From The Header Link

WordPress outputs several things in the head section. In particular, the generator meta tag, the RSD link and the wlwmanifest link won’t be of much use to many users:

Some bloggers say you should get rid of the generator meta tag so that no one can tell which version of WordPress you’re using. But remember, you should always be using the latest version anyway.

If you don’t need XML-RPC functionality, you can remove the RSD link (the second line in the snippet above). The same goes for if you don’t use Windows Live Writer: you can safely remove the third element.

In this case, you can add this code:

These lines will remove the corresponding elements in the snippet above.


Redirect WordPress Feeds To FeedBurner Link

It’s great that WordPress offers feeds out of the box. But if you want statistics about your subscribers, you’ll have to use FeedBurner or a similar service. To redirect your feed to one of these, use the following snippet. Thus, if you try to go to http://www.smashingmagazine.com/feed3, you’ll be redirected to FeedBurner’s feeds for Smashing Magazine4.

Replace http://feeds.feedburner.com/smashingmagazine with the URL for your own feed from FeedBurner.


To encourage subscribers to visit your website, rather than letting them just consume content through your RSS feed, you might want to display only the excerpt and featured image of posts. But WordPress doesn’t display the featured image in the RSS feed by default. Use the following code to do so. You can even add HTML to it.


Show Content Only To RSS Subscribers Link

To increase subscribers to your RSS feed, you could offer a gift available only to them. The code below creates a new shortcode65 with which to wrap content in order to hide it from regular visitors but not from RSS subscribers.


Show Content Only To Logged-In Users Link

In the same vein, you could show content only to registered users of your website. The code below creates a new shortcode65 with which to wrap content in order to hide it from casual visitors but not logged-in users.


If, for some reason, you don’t want to use the standard Facebook, Twitter and other social-networking buttons for sharing posts, you can add your own links with the code below, perhaps using it in conjunction with one of Smashing Magazine’s icon sets, such as Flavours7.

Here, we’ll be filtering the content using the the_content function. But, unlike what we did when we adjusted the excerpt’s length or removed the generator meta tag, we don’t want to overwrite it, but rather to append our links to it. So, this filter returns the post’s original content, concatenating our social-networking links right after it.

This code will add the links both in the full view for posts and on the archive pages (such as the category and tag pages). If you want them to appear only in the full view for posts, then add the following right before global $post;:

This way, the links will be appended only when the user visits the full post or the page for an image.


Add Logo To The Log-In Page Link

To add your logo to the log-in page for administrators, use the login_head action hook, which executes all functions that are attached to it in the log-in page’s head element. We’re doing two things here: changing the logo, and changing the link that it points to.

The CSS code will replace the WordPress logo with your own. You can adjust the path to the image in the fourth line of the code above to suit your theme.

In addition, the JavaScript changes the logo’s URL, so that you jump not to wordpress.org but to your own home page.


Resource: Smashingmagazine

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA