All resources offered by this website are collected through the internet and exchanged between peers for personal study. Все ресурсы, предлагаемые на этом сайте, собранные через Интернет и обмен между коллегами для личного исследования.
Easy Share Here..

Archive for 'WordPress Tips'

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.

Related posts:

  1. Want More Retweets? Use the TweetMeme WordPress Plugin
  2. Make A Custom Twitter Widget Without A Plugin
  3. Social Bookmarking with WordPress

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.

Related posts:

  1. Ever Wanted To Remove The /category/ Base?
  2. Get a CSS Killswitch Effect With Only One Line of Code
  3. Dissecting Astatic – Thematic Child Theme Tutorial

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.

Related posts:

  1. Upgrading WordPress Is Easier Than You Think
  2. WordPress Weekend Resources – June 12, 2009
  3. GaMerZ Plugins Now Compatible With WordPress 2.5

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.

Related posts:

  1. The Ultimate Guide to WordPress Conditional Tags
  2. How to Create a Comments Central Page Template in WordPress
  3. 5 Quick Ways to Fix Up Your WordPress Theme

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?

Related posts:

  1. Change Your WordPress Author Name…Please
  2. How to Create a Comments Central Page Template in WordPress
  3. Add Gravatar Support to Your WordPress Comments

SmileyFor anyone who uses the WordPress.com stats plugin, you’ll notice it inserts a small smiley image in your footer. This image needs to be loaded to track the stats.

Some people might think this little smiley face is “cute”. The rest of you will find the smiley image unsightly (and possibly evil looking) and will look for ways to remove it. This post will go over:

  • First of all, what not to do when hiding the smiley
  • How to properly hide it, with some extra absolute position goodness for certain layouts
  • If you’d rather not hide it, how to easily center the smiley image

What Not to Do

Don’t ever use display:none to hide the WP Stats Smiley.

First of all, I want to go over the one thing you shouldn’t do when attempting to hide the WP Stats Smiley, and that’s use: display:none. Yeah, I said that twice, but I was just making sure you didn’t miss it.

Yeah, that’s the same code you can use to get a CSS Killswitch effect, but it’s definitely not something you want to be using to not display an image, which needs to be loaded to accurately display stats.

What to do instead

According to this post, the developer recommends to use the following code to your stylesheet (i.e. style.css) if you wish to hide the smiley:

img#wpstats{width:0px;height:0px;overflow:hidden}

Something similar to the above code would be the following:

img#wpstats{visibility:hidden}

The difference between visibility:hidden and display:none is visibility:hidden will still take up space in the design, while display:none will not (and remember, you can’t use display:none unless you want your stat tracking to be borked).

On certain layouts, there is a small problem with this code taking up space below the footer, so I’ve thought of a more creative solution.

Here’s an example of what I’m talking about, notice the smiley in the lower left corner which is causing the footer layout to break.

Evil Smiley

With the two above examples, the image, while not visible, would still take up space in the layout causing that light gray bar (which is the background color) to appear in the footer.

Absolute Positioning

A combination of absolute positioning plus the code above is a good way to eliminate this issue. You could try something like this:

img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}

Centering the Image

Depending on your layout, instead of hiding it, it may look somewhat better if the smiley image was centered. You can easily do this with the following snippet of code.

img#wpstats{display:block;margin: 0 auto}

Explanation:

  • Sets the image to display as block (instead of inline, by default).
  • Sets the left and right margins to automatic to effectively center the now block image.

You can use this CSS to properly center pretty much any “img” tag without using additional markup.

Conclusion

By the way, if you use the WP Stats Smiley Remover plugin, don’t. Because all it does it add the “display:none” CSS to your header. The exact thing you’re not supposed to do.

Hope you liked the WordPress/CSS tip. Like the last one, I know this was relatively simple. I can do more advanced ones, so if you have any requests for quick CSS tips like this, let me know in the comments.

Related posts:

  1. WordPress Smiley Spam Technique

If you have a semi-popular blog, chances are you have a few scraper sites copying your posts directly from your feed. When you catch a site doing this, you’ll probably be pretty upset at first, seeing as they just copied all your hard work, and probably didn’t even give you credit. Instead of getting mad, get even.

In this post, I’ll go over some ways to do just this in WordPress by building links back to your blog (even when the scraper conveniently “forgot” to credit you):

  • How to use the RSS Footer plugin to insert links (or whatever other content you want) directly into your feed.
  • How to use FeedBurner FeedFlares to insert social bookmarking links in your feeds, plus your own custom-made flares.
  • How to install YARPP (Yet Another Related Posts Plugin) to automatically insert related post links into your feed.

Read on to see the rest, there’s a video too…

RSS Footer

This RSS Footer plugin by Yoast is a popular solution for adding copyright messages and other messages (including ads and links) to your feeds. It’s pretty simple to set up, after installing the plugin just customize the message you want to appear in the RSS footer of your posts.

RSS Footer

The default message in the screenshot includes a link to your post, as well as a link back to your blog. There are also a number of other parameters but the only one that really needs to be dynamic is the %%POSTLINK%% one.

I’ve seen people put image ads down there, even more text links back to pages on their site, and messages like “This post was stolen by a scraper.” Keep in mind, not only will these messages show up on splogs scraping your site, they’ll also show up in your feed (where actual people see it).

With that said, I probably wouldn’t recommend messages like “This post was stolen by a scraper” as your human RSS subscribers may not understand what that means.

Yet Another Related Posts Plugin

This is a plugin that I recommend for almost any blog. Pretty much, if you have enough posts to have related posts, use YARPP. It’s practically guaranteed to keep visitors on your site longer, as they tend to click through the various related posts to find more stuff

When first installing it, you may notice it doesn’t detect any related posts at first (even when you have a ton of blog posts). This is probably due to the “match threshold” being set too high, or the related posts cache hasn’t been built yet. Check out the YARPP FAQ for more information on this.

After installing it, you have the option of automatically displaying posts on your blog, as well as in your feed. Not only does this help keep bounce rates low, it is a good way to get deeplinks to your site from all the automated scrapers out there stealing your content.

RSS Footer + YARPP Screencast

In this screencast, I install the RSS footer plugin and go over some of the settings. I also show how I set up my YARPP settings here on Theme Lab, as well the option to display related posts in feeds.

Bonus: FeedBurner FeedFlare

FeedBurner FeedFlare is a service provided by, you guessed it, FeedBurner. If you’ve ever seen links like “Save this post to Delicious” or dynamic comment counts within feeds, this is how you do it.

After you’ve set up your FeedBurner feed, go to the “Optimize” tab in your account and activate FeedFlare. From here, there are a few “official” FeedFlares you can use.

Theme Lab Feed Flares

On Theme Lab, I use: Email This, Comments Count, and Save to Delicious, and also a couple custom ones with a link back to my homepage and to my Twitter. In hindsight, it might be better to link back to these two with the previously mentioned RSS Footer.

However, if you want to set up your own custom FeedFlare links like mine, what better way could there be than to look at the actual XML files I use myself?

After you’ve modified the XML files for own use (unless you want to have links back to me in every one of your posts) just upload them to your server and paste the URLs in the “Add New Flare” box.

Internal Linking

In addition to these techniques which obviously make things a lot easier, it’s also a good idea to include internal links within your actual posts. You’ll notice I do this quite a bit whenever I publish a post.

You could also use a plugin like Internal Link Building (need to subscribe to their RSS to download) to automatically set up links for certain keywords.

As always, use in moderation.

Conclusion

I personally haven’t used this before, but Tynt seems to come recommended when it comes to dealing with scrapers. If anyone has experience with this, I’d like to know about it in the comments.

Now, I’m sure some people will disagree with me about my stance on scrapers. I hate plagiarism just as much as everyone else. The point I’m trying to make is, instead of wasting time trying to fight scrapers, why not set up YARPP, an RSS footer, other internal links, and use them to your advantage instead?

I really don’t believe switching to excerpts is the answer, as opposed to full content feeds. You might deter scrapers, but really annoy your RSS subscribers at the same time. Which is more important?

Related posts:

  1. Use FeedBurner to Manage Your WordPress Feeds
  2. New Theme Lab Design by James McDonald
  3. 5 Quick Ways to Fix Up Your WordPress Theme

So, you go to Google and type in a search for “WordPress themes.” You skip past the official WordPress theme directory because out of the 1,000+ themes hosted there, you couldn’t find one you liked.

So you move on to another site that has a great collection of free themes, you download one you like and install it on your site. It has 50 random irrelevant spam links in the footer, and you can’t edit them out because there’s weird encrypted code in footer.php, but who cares? It looks good so that’s all that matters. And chances are your visitors won’t ever scroll down that far anyway.

Using a theme with encrypted code would be a big mistake, and unfortunately most users using them don’t even know or care that the themes they’re using can open their entire blog or even server up to malicious attacks.

Bart thinks before using themes

Unless you want to end up like Bart, I suggest you read on to find out:

  • What types of sites to avoid when downloading themes
  • How to spot encrypted code in a theme without manually checking
  • How to decrypt code (if you really want to use a theme)
  • A list of trusted sites to download themes from with confidence

Stay far away from sites like these

These are two main types of sites you should avoid while looking for any sort of WordPress theme to use on your blog.

  • Torrent/warez sites
  • Random sites you find in Google

Okay, torrent/warez sites are kind of a given. You should know better if you’re downloading themes from a site like that. It’s no secret downloads from those types of sites can be bundled with malware or other viruses, and WordPress themes are no exception.

Using a theme from a site they find on Google on the other hand, is probably a mistake a lot of people unknowingly make, and it can be a costly one if you don’t know what you’re doing. Take a look at this video just to demonstrate how Google’s top results for “WordPress themes” are dominated by shady sites that use encrypted code.

As you can see in the video, 4 out of 4 of the sites I checked did in fact have encrypted code somewhere in the theme, usually in the footer.php file, but it could be hidden anywhere (and do just as much damage too).

How to spot encrypted code

Remember, encrypted code can be hidden anywhere in your theme and it really doesn’t matter where. In order to efficiently check a theme for encrypted code, without manually checking each file, I highly recommend using the Theme Authenticity Checker. I’ve written about this before, but it really is an invaluable tool if you have a lot of themes and haven’t had time to check each one for encrypted code.

Small Studio TAC

Basically what it does is automatically scan your themes for (potentially) malicious and unwanted code, including pretty much all of those code obfuscation techniques you saw in the video, plus all outgoing link information. This can save you a lot of time and from my tests, it is pretty effective in detecting that kind of junk. For more information you can also check out Jeff Chandler’s post on the exact same plugin (who was also nice enough to mention Theme Lab as a good source for free WordPress themes).

This would involve actually setting up a WordPress installation though, and like I said in the video you should really check out the themes before uploading. If you know how, it would probably be best to set it up on a local test site, and not a live production site.

How to decrypt code

Like I mentioned in the video, if you found a theme with encrypted code, it’s usually best to avoid it altogether. Maybe you can do some digging and find the same theme on the original author’s website (which I hope wouldn’t have encrypted code either).

However, sometimes you really want to use a theme, and can’t find any other option to get it from the source. It is possible to decrypt the code if you really need to. Take a look at this WordPress.org support forum post called Encrypted Theme? Here’s how to decode it.. In the post, Otto42 goes over ways to decrypt several types of encrypted code.

Now, I think I noticed some sites using multiple methods to encrypt their code, which might be a little more tricky. I would suggest decrypting each part one at a time and then putting all the pieces together if that’s the case.

A list of trusted theme sites

The following list of sites, you can rest assured you won’t be getting any encrypted code with their theme downloads.

  • WordPress.org – Themes from WordPress.org have to pass a number of automated checks, including checks for encrypted code, before being uploaded. Before they go live, they are also moderated by a real human just to double check your theme is fully functional and free of dirty code.
  • ThemeShaper – Although they had a little hack scare recently, I would still consider this a highly trusted site when it comes to WP themes. If still in doubt, you can always get Ian Stewart’s themes at WordPress.org.
  • Theme Hybrid – A site from Justin Tadlock, and home of the Hybrid theme framework and a number of great child themes developed on top of that.
  • StudioPress – A site from Brian Gardner and home of several well-designed paid WordPress themes. Since the majority of themes available from StudioPress are paid, be vary wary if you come across one of their themes available for free download on some other site.
  • Premium Mod – A site which offers free modified versions of premium themes. Although I said you should be wary about downloading free themes that are normally paid, there are (very rare) exceptions to the rule. I have personally checked out all of Premium Mod’s theme releases and there is no encrypted code that I can find.

Obviously there are a ton more “trusted” sites, but I can’t list them all. Please do your research and make sure you’re getting themes from reputable sites and companies, if not from WordPress.org.

Conclusion

I’ve been meaning to write a post like this for a while now, but it really hit close to home when someone emailed me about a theme from Theme Lab which they encountered encrypted code in the footer.

I know this isn’t exactly new news, but I hope this brings more awareness to the issue that still is a big problem today. Most people lately are talking about the encrypted code problem with premium themes but I’d argue the problem is much more widespread when it comes to free themes.

Think about it for a sec, if someone downloads a paid theme from a torrent site, they are going completely out of their way to do so and have some experience using torrent clients, file sharing sites, etc. just to save a few bucks. They’re probably already aware of the risks involved when it comes to that sort of thing.

People searching for free themes in Google likely have a more “innocent” mindset and probably don’t even realize the mistake they’re making when they use themes from these random sites. Like someone mentioned on Twitter to me: Most users never read, only see download button. This is a sad fact that I’d unfortunately have to agree with. The only thing we can do is spread more awareness and educate users about the dangers of using themes from rogue sites.

I’d love to hear your thoughts in the comments. Going to have to ask everyone in the comments to not mention the “GPL” whatsoever, because this has nothing to do with theme licensing or if a theme has a price tag or not. It has to do with scummy sites taking advantage of unsuspecting WordPress users.

Related posts:

  1. Stop Complaining About Scrapers and Start Taking Advantage of Them
  2. Elegant Themes Releases New Theme Options Page
  3. 10+ Most Creative Free WordPress Themes in 2009

This is a guest post by Eric Sizemore, a web developer, programmer, and domainer.

In light of recent events, anyone using WordPress is apparently susceptible to what’s being called “Distributed WordPress admin account cracking”. You can view this article for more information. This post aims to provide an extra layer of security both to your wp-admin folder, and wp-login.php file.

Step 1 – Determine Who Will Have Access

First and foremost, this extra layer of security involves blocking every IP except a select few. If your IP is dynamic, it may not be the best option for you. If you have a lot of users that you allow access to your blog, this could become time consuming. If you are the only author on the blog, and you don’t allow registrations anyway – this will be rather simple.

Step 2 – Creating .htaccess

First, let’s get your IP address. Go to IPChicken and make a note of your IP address. Next, download the .htaccess files that have been created for this post.

Once you extract the archive you should see a .htaccess file, and a wp-admin folder with a .htaccess file inside it. Open the main .htaccess file and you should see:

<Files wp-login.php>
Order Deny,Allow
Deny from all
Allow from xx.xx.xx.xx
</Files>

Edit the “Allow from” line to reflect your IP address. To add more IP addresses, add a new line with “Allow from” and the next IP address, and so on. Now, chances are you already have a .htaccess file in your root WordPress folder. If so, edit the file and copy paste the contents of your edited .htaccess file from the zip, and save/re-upload.

Now open the .htaccess file within the wp-admin folder from the zip. You should see something like:

Order Deny,Allow
Deny from all
Allow from xx.xx.xx.xx

Do as you did above. And add any extra ip’s you want to allow in the wp-admin area. Chances are you do not have a .htaccess file in your wp-admin folder, so just upload the edited .htaccess file from the zip to your wp-admin folder.

Step 3 – You’re done

And that’s all! :)

Related posts:

  1. WordPress 2.8.3 Security Fix: Admin Password Reset
  2. How to install the latest version of WordPress
  3. How to make WordPress themes writable

Just found out about a potentially annoying WordPress 2.8.3 security issue. Basically, anyone can reset your admin password without any confirmation. This could be a major annoyance if someone decides to reset your admin password constantly.

I just tested this (on one of my own test blogs, of course) and it actually works. After anyone visits the URL, it sends the new password to your e-mail address. If you’re in the middle of doing something in your admin panel, you may have to login again.

Luckily it’s just a one line fix, which you might want to implement if some annoying person thinks it’s funny to reset your password. WordPress 2.8.3 was just released a little more than a week ago. Do I hear a WordPress 2.8.4 coming soon?

If this happens to you, and for some reason you don’t receive an e-mail with the new password and find you can’t login to your blog, you might want to look into resetting your WordPress password through phpMyAdmin.