wordpress tricks

WordPress tip: How to upgrade all your plugins in one go

Friday, January 15th, 2010

If you haven’t upgraded your WordPress blog to 2.9 (actually 2.9.1 as of the time of this writing), you should.  With the 2.9 update, the people at WP have implemented a feature that I’ve been pining for for some time.  The only problem is it’s not where you’d think it might be.

If you do regularly keep up on your WP updates whenever you get an alert that there’s a new version, you probably saw the option to upgrade your plugins when you upgraded to 2.9.1.  But I know a lot of people (myself included) often let updates slide, and while I did run out and upgrade to 2.9, I hunted for the upgrade-all-the-plugins-at-once button and didn’t find it.  If you’re like me, this post is for you, and here’s what you do.

First off, upgrade if you haven’t already.  WordPress has made it easy to do an automatic upgrade since the 2.7 release, so all you need to do (in most cases) is click a button and WordPress does the work for you.  But what if you are at 2.9+ and you have a little red icon next to your plugins menu on the sidebar, and you want to take care of all of those at once?  It’s not in the Plugins page — which is where I assumed it would be — despite the fact that you can filter your plugins by those needing to be updated.  Instead, you’ll need to head to the Upgrade page in the Tools menu, a place that normally you wouldn’t go for anything other than upgrading WordPress.

Once you’re on the Upgrade screen, everything should make sense.  If you need to upgrade your WordPress version, you’ll have an option to do that, and if you need to upgrade any of your plugins, they will be listed underneath with checkboxes next to each one, and an option to select all. After you click on the Upgrade Plugins button, it’ll go through each one, and tell you at every point what’s going on.

…and that’s it.  WordPress will tell you when it’s done, and the whole process should be pretty quick.

Fixing problems

What it’s doing is temporarily dropping your site into maintenance mode while it does the work.  This takes down your site for a few minutes and displays a message that says “Briefly unavailable for scheduled maintenance. Check back in a minute” (it looks like this).  It should really only take a few minutes and as soon as it’s done it will come back up.  However, if there’s a problem on your server and the script stops, it means your site is locked in maintenance mode, and even you can’t get in.

Luckily, this is relatively easy to fix.  When WordPress goes into maintenance mode, it creates a temporary file in your site’s “root” folder (the folder on the server that your WordPress installation is located that contains the wp-admin, wp-content, and wp-includes folders) called .maintenance.  All you need to do if your site gets stuck in maintenance mode is to delete the .maintenance file.  This may require connecting via FTP or going to your webhost and accessing a File Browser-like GUI that displays a list of files in your installation.  Once you’re looking at the files in your WordPress install, it should be easy to spot the .maintenance file and delete it.  Once that’s done, you’re back in business (although you may want to try upgrading that plugin individually from the Manage Plugins page, or manually by uploading a newer version to your server).

Saves time

Being someone who maintains multiple WordPress sites and has to periodically upgrade all of them when there’s an update available, this feature is invaluable to me.  It’s so much faster and easier to go to one screen on each site I need to update, and upgrade both the version of WordPress and all the plugins more or less at the same time, and then move on to the next site.  Even if you only have one blog, this takes a lot of the hassle out of having to do periodic plugin updates.  It’s something that a lot of us have been asking for since Automattic added in the automatic upgrade feature, and I’m glad they finally added it in.

Questions?  Comments?  We’d love to hear from you!  Let us know if this post helped you out!

add social links to your site

Wednesday, June 17th, 2009

i spent this morning building and adding some social linking to our site.  with all the digging and twittering and facebooking going on, if you have content worth sharing and you aren’t providing ways for people to share it, it’s fairly likely that people won’t.  now, i have digg, facebook, and delicious bookmarklets in my google chrome bookmark bar, but i realize that i’m a geek and probably most people don’t do this.  and anyway, it’s always nicer when those things are built directly into the page.

so i thought that i would share with you how to add social linking to your website or blog.  please note that some of the code here will be wordpress-specific — which is great for wordpress users, but won’t be so helpful for those of you who don’t use wordpress.  i will point out the areas where the code is wordpress only — there are plenty of resources out there for alternatives for your platform of choice.

the icons

first thing’s first — let’s get some icons.  obviously the ones we are using have been customized.  i actually sort of cheated a bit and modified the grunged-up icons i used for the social sidebar i have on jazzsequence.com, because i thought the style would fit.  and also, i’m doing the same thing over there, so i figured i’d just use the same icons to make my life a bit easier.  so you can’t use mine, but there’s some really nice stuff out there — i used a pack i found on iconspedia, but there’s always some good stuff on smashing magaine among other sources.  do some creative googling and you can find some awesome packs with the sites you want to share.

the template files

next, is tweaking the template files.  if you’ve never even looked at your theme’s php files, this can be daunting at first.  and if you don’t have at least some brief experience in html, this may not be for you (but it might, you never know until you give it a try and break something horribly! keep backups of everything!).  in that case, i’d recommend the sociable plugin, which actually allows you to take the icons you just downloaded and put them somewhere on your server and then just enter the path to the folder that you uploaded them to.  you get less customizability in how and where your social linking bookmarks go on the page, but you make up for that in choice and convenience (there’s something like 99 different sharing methods to choose from that sociable offers).

if you’re still with me, decide what pages you want your links to show up on.  for the arcane palette site, i chose to just put them on the single post page, but you can put them on all your pages, blog, and single posts, as well as any custom templates you may be using.  there are two ways of editing the code.  in either case, it’s best to save a backup copy of all the files you’re going to be changing in case something breaks or you want to put it back.  the first method is to do it directly from the wordpress backend.  this is a little bit more sketchy for newbies just because you are making changes live on the site.  however, if you saved a copy of the file before making any changes to it, then you should be fine.

so to get to the internal text editor, (assuming you have wordpress 2.7 or higher) you go to Appearance and then Editor (for older versions it’s in Design and then Editor, or possibly Theme Editor — it’s been a while since I’ve dug around in the older back end).  on the right side, you will see a long list of files.  these are all the various page templates on your site.  the ones you want to concern yourself with are index.php (Main Index Template), page.php (Page Template), and single.php (Single Post).  if you’re using a Revolution/StudioPress theme, or one that is built similar, you may have a home.php which is your Home Page Template.

some of this, if you aren’t familiar with how your theme is structured, is going to be a bit of trial and error, but pretty much I look for one of two things in the template: either the Edit This Post link (which will look something like this:

<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

or the metatag portion of the post, generally classed as postmeta or something similar, which would be something like this:

<p>
<small><?php the_category(', ') ?> | <?php the_tags() ?></small>
</p>

you may also see something like this if your theme is either the default (kubrick) theme, or based somewhat on it:

This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You’ll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) – (60*120)); echo time_since($entry_datetime); echo ‘ ago'; */ ?>
on <?php the_time(‘l, F jS, Y’) ?> at <?php the_time() ?>
and is filed under <?php the_category(‘, ‘) ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link(‘RSS 2.0′); ?> feed.
This entry was posted
<?php /* This is commented, because it requires a little adjusting sometimes.
You'll need to download this plugin, and follow the instructions:
http://binarybonsai.com/archives/2004/08/17/time-since-plugin/ */
/* $entry_datetime = abs(strtotime($post->post_date) - (60*120)); echo time_since($entry_datetime);
echo ' ago'; */ ?>
on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?>
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through the <?php post_comments_feed_link('RSS 2.0'); ?>
feed.

for our site, i put it under the post meta (categories/tags) but above the related posts.  interesting side note: if you’re using this method of displaying related posts without a plugin, i was having issues with the tweet this link posting the url of the last related post in the tweet, rather than the post you are looking at if you put this sharing block underneath the related posts.  seemed to be a bug with the related posts not closing off, but i’m not a programmer, i’m just a hacker, so i just threw this block above those links and solved the problem.

the code

here’s the block of code i used:

<span class="linktous">
<a href="javascript:var notes='';if(window.getSelection)notes=window.getSelection();else
if(document.getSelection)notes=document.getSelection();else if(document.selection)notes=
document.selection.createRange().text;if(notes.length>350)notes=notes.substring(0,349);
location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent(location.href)+
'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(notes)"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Digg
This" />&nbsp;Digg This Post</a>&nbsp;|&nbsp;<a href="javascript:(function(){location.
href='http://delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title=
'+encodeURIComponent(document.title)+'&v=5&jump=yes'})()" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/delicious.png" alt="Save to del.icio.us" />&nbsp;Save
to del.icio.us</a>&nbsp;|&nbsp;<a href="javascript:var d=document,f='http://www.facebook.
com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1239647138&u='+e(l.href)+
'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);
share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer',
'toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test
(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/facebook.png" alt="Share on Facebook" />&nbsp;Share
on Facebook</a>&nbsp;|&nbsp;<a href="http://twitter.com/home?status=Check this out: <?php
the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>" target="_blank"><img
src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Send this page to Twitter"
/>&nbsp;Tweet This</a>&nbsp;|&nbsp;<a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />&nbsp;
Subscribe by RSS</a>
</span>

that’s a big mess of code in several different languages, so i’ll break it down so you can see what each thing is doing.  also, this assumes that you’ve uploaded your images to the /images folder in your theme and that you are using the same links i am, namely: digg, delicious, facebook, twitter, and for kicks, rss.  i’ll post the code for stumbleupon as well at the end.

span

<span class="linktous">

first, i put everything in a span which i named “linktous”.  this is to make it identifiable later, but also because i add a few css tweaks later, which i’ll get to.  the span isn’t absolutely important, but you’ll find you need it (or something similar) if you want to move stuff around at all.

digg

<a href="javascript:var notes='';if(window.getSelection)notes=window.getSelection();else
if(document.getSelection)notes=document.getSelection();else if(document.selection)notes=
document.selection.createRange().text;if(notes.length>350)notes=notes.substring(0,349);
location.href='http://digg.com/submit?phase=3&url='+encodeURIComponent(location.href)+
'&title='+encodeURIComponent(document.title)+'&bodytext='+encodeURIComponent(notes)"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/digg.png" alt="Digg
This" />&nbsp;Digg This Post</a>&nbsp;

here’s the digg code.  this particular javascript link allows you to select a portion of the text which will be auto-filled in your digg submission when it sends you there.  not that you need to tell your users that or anything, but you can if you want and it’s pretty neat.  otherwise you can find another digg link that doesn’t do that if you really want, but if nothing is selected, then obviously nothing will be copied, and i’m willing to be that most people will have already selected text anyway because they will be copying and pasting text from the page into digg.  when they get there, they’ll get a little happy surprise.

there isn’t anything major to this link, since the javascript code inside the href does all the heavy lifting.  if you take a look at the end in the img tag, you’ll see that rather than typing in a long path to the image, i used wordpress shortcode.  there’s lots of stuff you can do with <?php bloginfo() ?> which you can read about in the wordpress codex.  a lot of themes will use bloginfo(‘url’) for everything, but that just gives you the main url to the site.  bloginfo(‘template_url’) or bloginfo(‘stylesheet_directory’) send you to the folder of the theme you’re using.  i uploaded all my icons to my theme’s /images folder, so this makes it easy for me, but if you made a folder called “images” just in the root directory, you could do <?php bloginfo(‘url’); ?>/images/youricon.png and be able to easily use the same code if you changed themes.  also, if you haven’t seen or used it before, &nbsp; is the ascii code for a space.  since the code is a big messy beast, i want to make sure there’s the right spacing between my images and the link text.  i could do this with css, but i wanted to keep the css to a minimum so i could easily reuse the code.

del.icio.us and facebook

|&nbsp;<a href="javascript:(function(){location.
href='http://delicious.com/save?url='+encodeURIComponent(window.location.href)+'&title=
'+encodeURIComponent(document.title)+'&v=5&jump=yes'})()" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/delicious.png" alt="Save to del.icio.us" />&nbsp;Save
to del.icio.us</a>&nbsp;

another javascript link that sends you to a delicious submit page.  the links, you’ll notice, are separated by a pipe or |.  it’s a key on your keyboard that you probably don’t even know is there if you’re not a programmer or a hacker.  other than that, and the stuff from above which i’m continuing to use, there’s nothing to see here, or here, when we get to facebook:

|&nbsp;<a href="javascript:var d=document,f='http://www.facebook.
com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1239647138&u='+e(l.href)+
'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);
share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer',
'toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test
(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)" target="_blank"><img src="<?php
bloginfo('template_url'); ?>/images/facebook.png" alt="Share on Facebook" />&nbsp;Share
on Facebook</a>&nbsp;

the facebook share opens a new window, so the javascript link is a bit bigger, but otherwise it’s the same stuff we’ve been doing above.

twitter

|&nbsp;<a href="http://twitter.com/home?status=Check this out: <?php
the_title(); ?> <?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>" target="_blank"><img
src="<?php bloginfo('template_url'); ?>/images/twitter.png" alt="Send this page to Twitter"
/>&nbsp;Tweet This</a>&nbsp;

twitter was a bit trickier because of the character limit.  if you’re using pretty permalinks, and you have a url that’s something like http://mydomain.com/wordpress-tricks/how-to-add-an-awesome-social-link-block-to-your-blog/, that’s going to take up most of your character limit with the url alone.  so i started looking for url shortening in a tweet this type code and, while i didn’t find it, this guy had an idea that reminded me that wordpress has a form of url shortening built in.  sort of.  as he explains in his method of creating a tweet this link from your wordpress blog with shortened urls, when you first setup wordpress, all your blog post urls look like this:


http://yourblog.com/?p=123


the part after the ?p= is the ID number of the blog post.  his method describes how to add a url rewriting rule to your .htaccess file so you could do really short urls like this:

http://iboughtamac.com/s/1352

i didn’t want to bother with editing the .htaccess file, especially since the original url is both still entirely functional even with pretty permalinks turned on, and just as short, really.  so here’s the link that i am sending to twitter:

<?php bloginfo('url'); ?>/?p=<?php the_ID(); ?>

first, i get the base url of the site.  it helps (for shortening purposes) if you’ve set the url of your blog in the general settings in your wordpress admin to be http://yourdomain.com rather than http://www.yourdomain.com, but it’s no big — it’s just 3 characters.  so then i added the /?p= to make the url mimic the old-style, ugly permalink.  i follow this by adding the wordpress shortcode to get the ID of the post.  so the url of this post would be:

http://arcanepalette.com/?p=455

not too shabby, eh?  it’s got nothing on http://is.gd/14wmq in terms of brevity, but it’s still pretty good.  twitter is pretty easy because you can send posts to twitter via just about anything.  you can type out your post in your address bar if you were really so inclined.

finishing touches

|&nbsp;<a href="<?php bloginfo('rss_url'); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/rss.png" alt="Subscribe by RSS" />&nbsp;
Subscribe by RSS</a>
</span>

i chose to add an rss subscription link to each single post as well, as a way to remind people that they can always subscribe by rss.  getting rss subscribers is a good thing because it brings your site’s visitors back, even if they aren’t actually hitting the site.  once again, i’m using wordpress shortcode to handle the rss url (bloginfo(‘rss_url’)).  if you’re using feedburner and have the feedsmith plugin installed, this will work for you, however, if you don’t have the feedsmith plugin, substitute the <?php bloginfo(‘rss_url’); ?> with your feedburner url.  also, i closed off the span i started at the beginning.

i mentioned earlier that i added some css tweaking.  i wanted my icons to be a bit bigger to make them more visible.  usually when you see buttons like this, they are the standard favicon size of 16×16, but that’s really small.  i made mine 20×20 which isn’t that much bigger but it does make it a bit easier to see what they are and notice that there’s some texture to them.  because of this, i needed to add some css to make the icons vertically centered with the text.  so i added this to my style.css:

.linktous img{margin-bottom: -3px;}

this pulls the icons a few pixels down and levels it out a bit.  i also added a .linktous {text-transform: lowercase;} to make all the text, well, lowercase.  this is purely for aesthetic reasons.

stumbleupon

if you wanted to include a stumbleupon button as well, here’s the url, pulled directly from their button generator thingie:

http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>

so to put it in the same style as everything else, you’d do something like this

|&nbsp;<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>"
target="_blank"><img src="<?php bloginfo('template_url'); ?>/images/stumbleupon.png" alt="Stumble This" />
&nbsp;Stumble This</a>

conclusion

why go through all the effort if, as previously mentioned, sociable does something really similar?

one reason is aesthetics and control.  this way i can style the links the way i want and put them where i want and not have resign myself to doing it however the plugin-du-jour happens to do things.

another reason is experience and because i like to get my hands dirty.  if you’ve gotten this far, i imagine you like to get your hands dirty as well, or at least are interested in learning more about how to build and/or customize wordpress themes.

the last reason is stability.  i learned (the hard way!) from using tons of firefox extensions that doing so doesn’t exactly result in the most stable (or fast) environment.  taking care of the code myself and embedding it into the theme rather than tacking on yet another plugin is one less complication, one less thing to upgrade, and one less thing that can break.

so that about wraps up this lesson.  i hope you found this useful and feel free to use the fabulous links below to share this post if you did!

arcane palette home about arcane palette creative design contact arcane palette creative design arcane palette free stuff arcane palette's commitment to being green arcane palette portfolio arcane palette design services arcane palette swag