Archive for the ‘How To’ Category

I’ve seen a few plugins out there for displaying your tweets in widgets but you don’t really need them unless you’re trying to do something special.

You can use WordPress in built feed widgets to do exactly what your after.

Watch this 1 minute video

Go to Appearance->Widgets in WP admin.

Drag an RSS Widget over to your sidebar and rename it “Recent Tweets” or whatever you want.

Open your twitter feed in another browser tab and look for the “RSS feed of BlogPiG’s tweets” in the bottom right of the twitter sidbar.

Copy the link of the feed and then paste it into the RSS widget you still have open in WP admin. Mine was http://twitter.com/statuses/user_timeline/21875500.rss

Choose “How many items would you like to display?” I chose 10.

“Display item content?” has no effect.

“Display item author if available?” has no effect.

I chose not to “Display item date?” it’s your call.

Save the settings and visit the frontpage of your blog to view your twitter sidebar feed in all its glory.

If you’re like me and don’t like the RSS badge next to the title of the widget then simply add the following code to the bottom of your style.css in your template directory and it will instantly dissapear.

.widget_rss img {display:none;}

And there you have it, Twitter updates in your Wordpress sidebar in less than 5 minutes with no plugins!

This is little off the beaten track from my normal posts so gloss over this one if it’s not really relevant to you.

I’m posting this because I’ve made a new commitment to give a bit more back to the ‘web’ in general, basically if I find some information or a technique I use in my business or here on BlogPiG.com I’ll post about it for others to find.

As it happens this is a technique I actually put together myself

The Problem

Most WordPress templates use a quote background image to enclose the blockquote content. The problem is that you CSS only allows one background image per element so you can only have an open quote image. I always thought this looked a little odd as you should really close the quotes too.

I found a couple of proposed solutions out on the web, the most interesting involved enclosing the the contents of the blockquote inside an additional DIV and styling that with another background image containing a close quote positioned to the bottom right.

This would indeed work but having to remember to add the additional DIV inside WordPress blockquotes would be a pain and it means you’d have to leave the WYSIWYG editor and switch to the HTML editor, an issue for some people perhaps.

In short it wasn’t elegant enough…

The Solution

I finally realised that WP already enclosed the contents of the blockquote inside another element, namely a paragraph ‘p’ tag. With this knowledge I could simply style the ‘blockquote p’ CSS to contain the close quote mark image and position it using margin and padding. Et voila!

WordPress blockquotes with a neat close tag automatically added each time I use them.

I centre my block and the text inside the paragraph but you should be able to style it exactly as you need with a bit of tweaking.

The CSS

/* Start blockquote */
blockquote p
{
width:100%;
color:#E6751F;
font-family:"Helvetica Neue", Helvetica, Arial, Sans-Serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
background-image:url('images/ClosePostQuote.png');
background-position:right bottom;
background-repeat:no-repeat;
text-align:center;
margin:0px 0px 0px 0px;
padding:0px 30px 15px 0px;
}

blockquote
{
width:75%;
margin-left:auto;
margin-right:auto;
padding:20px 0px 0px 35px;
background-image:url('images/PostQuote.png');
background-position:left top;
background-repeat:no-repeat;
position:relative;
left:-15px;
}
/* Finish blockquote */

Some Notes

I had to include the 0px margin in the p style or it doesn’t work, I have no idea why this is.

Add a contrasting background colour to both your ‘blockquote’ and ‘blockquote p’ styles temporarily whilst you adjust your padding. It makes it much easier to see what is going on.

If you’re centering the blockquote using margin left/right auto then don’t forget to offset it’s postion by the same amount as you right pad the paragraph. In my case the paragraph was right padded 15px so I positioned the block with a relative left -15px. This seems to maintain the centering nicely

I’ve checked this using Firefox, Chrome & IE browsers and all seems well. I’ve also tried it with lengthy multi-line quotes as well as single line and that appears to work without problems too (i.e this quote)

Please leave feedback in the comments if you use it successfully or improve it or maybe find it just doesn’t work for you.

I love my iPhone. It is an integral part of my decentralisation strategy allowing to me ‘work’ when I’m nowhere near my office or even laptop. In short it has changed the way I run my business and if you haven’t already got one and you’re serious about running passive income business you really should think about. Anyway that’s enough for now, I’m starting to sound like an Apple fan boy which I’m definitely not.

I’ve got most of my life wirelessly synchronised on the cloud – mail, contacts, calendar, my documents etc. I can pretty get to anything I need regardless of where I am or what device I’m on. One the areas were the iPhone is somewhat lacking is in its Safari browser. Don’t get me wrong, it works well enough as a stand-alone browser but it has no real connection between my desktop or laptop browsers, which is a pain.

Nuke My iPhone

I already use Google for my mail, calendar & contacts sync across all my devices so Apple’s MobileMe solution didn’t really appeal. I finally gave in and got a £60/year account when they released the ability to remotely locate, lock and wipe your iPhone if it’s lost or stolen. That’s the trouble when a single device contains so much of your data, losing it doesn’t bare thinking about! With this in place and of course PIN protection I feel pretty secure.

When I activated the MobileMe account on the iPhone I noticed that in addition to ‘find my phone’, mail, contacts & calendar it could also push bookmarks. This sounded like a nice bonus, getting my desktop bookmarks pushed onto my iPhone would be sweet. I know you can already sync your bookmarks via iTunes but I only ever plug my iPhone in via USB for software updates once every blue moon.

Unfortunately a quick glance at the windows client for MobileMe showed that for some reason MobileMe will only synchronise with Safari or Internet Explorer bookmarks and of course I use Firefox for everything!

If you’ve got iTunes installed on Windows the chances are you already have the MobileMe client installed and you’ll find it in your Control Panel folder. If not you can download it from here:

Full setup instructions for the MobileMe Control Panel are available on the Apple website but it is pretty intuitive stuff.

Once this is done you’ll have your IE favourites synchronising with the MobileMe cloud which in itself is pointless as I don’t use IE…

X Marks The Spot

I already keep the Firefox bookmarks on my 2 laptops & 1 PC in sync using a cloud service and plug-in called Xmarks. They also have a sync client for Internet Explorer which is slightly different to the Firefox version as it’s not a plug-in, it runs as a separate program in the taskbar. This is actually a distinct advantage because it means that you never have to open IE to have it synchronise the IE favourites. It all happens seamlessly in the background. Which is good, because I don’t like opening IE.

If you’re installing Xmarks for the first time you’ll need to sign-up for a free online account that will used to store all your bookmarks in the cloud. Install the Firefox plug-in first and then the IE application. When running the IE application setup use your exiting Xmarks username & password so that it pulls the bookmarks from the same account.

TIP: Whilst Xmarks is a free service they have to make money somehow and they do this by adding some additional features to your browsers called Discovery which is essentially smarter web search and annotated search engine results. This may or may not be your cup of tea but it’s not for me so was easily turned off in the settings menu in both the Firefox plug-in and IE taskbar app. Full credit to Xmarks for making it so easy to turn off.

Now you should have 2 new icons in your taskbar, MobileMe (the cloud logo) and Xmarks for IE (the X logo).

Your Xmarks plug-in will be sending your Firefox bookmarks to the cloud which in turn will be downloaded into your IE favourites folder (without touching IE) by the Xmarks IE taskbar application.

MobileMe is of course monitoring your IE favourites folder for new bookmarks and when it spots one it will synchronise with your MobileMe cloud account which will then push the new bookmarks to you iPhone Safari browser.

I’m not exactly sure of the polling intervals of the various pieces of the jigsaw, but I can pretty much guarantee a new bookmark will appear in my iPhone browser within 10 minutes of me adding it to Firefox on my laptop and that’s perfectly good enough for me. Et voila!

TIP: I turn on Encrypt All in the advanced settings on both the Firefox and IE Xmarks apps.

Finally to complete the solution you will need to install & setup the MobileMe and Xmarks clients on all your various desktops and laptops to ensure wherever you add a bookmark it ends up on your phone browser too.

It’s a little bit clunky I’ll give you that but it works seamlessly none the less which is what matters in end. I had already subscribed to MobileMe and was an avid user of Xmarks so the addition of the IE client was no great shakes…

I’ve received an email this morning with some info about the latest task I’ve been working on. The strange part is that I’ve received it from Google It was a `Google Alert` and to my surprise the link pointed directly to the FlySpray page with a bunch of internal stuff (requests, comments, discussions). FlySpray is our bug and product development tracker.

I logged out of my account, to check if the flyspray page was publicly available and it actually was. That part of the site was initially protected with a `.htaccess` file, but we’ve changed it recently and by mistake left this`flyspray` project unprotected. Also, we had no `robots.txt` file in place and that’s how our internal data ended up on Google.

As chance had it, Google helped us catch the problem, too. Some time ago I created a bunch of Google Alerts to monitor news about certain products and companies. I created alerts for search terms like `MySQL` (the popular database), `Symfony` (PHP framework), `Ubuntu` (Linux OS), `BitDefender` (antivirus software), `Payoneer` (global payment company) and `Borland` which was later changed to `CodeGear` (a software tools company).

This worked so well, that I quickly added more alerts to monitor some of our own brands, but rather than check for news, I made it alert me whenever Google found any web page with our brand in it. So far it picked up quite a few other pages. And it picked up our security problem as well this morning

Without the Google Alert in place this security hole could easily have remained undiscovered for some time but with Google’s help we’ve been alerted quickly and prevented any real problems occurring. I highly recommend setting up Google Alerts for your most popular brands and keywords that are exclusive to sites and products. Apart from security alerts they’re very useful for finding out who is writing what about your products and services.

In order to create an alert:

• go to the Google Alerts page
• enter your `Search terms` or brands
• choose `Type` (can be `News`, `Blog`, `Web`, `Comprehensive`, `Video` or `Groups`)
• set how often you want to be alerted (`as-it-happens`, `once a day` or `once a week`)
• if you’re not logged into Google you will only be able to enter your email in the last field, but if you’re logged in you’ll be able to choose if you want the alert delivered to your email or to the `feed` which then creates a RSS feed for the alert and can be used with any RSS reader including Google Reader.

Once created your alerts can be managed from the `Manage Alerts` page.

httpvhd://www.youtube.com/watch?v=r1A044wC_Cs

If you’re using TagPiG to automate your post tagging you may also be using it’s publish feature to display the generated tags on your blog and feeds. It’s a very powerful feature but I’ll go into detail on that more in another post.

Today I wanted to mention one of the issues that can arise when you use the TagPiG publish feature. Increasingly WordPress theme designers are embedding tag code into their templates. If you then go and turn TagPiG publishing on you’ll end up with 2 sets of tags listed below each post.

To get things working correctly you’ll need to take the embedded tag code out of you template first and leave all the tag management to TagPiG. It’s a pretty easy job but you will need to edit a little code.

You can either edit your templates directly using notepad or even you FTP client but perhaps the easiest way is to use WordPress iteself to edit them in place on you blog.

In WordPress 2.7+ Admin area go to Appearance > Editor in the sidebar. Make sure your active theme is chosen in the dropdown box. You will probably see the following message at below the editor screen:

You need to make this file writable before you can save your changes.

The 2 files we need to focus on are index.php and single.php. Go into your FTP client and change the permissions on these files to 777 (CHMOD 777).

Now in the WordPress Editor select ‘Main Index Template (index.php)’ from the list on the right. If you don’t get a large blue update button below the edit window, something has gone wrong so go back and check the permissions on the two files in your FTP editor.

Scroll down through the file looking for the following code:

<?php the_tags( __( ‘Tagged’ ) . ‘: ‘, ‘, ‘, ”); ?>

It may not look exactly like this but it’s ‘the_tags’ you’re looking for really. Once you’ve found it remove everything between and including the nearest <? and ?> tags. Hit the ‘Update File’ button.

Repeast this process for the ‘Single Post (single.php)’ page and remove the_tags element. Don’t forget to the update the file.

Now go back into your FTP and reset the file permissions to 644.

That’s it, you’re done. You can use TagPiG as your only tag publisher, giving you much more control over how they appear and how many are displayed.