ThemeLab » WordPress Tips http://www.themelab.com We build High Quality, Good Looking Premium WordPress Themes that are Easy to Use and ready for just about anything. Thu, 10 Apr 2014 12:33:43 +0000 en-US hourly 1 http://wordpress.org/?v=3.8.3 How To (Efficiently) Load Social Sharing Buttons with WordPress http://www.themelab.com/floating-social-bar-wordpress/ http://www.themelab.com/floating-social-bar-wordpress/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=3354 Before I begin, let me just say that I am extremely picky about anything that involves loading any scripts or dependencies from a third-party site. Nowadays, if you want to have a simple “Like” button on your site for a popular social network, they’ll probably require you to load their JavaScript from their server to

The post How To (Efficiently) Load Social Sharing Buttons with WordPress appeared first on ThemeLab.

]]>
Before I begin, let me just say that I am extremely picky about anything that involves loading any scripts or dependencies from a third-party site.

Nowadays, if you want to have a simple “Like” button on your site for a popular social network, they’ll probably require you to load their JavaScript from their server to handle it.

This allows popular social networks like Facebook to collect a bunch of data about your site visitors (we all know how social networks love big data), in exchange for giving you integrated liking/tweeting/sharing functionality directly from your site.

This can potentially turn into a good source of free traffic, which can then turn into an expanded audience for your content. Problem, loading these scripts tend to take a while, and can noticeably slow down your site on the initial page load.

Enter Floating Social Bar

This is exactly why WPBeginner‘s Floating Social Bar plugin caught my eye. What is particularly interesting about the plugin is the social script loading is delayed until a user mouses over them. Check out the screenshots to see how easy it is to use.

This way, the scripts can’t slow your site down on the initial page load. Also, the mouseover activation acts as a sort of user intent logic. Although they can hover over them inadvertently, usually a user wouldn’t hover over them unless they actually intended to share your content with them.

Before that, a placeholder image along with a cached share count is displayed, designed to look exactly like a normal share button.

Limited Social Networks

Most social sharing plugins I’ve seen for WordPress include pretty much every social network under the sun, including niche ones that wouldn’t really be relevant to your site content at all.

This isn’t a joke: AddThis allows users to “submit” your site to the W3C Validator. It’s almost comical how overboard most of these things go, so it’s refreshing to see a plugin that actually limits your options.

Even worse, I’ve seen sites that take full advantage of all the social networks other sharing plugins support, leaving a huge ugly space below your content full of 50+ sharing icons that 99% of your users never use.

If you check your analytics, and find very little incoming traffic from a specific social network, it’s safe to say that sharing functionality can be removed from your site. People can always share manually.

WPBeginner’s plugin cuts it down to the most popular ones, and gives you an easy to use drag & drop interface to add, remove, or rearrange the order in which they appear.

The “Floating” Part

Remember, this plugin is called Floating Social Bar, because the social icons stay in a fixed position once the user scrolls past a certain point. Hence, you’re never letting them forget that option is there to share the content.

You can always disable the floatiness if you don’t want that.

Make It Easier For Users To Share Your Content

I like to think, that if a reader finds my content truly compelling, they can always manually share it on the social network of their choice. The Theme Foundry makes a good argument on why you don’t need sharing buttons.

Copying and pasting a URL isn’t really that hard to do. But simply clicking a like button is even easier, plus the user stays on your site longer.

Social network traffic is becoming something harder and harder to ignore, but you have to make sure your site loads as fast as possible, only loading scripts when absolutely necessary. And that’s exactly why, if you’re going to use a social sharing plugin, I recommend Floating Social Bar.

Further Reading

The post How To (Efficiently) Load Social Sharing Buttons with WordPress appeared first on ThemeLab.

]]>
http://www.themelab.com/floating-social-bar-wordpress/feed/ 0
Get The Google Malware Hammer For Commented Out CSS http://www.themelab.com/google-malware-css/ http://www.themelab.com/google-malware-css/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=3493 Yes, you read that right. Here’s the deal: WPTavern interviews a split-testing service Split-testing service site gets flagged for malware (terrible timing, I know). Why? Because their style.css had a comment referencing another site with an actual malware infection. That’s it. Read more about it in this comment. If you’re a WordPress consultant, developer, or

The post Get The Google Malware Hammer For Commented Out CSS appeared first on ThemeLab.

]]>
Yes, you read that right. Here’s the deal:

If you’re a WordPress consultant, developer, or whatever, and your client comes to you with a “malware” warning problem, you should definitely be aware of this possibility.

The top of a WordPress theme’s style.css file

At the top of every WordPress theme’s style.css file, a theme may include the following (optional) info to describe itself. Here’s an example:

/*
Theme Name: Theme Lab
Theme URI: http://www.themelab.com/
Description: The theme I use for Theme Lab.
Author: Leland Fiegel
Author URI: http://leland.me/
Version: 1.0

License: Not Applicable License v2.0
License URI: http://example.com/not-for-release-i-dont-need-a-license
*/

WordPress uses this to display certain information on the themes page within your admin (more on this later). It’s also used to generate a page on the WordPress.org theme directory should it be submitted and accepted there.

If whatever URL is listed next to “theme URI” and “author URI” is flagged for malware, you could also be flagged for malware, simply for referencing them.

Sponsored Themes and Sketchy Sites

It’s been a well known fact that actually linking out to sketchy sites can potentially get you penalized and potentially flagged for malware. This has been a hot topic during the “sponsored themes” era as well as shady theme site discussion.

Getting flagged for malware for linking out to a malware-infected site is totally understandable as, well… you’re directly linking to a possibly infected site that your visitors could then click on and get infected too.

But getting flagged for malware because of a commented out URL reference in a stylesheet? That’s certainly news to me. How do you protect yourself from that?

Premptively Removing URL References In Stylesheets

Pretty much all released themes include a link back to WordPress.org and/or the theme developer’s site. Many remove these outgoing links (for “SEO” reasons or whatever).

Not many even think about removing credit info from their stylesheet. The only people who actually check this stuff out are mostly other developers. I know I frequently check WordPress sites’ style.css files to see what theme they’re using, whether it’s pre-made or custom, etc.

Turns out, it’s not just developers who check out commented-out stuff in your style.css file, but also Google bots.

Considering this is something totally out of your control (i.e. the malware status of a third-party site, likely your theme developer) it might be worth removing the Author URI and Theme URI in your style.css file. Heck, even the License URI just to be on the safe side.

Hopefully curious developers can find out the origins of a theme through Googling the theme author and/or name to find their hopefully-non-malware-infected site.

Is Merely Referencing A Commented Out URL In CSS… Malware?

Possibly the most concerning part of this news, is that even if I referenced the most spammy, malware-ridden site in my CSS with commented out code, how is that any sort of danger to my visitors?

It’s not like I’m loading an external resource from an infected site. It’s just a comment. In CSS. Totally harmless, right?

Like I mentioned above, most people who typically check stylesheet code are other developers. Even if they copy and paste the URL into their browser and get infected with imaginary malware, I feel Google’s policy is overreaching at best (assuming this actually is a policy, not a bug within their malware checking mechanisms).

It’s also worth considering that these theme and author URIs are displayed as actual links within the WordPress admin. It may be Google’s odd way of protecting WordPress users, not necessarily people creeping through your style.css file.

Conclusion

We all know Google and other major search engines will scan your CSS to check for boneheaded “black hat” text hiding techniques (negative text indents, display: none, visibility: hidden, matching background and foreground colors), among other things.

You can certainly get penalized and banned for doing something stupid like that, that’s a well-known fact. Getting a malware warning for commented out code in CSS? Not so well known.

Getting flagged for malware in Google is pretty much SEO suicide. I’ve thankfully never had to deal with one before, although it’s safe to assume my search engine traffic would take a nosedive if I ever did get one.

I would also feel really bad considering that any site that uses a Theme Lab theme could also potentially be flagged for malware as well, just for simply referencing Theme Lab’s URL in the theme stylesheet.

You don’t want to share the blame with another site’s malware status if you don’t have to, even if that original site’s malware status was made by mistake.

So yeah, consider removing the Author URI and Theme URI in your style.css. No matter how good a reputation the author/theme has, anybody can potentially be hacked, and it may save you a headache in the future for something that’s no fault of your own.

The post Get The Google Malware Hammer For Commented Out CSS appeared first on ThemeLab.

]]>
http://www.themelab.com/google-malware-css/feed/ 5
Shortcodes Should Never Be Included With Themes. Period. http://www.themelab.com/put-shortcodes-in-a-plugin/ http://www.themelab.com/put-shortcodes-in-a-plugin/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=3233 ThemeForest recently updated their submission requirements to be more inline with WordPress theme development best practices.

While definitely a huge step in the right direction, there's still a problem.

The post Shortcodes Should Never Be Included With Themes. Period. appeared first on ThemeLab.

]]>
ThemeForest recently updated their WordPress theme submission requirements to be more stringent and more inline with WordPress theme development best practices.

The guidelines require the use several of WordPress’ core features, standard theme hooks, and disallow PHP functions (like base64 and fopen) that really shouldn’t have ever had any place in a WordPress theme to begin with.

Basically, pretty much WordPress.org’s Theme Review policy, give or take a few things.

Overall, it’s a step in the right direction and moves to promote best practices on one of the most popular WordPress theme marketplaces on the net. There’s just one problem…

Admissible Shortcodes

One thing that particularly caught my eye, however, was how certain “admissible” shortcode functionality was allowed (i.e. by directly including them through the theme’s functions.php file). The ones listed as “admissible” included the following:

  • buttons
  • pricing tables
  • image containers
  • dropcaps
  • lists

Inadmissible shortcodes include: maps, accordions and toggles, boxed contents, column, contact forms, charts.

The Problem with Shortcodes in Themes

I can’t really put it better than Justin Tadlock already has. One of the most noticeable issues, is that when a user changes themes, the shortcodes will no longer be parsed.

Let’s say “Super Awesome” theme had a shortcode feature that would output a big green button with a link when you typed out something like [button url="http://example.com"]Big Green Button[/button].

Big Green Button

When you switch to another theme (let’s face it, people get bored of themes easily), there’s no more big green button. Instead, you see the unparsed shortcode in the post as if it were any other piece of content, like this:

[button url="http://example.com"]Big Green Button[/button]

It looks ugly, confusing, and out-of-place, and it’s a pain for the user to go back and remove/replace all of them.

The Other Problem with Shortcodes in Themes

Something that Tadlock went over in his “Dealing with shortcode madness” article is, a lot of shortcodes are so simple and HTML-like, it might even be best to instruct users to write out a little (*gasp*) real HTML code.

The same [button url="http://example.com"]Button Text[/button] shortcode in my example above could be easily rewritten as something like:

<a href="http://example.com" class="button">Button text here</a>

While there may not be CSS code styling the .button selector in a new theme, at least a normal link will show up. Which is a big improvement over an unparsed [button] shortcode showing up in a post’s content.

Plus, I believe every WordPress user should have at least some basic understanding of HTML code. By teaching them, even in little bits (like how to construct a link), will help. If they can understand a shortcode, it won’t take much more to get them to understand basic HTML.

But The Users Don’t Care!

A common argument I see defending all sorts of bad practices when it comes to theme development is that the users simply don’t care. I mean, maybe they never want to update their theme, in which case, this shortcode issue would be a moot point.

The problem is, some users inevitably will want to switch themes some day. Some users will want to install a plugin that might conflict with some other poorly-thought-out code in a theme.

Then, they probably will care, and probably will wonder if the theme they bought with 100s of built-in shortcodes and other superfluous features was really worth it.

The Right Way to Include Shortcodes

Put it in a plugin. A really simple plugin. It doesn’t need a separate options panel. Just literally copy and paste whatever you were going to include via your theme’s functions.php file, and put it in a plugin instead.

It could even be bundled with something like TGM Plugin Activation to make it required on theme activation. Or not. A theme is still a theme without shortcodes.

This way, if the user changes themes, the shortcodes will still work, because that functionality is handled by the plugin that is still active.

Maybe the plugin could also enqueue styles for the shortcodes as well. This way, the big green buttons you included with the [button] shortcode will still be big green buttons, regardless of the theme used.

Why Did ThemeForest Allow “Admissible” Shortcodes?

It’s hard to say what exactly the reasoning behind this decision was. Japh Thomson, a WordPress evangelist at Envato (ThemeForest’s parent company) had this to say about it in a comment on WPMU.org:

Complex shortcode functionality really should reside in a plugin, not a theme. It also just makes sense when you consider most of our authors have multiple themes.

Obviously, he gets it. So it’s a mystery to me why there would be any “admissible” shortcodes at all. And yes, I realize he used the word “complex” in the quote above, and the admissible shortcodes do tend to be pretty simple ones (dropcaps, lists, etc.).

Simple as a shortcode may be, the problems I outlined above will still exist. ThemeForest has shown to be responsive to community feedback, so it’s possible this rule is amended in the future.

Conclusion

I realize this post seems a bit nit-picky, and these new guidelines are definitely a huge step in the right direction. But there’s really no reason any shortcode should be allowed in a theme, simple or not.

Spoiler alert: Didn’t get any responses to that tweet with a real example of a shortcode absolutely needing to be included in a publicly-released theme.

That’s because it’s just not user-friendly for a user to go back and replace hundreds of button shortcodes after they switched to a theme that doesn’t have the exact same shortcode support.

The post Shortcodes Should Never Be Included With Themes. Period. appeared first on ThemeLab.

]]>
http://www.themelab.com/put-shortcodes-in-a-plugin/feed/ 11
How To Create A Custom Twitter Feed With WordPress http://www.themelab.com/how-to-create-a-custom-twitter-feed-with-wordpress/ http://www.themelab.com/how-to-create-a-custom-twitter-feed-with-wordpress/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=3185 If you're using WordPress and you noticed your nicely styled Twitter feed suddenly stopped working, read this post.

You'll need to use an entirely new method to pull the tweets with Twitter's new API, and I'll explain how.

The post How To Create A Custom Twitter Feed With WordPress appeared first on ThemeLab.

]]>
Broken Twitter FEedOne of my most popular non-WordPress related posts here at Theme Lab was about making a custom Twitter widget without a plugin.

That was over three years ago. And it doesn’t work anymore because Twitter retired the version of the API it used to pull the tweets.

This is why you may have noticed Theme Lab, as well as a number of other sites, lost functionality in their Twitter feeds. But not to worry, it can be fixed (look at my site’s footer right now if you don’t believe me).

First Steps

The bad news, the “without a plugin” thing won’t work out so well anymore. The good news, there’s an awesome WordPress plugin we can now use to display tweets. It’s called, fittingly, Display Tweets.

Grab that plugin and install it. Then you’ll need to register for a Twitter application to get the required authentication info. Don’t worry, it’s free.

I already had a Twitter application for a previous project, so I just used that instead of registering a new one.

Fatal Error?

The Display Tweets WordPress plugin requires CURL to be enabled on your server. This won’t be an issue on any decent web host, although when I was testing locally I did run into the following fatal error:

Fatal error: Call to undefined function curl_init() in path\to\wordpress\wp-content\plugins\display-tweets-php\includes\Twitter\twitteroauth\twitteroauth.php on line 199

I solved it in XAMPP by simply uncommenting the extension=php_curl.dll line in my php.ini file.

Again, you probably won’t run into this issue, but just in case… now you know.

Authenticating and Configuring

After installing the Display Tweets plugin, hopefully error free, head on over to the Settings page (Settings → Twitter Feed) and input the following information you got from your Twitter application.

  • Consumer Key
  • Consumer Secret
  • Access Token
  • Access Token Secret

Keep the ones with the word “Secret” in it, well… secret. Then you’ll have to set the following configuration options:

  • Screen Name: In my case, “themelab”
  • Count: How many tweets to display, up to 200 (in my case, 2).
  • Include Retweets: Self-explanatory
  • Exclude Replies: Again, self-explanatory.

Note: Excluding retweets and replies may affect the actual count of tweets displayed, as the “Count” setting will retrieve the number of tweets before filtering out retweets and replies.

Placing The Tweets

Now you’ll need to decide where and how to place the tweets on your WordPress site. You have a couple options here, either including them with a shortcode (useful for placing into posts) or a template tag.

In my case, I used the following template tag and put it where my old broken Twitter feed used to be.

<?php if ( function_exists( "display_tweets" ) ) { display_tweets(); } ?>

Styling the Tweets

The markup of the tweets output from the Display Tweets plugin vary from the old method of displaying tweets.

Here’s a sample of the new markup of a single tweet, lifted directly from my current site:

<p>Wrote about an issue I had with disappearing widgets after migrating WordPress to a new URL. Here's how I fixed it: <a href="http://t.co/Zl7YzkF2JD" target="_blank">http://t.co/Zl7YzkF2JD</a><br /><small class="muted">- Sunday Jul 7 - 1:00am</small></p>

Here’s a sample of the old method markup:

<ul id="twitter_update_list">
<li><span>RT @<a href="http://twitter.com/Screenr">Screenr</a>: Cool Screenr update: Now your screencasts publish twice as fast. <a href="http://screenr.com/aDp">http://screenr.com/aDp</a></span> <a style="font-size: 85%;" href="http://twitter.com/themelab/statuses/14229492866">46 minutes ago</a></li>
</ul>

Basically, paragraphs versus lists. If you used the old code, some of your CSS selectors will have to be adjusted to apply to the new markup style.

It’s hard to say which is better or worse, but at least Display Tweets’ default markup doesn’t use lame inline styles like style="font-size: 85%;".

It also looks like the Display Tweets plugin has a displaytweets_tweet_template hook included in case you want to alter the tweet HTML, something you didn’t really have much control over before.

Conclusion

While it is a bit frustrating when Twitter retires old APIs and breaks a lot of stuff, hopefully this newest version will stick for a while. Since this new method uses authentication, it’s not a free-for-all, which hopefully lessens the strain on Twitter’s resources.

Finally, thanks very much to Michael Ruddy, who developed Display Tweets. It looks like a lot of thought went into the plugin, especially when it comes to future-proofing. There’s also a GitHub repo if you’d like to contribute to the project.

Also, if you’re looking for an even quicker and easier (but not quite as customizable) way to embed a timeline onto your website, it may be worth looking into Twitter’s own embedded timelines feature. Perhaps something to delve into on a future blog post.

Anyway, thanks for reading, and go fix those broken Twitter feeds if you haven’t already.

The post How To Create A Custom Twitter Feed With WordPress appeared first on ThemeLab.

]]>
http://www.themelab.com/how-to-create-a-custom-twitter-feed-with-wordpress/feed/ 0
Why WordPress Widgets Vanish When Migrating to New URL http://www.themelab.com/why-wordpress-widgets-disappear/ http://www.themelab.com/why-wordpress-widgets-disappear/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=3152 I was working on a client site the other day and noticed a strange issue: almost all of my widgets vanished when I migrated the site from a local server to a separate development server.

Here's how I fixed it.

The post Why WordPress Widgets Vanish When Migrating to New URL appeared first on ThemeLab.

]]>
I was working on a client site the other day and noticed a strange issue: almost all of my widgets vanished when I migrated the site from a local server to a separate development server.

I have a pretty simple procedure for migrating WordPress:

  • Upload the contents of the directory WordPress is installed in
  • Export the database using PHPMyAdmin
  • Replace all references of the old URL to the new one in the database dump
  • Import the updated database dump to the development server

It’s a procedure I’ve been using for years without issue, except this time around, all my text widgets were nowhere to be found on the development site.

The Problem

I luckily stumbled across this post by Andy Stratton: Lost Widgets When Migrating WordPress Domains (dev to production server). In the post, he explains how WordPress stores widget data in a serialized array.

Here’s a simplified example of how a text widget is stored in a WordPress database:

s:5:"title";s:22:"The title of my widget";s:4:"text";s:101:"Text goes here <a href='http://localhost/wordpress/'>This is a link which URL is going to be replaced";

Notice how the number after the s: corresponds with the number of characters in the string that follows (i.e. s:5:”title” … “title” is 5 characters long).

When you do a basic find and replace for all mentions of a URL in a database and the new URL has a different amount of characters than the one before, this will invalidate the serialized array.

Basically, you lose all your widgets that are stored in that array, including individual widgets that didn’t have a URL (or any text for that matter) replaced with a new one with a different amount of characters.

This problem never happened to me before, even when hardcoding old URLs in WordPress posts, because posts (along with all other post types) are stored differently than widgets, and aren’t affected by this sort of serialized data issue.

They widgets are not technically “lost” however, you just need to edit your database (in one way or another) to make the serialized array valid again.

How To Fix It

In my particular case, there were only 5 text widgets that included content with hardcoded URLs. I just manually updated them, then followed my usual migration procedure.

By manually updating them from the widget panel, the string lengths are automatically updated in the database. Alternatively, you could count the new string lengths and edit the database directly, although that’s a little risky and unnecessary when you can just edit the widget text normally.

After importing my new database, my widgets were back!

If you have a ton of offending widgets and would rather not manually update each one, you’re going to need a different & more efficient approach.

It may be worth looking into the WordPress (And Others) Search and Replace Tool. This tool was developed by Interconnect IT to solve this, and similar problems. It’s important to note, however, their disclaimer:

IMPORTANT: This code is supplied with no warranty or support implied. You use it entirely at your own risk. [...] And when you’ve finished using the script, PLEASE delete it as it can pose a serious security risk to your site.

…so yeah, delete it when you’re done.

Note: Also, it was suggested that simply updating the site URL in your WordPress admin panel would solve this issue. This is a technique commonly used when migrating WordPress sites to new URLs. But it doesn’t, and shouldn’t affect text already inside of a widget. Therefore, this method won’t work in this sort of situation.

Shortcodes instead of Hardcodes

Another way of “solving” this issue, is to just never interlink to different URLs on the same site by hardcoding the base site URL into a text widget. Instead, you may want to look into including the page URL with a shortcode instead.

I found a cool plugin called Peter’s Blog URL Shortcodes which gives you access to a number of shortcodes you can use to link to different parts of your site, dynamically.

If you’d rather not install that plugin, you can always just make your own shortcode by adding the following into your functions.php (or separate plugin) file.

function themelab_url_shortcode() {
return get_bloginfo('url');
}
add_shortcode('url','themelab_url_shortcode');

Note: Slightly altered code from the source for less generic function prefixing.

You’ll also need to add some code to allow the use of shortcodes in widget text to your functions.php (or separate plugin) file.

add_filter('widget_text', 'do_shortcode');

Source: DigWP

This way, you don’t have to worry about replacing new URLs in widget data and messing up the string length. The URLs are automatically output by the shortcodes.

Wrapping Up

This may be an issue some of you experienced WordPress developers were already aware of. But if you ran into this problem like I did and were wondering how to fix it, I hope this information came in handy for you.

As well as for future reference, this is definitely something to keep in mind when you’re migrating WordPress to a new URL, especially if you use a lot of text widgets that may be affected by a similar issue.

And yes, I realize this is my first blog post in ages. If you want to know what I’ve been up to lately, check out my recent interview on WPTavern. A quick roundup:

  • I’ve been in college the past few years, hence the lack of updates here.
  • I’m now working full time as a front-end developer (mostly WordPress stuff).

It gives me the chance to work on a lot of awesome WordPress projects, and hopefully some experience I get from that will find it’s way here in the form of blog posts like this one.

The post Why WordPress Widgets Vanish When Migrating to New URL appeared first on ThemeLab.

]]>
http://www.themelab.com/why-wordpress-widgets-disappear/feed/ 2
Want More Retweets? Use the Official Tweet Button http://www.themelab.com/use-the-official-tweet-button/ http://www.themelab.com/use-the-official-tweet-button/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=2363 A little over a month ago, I recommended to use the TweetMeme WordPress plugin to get more retweets on your posts. A few days ago, Twitter announced their own button for retweeting. Several methods of integrating the official Tweet button in your WordPress sites have already emerged. WordPress Plugins The first Twitter button WordPress plugin

The post Want More Retweets? Use the Official Tweet Button appeared first on ThemeLab.

]]>
A little over a month ago, I recommended to use the TweetMeme WordPress plugin to get more retweets on your posts.

A few days ago, Twitter announced their own button for retweeting. Several methods of integrating the official Tweet button in your WordPress sites have already emerged.

WordPress Plugins

The first Twitter button WordPress plugin I came across was from Blogsessive.

Twitter button WordPress plugin

As you can see from the screenshot above, the options integrate all of the options you’d expect from a Twitter button WordPress plugin, with no extraneous features. You can download it from the post linked to above.

After this a few others popped up on the WordPress.org plugin directory:

The Manual Way

Twitter has provided a number of ways to include the Tweet button on your own pages. The most straightforward option is through this customizable form where you can define the type of button, a custom URL, the tweet text, language, and recommended Twitter users.

Let’s take a look at the code that is produced after I input a few sample values.

<a href="http://twitter.com/share" class="twitter-share-button"
data-url="http://example.com/permalink-url/"
data-text="Title of page goes here"
data-count="vertical"
data-via="themelab"
data-related="lelandf:My personal account">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Let’s go through this line by line.

  • First Line: Basically just opens the link and adds a CSS class.
  • Second line: data-url is used to input a link, probably the permalink of your post.
  • Third line: data-text is used for the tweet text, probably the title of your post.
  • Fourth line: data-count is used to define which type of button: vertical, horizontal, or none
  • Fifth line: data-via is used in the @mention in the tweet, probably your own Twitter account.
  • Sixth line: data-related allows you to define another Twitter account with a custom description.
  • Last line: Basically just closes the link and adds an obligatory line of javascript.

I’d recommend playing around with the button code generator to get a better feel of all the different options.

Inserting into WordPress

Let’s revisit the above code and insert some dynamic WordPress template tags into it for the permalink and title.

<a href="http://twitter.com/share" class="twitter-share-button"
data-url="<?php the_permalink(); ?>"
data-text="<?php the_title_attribute(); ?>"
data-count="vertical"
data-via="themelab"
data-related="lelandf:My personal account">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

This code can be inserted into pretty much any template file you want, including index.php for the main index, single.php for individual blog posts, page.php for static pages, and more.

For styling purposes, you’ll probably want to place the code above <?php the_content(); ?> and use something like the following CSS code to style it.

.twitter-share-button { float: right; margin-left: 10px; display: inline-block; }

More Advanced Usage

For more advanced usage of the Twitter button, have a look at this page on the Twitter developers site. Twitter actually allows you to “build your own Tweet button” (see the bottom of the page) which makes it a lot more customizable than the TweetMeme button.

Conclusion

For some more information on the tweet button, there is a good article entitled 7 Reasons Not to Use the New Tweet Button by Andy Beard. In the comments, a Twitter developer responds to the reasons.

You’ll also noticed I have not myself switched to the official Twitter button and am still using the TweetMeme button. The reason why I haven’t switched is because I don’t see any pressing need to switch to the official version yet, the TweetMeme still works fine.

If you’ve noticed on Twitter, I have been tweeting a lot about the tweet button. After tweeting the link to this post about getting more retweets with the official Twitter tweet button, that will probably be my last tweet on the tweet matter.

The post Want More Retweets? Use the Official Tweet Button appeared first on ThemeLab.

]]>
http://www.themelab.com/use-the-official-tweet-button/feed/ 6
Remove Unnecessary Code from wp_head http://www.themelab.com/remove-code-wordpress-header/ http://www.themelab.com/remove-code-wordpress-header/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=2274 WordPress includes a lot of stuff through the wp_head() hook included in most themes. Most of this stuff I would consider unnecessary. A few lines of extra code in your header probably won’t slow your site down that much, but I like to keep things as clean and efficient as possible. In this quick tip

The post Remove Unnecessary Code from wp_head appeared first on ThemeLab.

]]>
WordPress includes a lot of stuff through the wp_head() hook included in most themes. Most of this stuff I would consider unnecessary. A few lines of extra code in your header probably won’t slow your site down that much, but I like to keep things as clean and efficient as possible.

In this quick tip post, I’ll go over how to remove the following from being output through the wp_head hook.

  • Really Simple Discovery (RSD) link
  • Windows Live Writer link
  • WordPress generator notice
  • Post relational links

Read on for the description of each of these to see if you need them or not, and how to remove them.

Really Simple Discovery

This is the code that displays the following code in your header:

<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://example.com/xmlrpc.php?rsd" />

This is the discover mechanism used by XML-RPC clients. If you have no idea what this means and/or don’t integrate services like Flickr with your WordPress site, it’s probably safe to remove it with the following code in your theme’s functions file.

remove_action('wp_head', 'rsd_link');

Windows Live Writer

This is why you see the following code in your header.

<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://example.com/wp-includes/wlwmanifest.xml" />

If you don’t use Windows Live Writer, then this code is completely useless to you and should be removed.

remove_action('wp_head', 'wlwmanifest_link');

WordPress Generator

This is what displays your WordPress version number in your header.

<meta name="generator" content="WordPress 2.8.4" />

Noone really needs to know the exact version of WordPress you’re using, so it’s safe to remove this line of code.

remove_action('wp_head', 'wp_generator');

Post Relational Links

Post relational links are why this stuff is displayed on various pages.

<link rel='index' title='Main Page' href='http://www.themelab.com' />
<link rel='start' title='Article in the distant past' href='http://www.themelab.com/hello-world/' />
<link rel='prev' title='The Post Before This One' href='http://www.themelab.com/post-before/' />
<link rel='next' title='The Post After This One' href='http://www.themelab.com/post-after/' />

I have yet to find an actual reason to keep these around. Some browsers may use this code to navigate your site, although you can probably get the same effect from a well designed theme. You’ll need three lines to nuke them all.

remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');

Functions.php Template

For your convenience, here’s all of them combined for easy copying and pasting into your own theme’s functions.php file.

<?php
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
?>

In fact, this is the entire functions.php file I’m using on my new tweet archive theme. If you take a look at the code, the <head> tag only contains three lines: the meta charset declaration, the title tag, and the stylesheet link.

A Note About Released Themes

When you’re developing themes for release, be careful in removing some of these, especially the first two: XML-RPC and Windows Live Writer support.

The reason should be pretty obvious, because some of your users will likely use something like Windows Live Writer, and will come back to you asking for support when they can’t figure out why it doesn’t work with your theme.

The other items, the WordPress generator notice and post relation links, can probably be safely removed in almost any situation.

Conclusion

Like I said in the intro, it’s not a huge deal if you don’t remove these and I wouldn’t call this a “must” on every new WordPress site you develop. If you’re like me and don’t like useless lines of code, you’ll probably want to anyway just to keep things running as cleanly as possible.

Can you think of any other functions that you use to remove lines of unnecessary WordPress code? Let me know in the comments.

The post Remove Unnecessary Code from wp_head appeared first on ThemeLab.

]]>
http://www.themelab.com/remove-code-wordpress-header/feed/ 10
How To Make Old WordPress Themes Compatible With New Versions http://www.themelab.com/wordpress-theme-compatibility/ http://www.themelab.com/wordpress-theme-compatibility/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=1929 So you want to make your old WordPress themes compatible with newer versions of WordPress. With WordPress 3.0 right around the corner, theme compatibility is something on a lot of people’s minds. It’s pretty simple: do absolutely nothing. I’ve been making WordPress themes since around WordPress 2.3 was released, and guess what? Those themes still

The post How To Make Old WordPress Themes Compatible With New Versions appeared first on ThemeLab.

]]>
So you want to make your old WordPress themes compatible with newer versions of WordPress. With WordPress 3.0 right around the corner, theme compatibility is something on a lot of people’s minds. It’s pretty simple: do absolutely nothing.

I’ve been making WordPress themes since around WordPress 2.3 was released, and guess what? Those themes still work today and there’s nothing I need to do to keep them working with newer versions of WordPress.

  • Will they have threaded comment functionality (circa 2.7)? Nope, they probably still have “single level” comments though.
  • Will it use post_thumbnails to handle post thumbnails (circa 2.9)? Nope, but not every theme makes use of post thumbnails anyway.
  • Will they have the new navigation menus, custom header and background images introduced in the upcoming WordPress 3.0? Nope, and keep in mind not every theme will have a need for custom background or header images.

Most of these features I would consider optional. With maybe the exception of threaded comments or the new menu system, a lot of themes won’t even need or be designed around things like custom post thumbnails or header images.

So please, stop worrying about if your theme is going to break when you upgrade WordPress. No offense to my plugin developer friends, but 99% of the time WordPress breaks with a core upgrade, it’s a plugin’s fault (and it probably had it coming due to suspect plugin coding practices).

If a theme has a custom function that conflicts with a new WordPress function, the same thing could happen to themes too, so it is possible. This is probably the only “bug” I’ve ever heard of happen with a new core upgrade (and not every theme used the get_categories function).

To be honest, I’ve never seen a theme completely break, and I probably never will. I’d be interested to hear your thoughts in the comments, what do you think about making themes “compatible” with new versions? Have you ever seen a theme break because of a new WordPress version?

If you want your WordPress theme to take advantage of the new features that will be available once WordPress 3.0 is released, this article has some good info on integrating custom backgrounds, headers, menus, among other things.

The post How To Make Old WordPress Themes Compatible With New Versions appeared first on ThemeLab.

]]>
http://www.themelab.com/wordpress-theme-compatibility/feed/ 7
15 Do’s and Don’ts of Effective WordPress Theming http://www.themelab.com/effective-wordpress-theming/ http://www.themelab.com/effective-wordpress-theming/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=1653 Today I want to go over some of the do’s and don’ts of WordPress theming. Regardless if you’re building a WordPress theme for yourself or if you’re building one for release so others can use it, you should be following these do’s and don’ts as closely as possible. 1. Do not hard code full URL’s

The post 15 Do’s and Don’ts of Effective WordPress Theming appeared first on ThemeLab.

]]>
Today I want to go over some of the do’s and don’ts of WordPress theming. Regardless if you’re building a WordPress theme for yourself or if you’re building one for release so others can use it, you should be following these do’s and don’ts as closely as possible.

1. Do not hard code full URL’s into your themes

When you’re building your themes, there may be times where images are used, for social media icons or RSS feed icons, and during these points in your coding, you may want to code the full url out (ie: /wp-content/themes/your-theme-name/images/image.jpg) but this will cause errors in the website whenever the person using your theme changes their theme folder name.

The proper codes to use in order to pull the full URL’s dynamically are below.

<?php bloginfo('stylesheet_directory'); ?>/images/image.jpg

2. Do utilize the template tags as much as possible

WordPress does an awesome job of laying out all of the template tags you can use, so do yourself a favor (as well as the rest of the people who may use your themes) and learn the WordPress template tags – then utilize them as much as possible. By using template tags, you’re able to ensure that your themes don’t break or cause errors when the end user sets it up and gets it running.

3. Do not forget navigation drop down codes

When you’re building your WordPress theme, one item that seems to be overlooked is the drop down codes for your navigation. Sure, some themes might have the navigation set up to not utilize the multi level ul’s, keeping everything in one single row, but what about for those of us who have multiple child pages for each main parent page?

There’s a solution for that. You can check out some of the tutorials below on how to code multi-level drop down menus.

4. Do make your theme widget ready

In my opinion, as an end user, there’s nothing worse than deploying a theme and getting ready to set everything up, only to notice that I am now faced with the task of trying to customize sections of my themes by hard coding information into them. Your sidebars and various other places in your theme (do you have a three column footer? widgetize it!) should be as easy to edit as possible. It’s one of the easiest things to do to your themes, and will benefit your theme’s users a lot.

Automattic has a great tutorial on how to widgetize your theme. Check it out here.

Also be sure to check out the widgetizing themes tutorial here at Theme Lab.

5. Do not make users rely on numerous plugins for your theme to work

If you’re releasing themes for free or creating commercial WordPress themes, you should take your end users best interest into play with you’re building your themes. Cluttering your themes with 5-10 needed plugins will not only cause people to be frustrated when downloading and setting up your theme on their site, it will also cause a lot of people to not download it at all because, lets face it, people don’t have attention spans of more than 2-3 seconds.

For instance, if you’re going to set up pagination in your theme, why not utilize this article to learn how to set it up in your theme automatically. Cats Who Code has a pretty good tutorial on how to add pagination into your theme without needing to activate a plugin.

6. Do show the search term on the search results page

For some reason, this is an often overlooked tip that you can (and should) implement into your themes. It’s a simple, one line code that allows your theme to remind the visitor what they just searched for. It may seem trivial, but it is helpful so if the results bring back zero posts, the visitor knows the exact phrase they searched for and can then type in a different search term.

Below is the code used to replace your current “Search Results” title in your theme.

<h2>Search Results for <em><?php the_search_query() ?></em> </h2>

7. Do not half ass your 404 error pages

Instead of just leaving your 404 page to say “404 – page not found”, why not give your visitors some more options? Adding in a category list, recent posts, popular posts, a search box and (if you’d like to monetize your 404 page) an advertisement can give your 404 page some spice compared to the dull, useless ones found in most WordPress themes.

If you’re looking for 404 page inspiration, Smashing Magazine has a killer showcase of 404 pages from around the web that is worth checking out.

8. Do make sure you have all of the basic files in your theme folder

When you’re building a WordPress theme, making sure you can customize it as much as possible right from the get-go is essential. Starting out with an index.php, header.php, sidebar.php and footer.php file combo might seem like a good idea to the minimalists out there, but I’d suggest starting out with all of the basics below in order to give you a bit more control over what is displayed – when, where and how.

  • style.css
  • header.php
  • index.php
  • sidebar.php
  • footer.php
  • single.php
  • page.php
  • comments.php
  • 404.php
  • functions.php
  • archive.php
  • searchform.php
  • search.php

For more information about these template files and what they do, check out the template hierarchy page on WordPress.org.

9. Do not forget the RSS integration

When you’re building your blog, one of the items that draw peoples attention the most is the ability to subscribe to your blog via an RSS reader. So, instead of requiring your theme users to add this information in themselves, why not take the steps to add in a subscribe to rss box just like you do the search box. Add a RSS button, a subscribe via email option and you can also even add in the subscriber count in text by adding this bit of code to your theme where you’d like it to be displayed (replace “feedburner-id” with your own FeedBurner ID – if you’re releasing this theme in the wild, take a look at #11 on our list and make sure you have this as an option).

<?php
    //get cool feedburner count
    $whaturl="http://api.feedburner.com/awareness/1.0/GetFeedData?uri=feedburner-id";

    //Initialize the Curl session
    $ch = curl_init();

    //Set curl to return the data instead of printing it to the browser.
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    //Set the URL
    curl_setopt($ch, CURLOPT_URL, $whaturl);

    //Execute the fetch
    $data = curl_exec($ch);

    //Close the connection
    curl_close($ch);
    $xml = new SimpleXMLElement($data);
    $fb = $xml->feed->entry['circulation'];
    echo $fb;
    //end get cool feedburner count
    ?>

10. Do add CSS styles for threaded comments

If you’re building a theme, you should always be prepared for threaded comments. It’s a feature in WordPress that a lot of blogs use in order to build interaction in their comments section. So, preparing your stylesheet for threaded comments is a great idea. Chris has a great post on CSS codes for the default CSS classes that WordPress spits out in their comments section, giving your theme a stylized comments section without needing to touch the comments.php file.

11. Do not release a theme without an options panel

Some people might not agree with this, but I believe it’s a part of the natural progression of WordPress theming. If your theme isn’t running some kind of WordPress options panel with the ability to edit, customize and change items in your theme without having to edit codes, you’re doing something wrong.

If you’re not sure how to go about creating your own theme options panel, the links below will show you how to do it.

12. Do make sure your themes work out of the box

This goes hand in hand with #5 on out list – you should always make sure your themes work right out of the box. Some themes I’ve seen require 5-6 steps before the theme is workable on the site, including, but not limited to, plugin activation and theme option panel editing/saving. If the theme requires certain things, make sure there’s a backup default item used.

For instance, in your theme options panel you’re building and/or using, make sure there’s default information in each section, so things are showing up, regardless if the end user has updated them or not. The same goes with plugins, if you’re using a WordPress pagination plugin in your theme, why not code it in so that the theme reverts back to the previous/next links if the plugin isn’t active.

13. Do not make excessive use of custom fields

Yes, most magazine style WordPress themes from a couple years ago were built utilizing custom fields at every turn, but most people will not want to actually fill out 3, 4 or 5 custom fields for each post. So, make things easier for them. If you’re going to show an image from the post on the home page of your theme, take this handy piece of code and add it into your themes functions.php file and it will automatically the posts first image, without the need of a custom field.

// Get URL of first image in a post
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

// no image found display default image instead
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}

Once you’ve added that code in, just add <?php echo catch_that_image(); ?> in your theme’s files wherever you’d like the image to show up.

Thanks to the good ol’ WordPress support forums for this handy tip.

14. Do SEO your <title> tag

A great way to ensure your theme is as SEO ready as possible is to remove the default <title> tag found in your themes header.php file and replace it with the codes below. It will give your theme’s titles a bit more juice and help the SEO efforts that your themes users will want to put into practice – all without requiring them to touch a thing.

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> | <?php bloginfo('description'); ?><?php } ?>
<?php if ( is_search() ) { ?>Search Results for <?php /* Search Count */ $allsearch = &new WP_Query("s=$s&showposts=-1"); $key = wp_specialchars($s, 1); $count = $allsearch->post_count; _e(''); echo $key; _e(' — '); echo $count . ' '; _e('articles'); wp_reset_query(); ?><?php } ?>
<?php if ( is_404() ) { ?><? bloginfo('name'); ?> | 404 Nothing Found<?php } ?>
<?php if ( is_author() ) { ?><? bloginfo('name'); ?> | Author Archives<?php } ?>
<?php if ( is_single() ) { ?><?php wp_title(''); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name; | <?php bloginfo('name'); ?><?php } ?>
<?php if ( is_page() ) { ?><? bloginfo('name'); ?> | <?php $category = get_the_category(); echo $category[0]->cat_name;  ?>|<?php wp_title(''); ?><?php } ?>
<?php if ( is_category() ) { ?><?php single_cat_title(); ?> | <?php $category = get_the_category(); echo $category[0]->category_description; ?> | <? bloginfo('name'); ?><?php } ?>
<?php if ( is_month() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F, Y'); ?><?php } ?>
<?php if ( is_day() ) { ?><? bloginfo('name'); ?> | Archive | <?php the_time('F j, Y'); ?><?php } ?>
<?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><?php single_tag_title("", true); } } ?> | <? bloginfo('name'); ?>

15. Do not forget about breadcrumbs

As an added piece of navigation in your themes, breadcrumbs (in my opinion) should be utilized as much as possible. It is not only good for SEO purposes, but it also allows the visitor to navigate through your site much quicker. There are WordPress plugins for breadcrumbs, but thanks to Cats Who Code, we now know how to add a breadcrumb function into our WordPress themes.

First, add the below codes into your themes functions.php file (customized a bit from the original Cats Who Code post, linked above).

function the_breadcrumb() {
		echo '<ul id="crumbs">';
	if (!is_home()) {
		echo '<li><a href="';
		echo get_option('home');
		echo '">';
		echo 'Home';
		echo "</a></li>";
		if (is_category() || is_single()) {
			echo '<li>';
			the_category(' </li><li> ');
			if (is_single()) {
				echo "</li><li>";
				the_title();
				echo '</li>';
			}
		} elseif (is_page()) {
			echo '<li>';
			echo the_title();
			echo '</li>';
		}
	}
	elseif (is_tag()) {single_tag_title();}
	elseif (is_day()) {echo"<li>Archive for "; the_time('F jS, Y'); echo'</li>';}
	elseif (is_month()) {echo"<li>Archive for "; the_time('F, Y'); echo'</li>';}
	elseif (is_year()) {echo"<li>Archive for "; the_time('Y'); echo'</li>';}
	elseif (is_author()) {echo"<li>Author Archive"; echo'</li>';}
	elseif (isset($_GET['paged']) && !empty($_GET['paged'])) {echo "<li>Blog Archives"; echo'</li>';}
	elseif (is_search()) {echo"<li>Search Results"; echo'</li>';}
	
	echo '</ul>';
}

Next, place this piece of code anywhere you want your breadcrumbs to display.

<?php the_breadcrumb(); ?>

Thanks for reading over the article

Thank you for taking the time to read the article. I hope you enjoyed it and learned a thing or two along the way - I know I did. If you liked the post or have anything to add, let us know in the comments.

The post 15 Do’s and Don’ts of Effective WordPress Theming appeared first on ThemeLab.

]]>
http://www.themelab.com/effective-wordpress-theming/feed/ 22
Highlight Author Comments in WordPress, The Easier Right Way http://www.themelab.com/highlight-author-comments-in-wordpress/ http://www.themelab.com/highlight-author-comments-in-wordpress/#comments Wed, 30 Nov -0001 00:00:00 +0000 http://www.themelab.com/?p=1641 I just came across a post published today which goes over “the right way” to highlight author comments in WordPress. Basically, instead of the usual code that inserts the “admincomment” class for just the first user (user ID 1). In the post, that code is adapted for any post author, no matter what the user

The post Highlight Author Comments in WordPress, The Easier Right Way appeared first on ThemeLab.

]]>
I just came across a post published today which goes over “the right way” to highlight author comments in WordPress. Basically, instead of the usual code that inserts the “admincomment” class for just the first user (user ID 1). In the post, that code is adapted for any post author, no matter what the user ID is, which can be especially useful to multi-author blogs.

Ever since WordPress 2.7 was released over a year ago, a new function was introduced to display comments called wp_list_comments which is known for supporting threaded comments as well. In addition to threaded commments, it also outputs a class automatically which can be used to style author comments in WordPress 2.7.

Screencast

In this screencast, I go over the various classes added to a comment made by a post author. I also go over how to style the .bypostauthor class.

Code Examples in Video:

  • .bypostauthor { background: #000; } /* Sets a black background on post author comments. */
  • .bypostauthor { background: #000 !important; } /* Overrides any other background colors. */
  • .commentlist .bypostauthor { background: #000; } /* Another way to override other background colors (depends on how your theme is coded) */

In case you’re wondering, I was using the Firebug Firefox extension to inspect the element as well as test out the CSS code. Definitely a must-have addon for coders.

Custom Callback?

If you’re using a custom callback in conjunction with wp_list_comments, all you need to do is make sure the comment_class function is present in your callback, which will generate the same classes on each comment.

For an example of this, check out ThemeShaper’s tutorial on creating a comments template, check out where <?php comment_class() ?> is added, and copy it in the same place of your own custom callback (assuming it’s not already there).

Conclusion

If you’re using an outdated theme that does not use wp_list_comments, the code from the first link should be just fine. If you’re using wp_list_comments, this is a much better and easier solution to implement, as you probably won’t have to modify any PHP in your theme (unless of course you have a custom callback).

Anyway, hope you liked the CSS tip. Let me know what you think in the comments. Also, do you prefer screencasts plus text, or just text?

The post Highlight Author Comments in WordPress, The Easier Right Way appeared first on ThemeLab.

]]>
http://www.themelab.com/highlight-author-comments-in-wordpress/feed/ 9