I Design + Develop + Support WordPress websites

How to: Add the new Twitter follow button to WordPress

Twitter just came out with what I would describe as their version of the Facebook “like” button. It lets you add a button that your site visitors can push to follow your twitter account without ever leaving your site. To get this button onto your WordPress website, all you have to do is paste the following code where you’d like the button to appear:

<a href="http://twitter.com/terranb" class="twitter-follow-button">Follow @TerranB</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

This will give you a button that looks like this:

This will display a styled twitter follow button if you’re not following me, or a checkmark and the word “following” if you are followed by my twitter name. Go ahead and try it!

A couple of things to note

  1. You will of course want to change any reference to “TerranB” to your own twitter name
  2. If you’re adding this to the content area of your post make sure to paste it while in the HTML, not the Visual editor
  3. If you want to put the button in a widget area, just use a text widget

Advanced configuration

For those of you who are never satisfied with the “out of the box” styling and formatting twitter offers a number of custom configuration options for their new follow button.

Hide your follower count

By default the number of followers you have will be shown. To remove this add data-show-count=”false” to the link like so:

<a href="http://twitter.com/terranb" class="twitter-follow-button" data-show-count="false">Follow @TerranB</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
You’ll end up with a button like this:

Button, Text, and Follower Count Colors

You can also change the colors of the the follow button, the link to your twitter profile, and the follower count text by adding data-button=”color” (blue or grey), data-link-color=”hex code”, and data-text-color=”hex code” to the link respecitively. All together it would be something like this:

<a href="http://twitter.com/terranb" class="twitter-follow-button" data-button="grey" data-link-color="00FF00" data-text-color="FF0000">Follow @TerranB</a> 
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
This would get you a button that looks like this:

Other customizations

There are a number of other customizations available including the language used, alignment of the button, and Whether or not to display the user name with the button. It’s important to note that Twitter is very explicit in saying that it must be very clear what user the visitor will be following if they click the button, so if you choose to remove your username, you’ll have to display it yourself manually, so you should really only do this if you you’re unable to your username how you want with the Twitter supplied code. You can find out how to do all this, and anything else you want to know about the twitter follow button here

Won’t work on WordPress.com

Unfortunately for those of you using blogs hosted at wordpress.com, this code won’t work for because wordpress doesn’t allow the use of javascript citing security concerns.

If you’d like some help switching over to a self host WordPress website, just shoot me an email!

Will you use the Follow Button?

So what do you think? Are you going to use the new Twitter follow button on your WordPress site? Or are you going to stick with “old fashioned” links and the classic “t” twitter icon? Why or why not?

Why not to Automate Everything

A copywriter friend of mine, Christine Parizo, recently came across a request from a reporter looking for  a wordpress expert to answer some questions, so she thought of me. The reporter was looking for information on plugins that will automatically tweet and post to facebook when a new blog post is created. Now, there are all kinds of plugins out there that do this, but even if they all worked great (and I’m sure some of them do), I still wouldn’t recommend them.

I think automation is great. I also think the web is a great tool for automation. Even a website is a form of automation. You put up your sales copy, write a blog post, or put up a video, and it keeps on working for you automatically as a sales tool without you spending more time on that particular part of your site. Find a salesman who will do that!

But sometimes automation just doesn’t make sense. Think about it this way: You’ve just written a 1000 word blog post that you may have spent hours researching, or you’ve even just dashed off a quick 400 word post like this one is going to be because something sparked an idea, but then you let an automated bit of code take over when it’s time to write the whopping 14o characters it takes to promote the post on twitter. Does that make sense?

What these plugins do is take the post’s title, create a shortlink (from bit.ly for example) and post it using the authorization you gave it to access your twitter account. Sounds good so far, but what if that brilliant thing between your ears can come up with a better way to promote your post than by just spitting out the title? I bet it can too!

Once you’ve spent all that time writing your blog post, why automate that last crucial yet simple and fast step of promoting the post when you could probably come up with a much better way of promoting it in a fraction of the time it took you to write it?

My point is that automation is a great thing, but only if it either delivers the same same result in a shorter amount of time, or the time to “do it by hand” is greater than the reward of adding your own touch.

That’s my take on it. What do you think? Is all automation the right choice no matter how little time it saves, or does the human touch still matter on the web?

Create a Newsletter in WordPress

Ever wanted to create a separate “newsletter” page for your site that’s segregated from your main blog? This tutorial will walk you through doing just that for your WordPress site.

This post comes to you courtesy of Angelique at AfMarCom.com who had me create this solution for her site.

Step 1: Create Your First Newsletter

This part will be easy for anyone who’s used wordpress for any length of time. Just create a post as you normally would by clicking the posts link along the left hand side of your admin panel and then select “Add New.”

Maybe you’ll write about some time sensitive topic you really want people to read now. Maybe you want to offer excerpts from your weeks posts. Or as Angelique chose to do maybe you want to pair highlighted posts from the week with special newsletter only content.

So you’ve written your newsletter, and you’re ready to push that pretty blue “Publish” button. Don’t do it just yet. Wait for the next step.

Step 2: Create a Newsletter Category

There are other ways to do this (such as in the categories control panel), but you may as well do it while you’re creating your post. Just look for the “Categories” box along the right site of “Add New Post” page. Click “+ Add New Category,” name your category something like “Newsletter,” and click “Add.” Make sure the category is checked before moving on.

Ok, now you can go ahead and publish your post.

Step 3: Exclude your Newsletter from your blog page

Here comes the “tricky” part. First we need to find out what the category ID number of your new category is. Click the posts link along the left side as you did when creating a post, but this time select the “Categories” link.

Now find the Newsletter category you just created and hover your mouse over the link. In your browser’s status bar (usually in the lower left) you’ll see the URL this link will take you to. It’ll look something like this http://pressmy.biz/wp-admin/categories.php?action=edit&cat_ID=5. That number at the end is your category ID. Write it down for the next step.

Next we’re going to add some code to your theme’s functions.php file. Open it in your favorite text editor and add this code:

function exclude_category($query) {
if ( $query-&gt;is_feed || $query-&gt;is_home ) {
$query-&gt;set('cat', '-1');
}
return $query;
}
add_filter('pre_get_posts', 'exclude_category');

Before you go accusing me of being a php genius here’s where I found that code

You will need to make one little change to that code. See the part that says $query->set(‘cat’, ‘-1’);? Just change that number 1 to the category ID number you wrote down earlier.

Finish off this step by uploading functions.php to your server using your favorite FTP program. Check your blog page and make sure the post you just created isn’t showing up.

Step 4: “Create” your Newsletter Page

You may have noticed that “create” is in quotes up there. This is because we’re just going to use the archive system built into WordPress. First lets make sure your newsletter post is showing up on the category archive page.

The URL should be something like http://pressmy.biz/category/newsletter where “newsletter” is the name you gave your new category.

Some Thesis Only Display Options

Angelique uses a premium WordPress theme called Thesis, so to make her new newsletter page show up nicely I made a few changes to the theme which I’ve included here in case you use thesis too. If not you can ignore this step.

Unless you’ve already changed the thesis archive display options you’ll probably just see the title of each post in the category. If you like this then you can skip the rest of this step.

Customizing the look of your archives pages is one place that Thesis really shines. Just visit the “Thesis Options” panel and find “Archives” under “Display Options” along the right had column. You’ll find four options that should be pretty self-explanatory, but here’s a brief explanation:

  • Titles only: This is probably currently select. It will display only your post title as a link to the post
  • Everything’s a teaser!: Your archives pages will appear with a double column of post excerpt with a title, published date and read more link.
  • Same as your home page: Your archives will look just like your home page. Nothing more to be said here.
  • Post excerpts: This will look much like “Everything’s a teaser!” except each excerpt will take up the whole column

Just pick one and click the save button. Play around until you find the option you like.

Step 5: Add your Newsletter Page to Your Navigation Menu

Now that WordPress 3.0 is out you can add navigation menu items on any 3.0 safe theme super easy by visiting Appearance > Menus and adding the category to the menu.

Step 6 (optional): Remove “From the category archives” (thesis only)

Another “thesis only” step. Skip it if you don’t use thesis.

If you’re like me and you think the “From the category archives” text at the top of your Thesis Newsletter page shouldn’t be there, with a quick addition to your custom.css file we can fix that. Open Custom.css found in the custom folder of the main thesis folder and add the following code:

.cat_newsletter #archive_info p {
display:none;
}

Be sure to change “newsletter” in .cat_newsletter to the name of your category. If you would prefer to remove this text from all your archive pages simply remove the .cat_newsletter class from the above code

You’re Done!

There you have it. Now you have a newsletter page for your WordPress site where you can post special content, time sensitive posts, or summaries your blogging activity for the week or anything else.

What else can you think of to use a “newsletter” page for?

Another note

If you’d like to have multiple newsletters that don’t show up on the blog page, just replace

$query->set('cat', '-1');

with

$query->set('cat', '-1', '-2', '-3');

Notice, you’re just adding a comma and then adding new category IDs. Really simple!

Display Content Only to Logged in Users in WordPress

This is something I recently did for one of my sites that I think is really neat, so hopefully you will find it useful as well.

Basically it adds content to a post or page based on your input in a custom field, but only for logged in users. It also displays a message telling non-logged-in users that they’re missing out on something.

Here’s the first part of the code which goes in your themes functions.php (custom_functions.php if you’re using Thesis):

function add_loggedin_content () {
global $post;
$loggedinmessage=get_post_meta($post-&gt;ID, 'logged_in_content', TRUE);
if ($loggedinmessage) {
if ( is_user_logged_in() ) {
echo do_shortcode( $loggedinmessage );
}
else {
echo 'This page contains content that only logged in users can view. If you are registered <a href="/wp-login.php">click here</a> to get access. To register <a href="/wp-login.php?action=register">click here</a>.';
}}}

My application is to display a contact form only to logged in users. Since I’m using contact form 7, I wanted to be able to insert a shortcode in the custom field. If you wanted to insert regular content just change:
echo do_shortcode( $loggedinmessage );
to:
echo $loggedinmessage;

Adding the user only content

To use this function just go to the post/page, scroll down to “Custom Fields” and click on “Enter New.” In the “name” field enter:
logged_in_content

Then enter whatever shortcode or content you want in the “Value” field.

Theme specific code

You need to add a bit more code to get the contents of your new custom field to actually show up. The problem is that this code tends to be theme specific.

The site I’m using this code on is using the Thesis Theme. If you are too you can just use this code:

add_action('thesis_hook_after_post', 'add_loggedin_content');

This will run the function at the bottom of the post.

To get the code to a similar location in the Genesis Theme, another of my favorites you’d instead use:

add_action('genesis_after_post_content', 'add_loggedin_content');

Please note that I haven’t actually tested this, but according to WPrecipes you should be able to get a similar effect in any wordpress theme by instead using this code:

add_filter('the_content', 'add_loggedin_content');

So what uses can you think of to put this code to use for?