Archive for the ‘WordPress’ Category

How to Publish a Post in the Future using WordPress

Friday, July 11th, 2008

If you’ve ever wanted to publish a specific post on a particular day in the future, it’s very simple to do if you’re using WordPress.

Once you have written your post, instead of hitting the save or publish button, click the edit button next to publish immediately.

This will open up other options (see image below).  Select the month, date, and time when you’d like your post published, and press the publish button.

Don’t make the common mistake of pressing save.   While save seems to make more sense, it is in fact the incorrect button to press. Hit publish instead, and on the time and date you’ve set, WordPress will automatically publish your post.

See?  Easy!

Highlighting External Links within WordPress

Sunday, July 6th, 2008

You may have seen this symbol  next to links on various pages of the Web. It denotes that the link (which is usually placed before the symbol) is an external link.

If you’ve ever wanted to differentiate internal links from external links on your blog, there is a fairly simple way of doing it, and all it requires is a few lines of text added to your stylesheet.

In this post, we’ll show you how to do it.

Why differentiate between internal and external links?

Today, most people scan, they don’t read the full text of a blog. By representing your external links visually, visitors can see – at a glance – that you’ve given them quick access to relevant and related content that is not solely on your site. This is significant because the easier you make it for your visitors; the more information you supply, the more likely they are to subscribe to your RSS feed, or return to your site next time around.

How to differentiate between internal and external links on your blog

You won’t need to change anything on your existing posts; you’ll just need to make a few small changes to your style sheet.

This change will automatically update every post you have ever written.

Step 1: Copy the ‘external’ Image File

You need to copy the image file, external.gif, to the images sub-folder within your current WordPress theme folder.

Step 2: Add ‘external’ Image to Links

To create links that appear within posts as:

Add the following to your style sheet:

a
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
 

The right padding value of 12 pixels ensures that the image does not overlap the text of the link.

Step 3: Differentiate Between Relative and Absolute Links

A handy feature of CSS is that you can apply a style not only to a HTML tag, but optionally based on the contents of any of the HTML tag’s attributes.

For example, to apply the above style to only those link references which contain “http:”, you modify the style sheet entries as follows:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
 

But this is only useful, if links to other posts are relative and not absolute links. An example of a relative link is ‘<a href=”another-post”>…</a>‘; whereas, an absolute link is ‘<a href=”http://blog.example.com/another-post”>…</a>‘.

Step 4: Exclude Absolute Links to Your Blog or Web Site

Now WordPress always uses absolute links. So to ensure that any link to your own blog or Web site does not have the external image applied, you follow the above style with entries which undo this change. The entries are specific to domain name of the blog or Web site.

For BlogWell, all our links start with http://blog-well.com. You will need to replace “http://blog-well.com” in the entries below with the domain name of your blog or Web site:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
} 

Step 5: Add a Class to Exclude the ‘external’ Image

Sometimes you may want some links which go outside of your blog or Web site to not have the external image applied. You can do this on a case by case basis by using a link class of ‘noexternallink’. Within your post you would write the link as:

<a class='noexternallink' href='http://example.com'>Example</a>

And the style sheet would contain:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Note than ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="http://blog-well.com"]‘ are separated by a comma. This is very important, since it ensures that the background of none and right padding of 0 pixels are applied to both ‘a.noexternallink[href^="http:"]‘ and ‘a[href^="http://blog-well.com"]‘. If you forget the comma, then it will only be applied, should ‘a[href^="http://blog-well.com"]‘ follow a ‘a.noexternallink[href^="http:"]‘.

Step 6: Exclude ‘external’ Image from Header and Footer Items

Within BlogWell’s theme we did not want any links within the header or footer to use the external image. Our theme uses the DIV HTML tag to identify the header and footer, and use the ID values of ‘header’ and ‘footer’ for each respectively.

<div id='header'>
...
</div>
...
<div id='footer'>
...
</div>

Without having to change all the links within the header and footer to use the ‘noexternallink’ class for links, we can easily prevent any links within the header and footer DIVs by using the following:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 7: Exclude ‘external’ Image from Sidebar Items

If you didn’t want the external image to be applied to any links within any of the sidebars, you can do the following:

a[href^="http:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"],
#footer a[href^="http:"],
#sidebar a[href^="http:"],
a.noexternallink[href^="http:"],
a[href^=http://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 8: Include Both Normal and Secure HTTP Links

If you use Secure HTTP, then your links will start with “https:”. To handle either standard HTTP (http://) or Secure HTTP (https://), then the above style sheet entries would be:

a[href^="http:"], a[href^="https:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="http://blog-well.com"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

Step 9: Review Padding Styles for Existing Links in Your Theme

A word or caution, as now links within the blog or Web Site will have a right padding of 0 pixels. If your theme explicitly sets the right padding for some items, then you will need to mark these settings as important which will ensure that value is used instead of the new value of 0 which is set in the above style sheet entries.

For example, BlogWell’s menu in the header, uses links which have a right padding of 20 pixels. So after adding the above entries to our theme’s style sheet, our menu appeared as:

The style entry which sets the menu’s right padding is:

#topnav ul li a
{
  padding-right: 20px;
}

CSS allows style sheet attributes to be marked as important, which means they will not be overridden by other style sheet entries. We can use the “!important” tag to ensure that the right padding of 20 pixels is used rather than it be overridden by the 0 pixel padding of our external link entries.

#topnav ul li a
{
  padding-right: 20px !important;
}

Our menu is now restored to its correct state:

Step 10: Review

To highlight external links within your blog or Web site do the following:

1) Copy external.gif to the images sub-folder of your current WordPress’ theme folder.

2) Add the following lines to your style sheet:

a[href^="http:"], a[href^="https:"]
{
  background: url(images/external.gif) no-repeat right top;
  padding-right: 12px;
}
#header a[href^="http:"], #header a[href^="https:"],
#footer a[href^="http:"], #footer a[href^="https:"],
#sidebar a[href^="http:"], #sidebar a[href^="https:"],
a.noexternallink[href^="http:"], a.noexternallink[href^="https:"]
a[href^="http://blog-well.com"], a[href^=https://blog-well.com]
{
  background: none;
  padding-right: 0px;
}

3) Review your style sheet to see if any entries explicitly set the right padding value, in which case you may need to mark them with the “!important” tag.

A Final Word on Browsers

Should the link wrap around to a new line, Mozilla Firefox will display the external image correctly, following the end of the link on the new line.

 

However, Microsoft Internet Explorer will display the external image incorrectly at the end of the first line without any margin so it overlaps the text.

 

Moving from WordPress.com to WordPress

Friday, June 27th, 2008

We have had a lot of positive feedback for our “Redirecting a WordPress.com Blog” document, and a common issue is redirection not working due to the permalinks of the new blog not being set to the style used by WordPress.com.

This was first raised by Eric P and he helped out by writing his own execllent post on redirecting a WordPress.com blog – thanks Eric.

With our PDF document on moving a WordPress.com blog to your own self hosted blog proving popular, we have updated it to include a section on setting the permalinks of your new blog, so that all the necessary information is in the one place.

Thanks again to all the excellent feedback we have received.

How To Display Ads In Your WordPress Sidebar

Tuesday, May 20th, 2008

Update: We have published a WordPress plugin named Simple Image Link which provides a simple way to add an ad on your sidebar.  You may want to check this out.

A lot of new bloggers want to include advertising on their site, but find the idea of adding an advertisement to their sidebar daunting. If your blog runs on WordPress software, it’s a simple matter of using your text widgets to show ads. In this post, we’ll show you how.

There are a number of WordPress themes readily available that support ads, and make managing them relatively easy and pain free (at least that’s what they say). But, no doubt, you have already invested time choosing and customizing/tweaking your current theme.

Rather than change designs now, a simple approach is to use the standard WordPress Text Widget to show image ads. Once you have had experience with displaying ads, you can then decide whether it is worth changing your theme to accommodate the ads.

What is an ad?

When you sign up for ads, typically via an affiliate program, you will be provided with a username and password which will allow you to login and select the ads you wish to run on your blog.

Nearly all affiliate programs will provide the HTML code that you need to add to your blog. All you will need to do is to copy this HTML code to the clipboard and then paste it into a text widget.

If we walk through an example, you’ll see it really is that simple.

For an image based ad, the HTML will be of the form:

<a href=”…”><img src=”…” /></a>

Where:

<a href=”…”>…</a>

Is the link which takes your reader to the Web site of the product/service being advertised.

and <img src=”…” />

Is the reference to the image to be displayed, which is taken from the affiliate program’s Web site. You will not need to upload any images to your blog.

I read Raymond Chen’s blog The Old New Thing. Now Raymond has written a book based on his blog, aptly called The Old New Thing, and has an image of the book on his blog, which is linked the book’s details on Amazon.

I will use this as an example, for which the HTML code is:

<a href=”http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>

NOTE: A few extra spaces have been added to the URL values so that they wrap nicely within this post – just so you know.

The URL has two parts. Everything up to the question mark i.e. http://www.amazon.com/gp/product/0321440307 – is the link to the book’s details on Amazon; everything after the question mark are name/value pairs which contain Raymond’s affiliate information and how to display the information about the book.

The URL to the book’s details is:

http://www.amazon.com/gp/product/0321440307?ie=UTF8& tag=tholneth-20&linkCode=as2&camp=1789&creative=9325& creativeASIN=0321440307

The URL to the image is:

http://images.amazon.com/images/P/ 0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg

How to put an image ad into a text widget

The simplest thing to do is to display one ad per text widget.

Within the Design – Widgets section of your WordPress Dashboard, add a new Text Widget.

  • Do not enter a title for the Text Widget (the single line edit box at the top).
  • Enter the ad’s HTML code into the main edit box of the text widget.

Saving the changes, will show the following within your blog:

To center the image within the text widget

To center the image within the text widget all you need do is, within Design – Theme Editor section of your WordPress Dashboard, add the following to your theme’s style sheet.

.textwidget { text-align: center; }

The text widget will now appear with the image centered.

One disadvantage of this approach is that all text widgets will be centered. So if you are using text widgets to display something other than ads which you do not need centered, then you will need to differentiate text widgets which display ads from those which don’t display ads.

You can do this by enclosing the ad’s HTML within a DIV tag as follows:

<div class=’ad’>…</div>

So the text widget now looks like this:

Within the theme’s style sheet add the following at the end:

.ad { text-align: center; }

How to include two ads per text widget

If you want to display two ads per text widget you will most likely want to center this both horizontally and vertically.

You do this by enclosing the HTML code for the two ads within the text widget as follows:

<table class=’ad’><tr><td>…</td><td>…</td></tr></table>

Replacing … with the HTML for the 2 ads required:

The ads will appear as follows:

You can force the ads to be aligned horizontally and vertically by adding the following to your theme’s style sheet:

.ad { width: 100% }
.ad tr td { text-align: center; vertical-align: middle; }

The ads will be aligned as follows:

Google and Advertising

Google’s PageRank flows from blogs and Web sites via links. This means your PageRank benefits when you receive links from sites with a higher PageRank, and sites you link to will benefit from your PageRank.

As a result, many sneaky webmasters began buying and selling links to manipulate search rankings. In an attempt to curb this practice, Google made the decision that all paid links should be disclosed.

The ads you are running are links, and since the advertisers are paying you to have the link on your blog, you must describe the ad links as “nofollow,” this tells Google to not consider the link for the purposes of calculating its PageRank. If you don’t abide by this rule, your blog will be penalized; it may even be removed from the search results.

Adding “nofollow” to ad links

The easiest way to disclose your link is by adding the text rel=”nofollow” to the link.

So the Amazon link to Raymond Chen’s book on Amazon becomes:

<a rel=”nofollow” href=”http://www.amazon.com/gp/product/0321440307?
ie=UTF8&tag=tholneth-20&linkCode=as2&camp=1789&creative=9325&
creativeASIN=0321440307″><img border=”0″ src=”http://images.amazon.com/images/P/
0321440307.01._AA_SCMZZZZZZZ_V33963393_.jpg” /></a>

You may need to add rel=”nofollow” to any HTML code you receive via affiliate programs.

Wikipedia has more information on nofollow.

Google Acquires Automattic for $4.2 Billion

Monday, March 31st, 2008

Google Inc. (NASDAQ: GOOG) announced today that it has acquired Automattic, a company that offers open source and social media technology to Web publishers.

Eric Schmidt, Google’s Chairman and Chief Executive Officer, said, “We are thrilled that our acquisition of Automattic has closed. With Automattic, Google now has the leading content management system and blogging platform, which will enable us to rapidly bring to market advances in technology and infrastructure that will dramatically improve the effectiveness, measurability and performance of digital media for publishers, while improving the relevance of advertising for users.”

Automattic own WordPress.com (free blogging service), Akismet (anti-spam services), WordPress.org (WordPress development vehicle) and bbPress (WordPress based forum management).

Google will be revolutionizing advertising on personal and business blogs by sharing ad profits with blog authors by offering 25% to bloggers for providing content.

Asked if they had considered Movable Type, Mr. Schmidt replied with a succinct “No.”

Negotiations concluded late Sunday evening (March 30, 2008) at the end of Dallas WordCamp.

As part of the deal, the WordPress source control system will be reviewed and for each line of code added or modified, the responsible developer will receive $100.

Matt Mullenweg will join Google as Vice President of Social Media.

Sergey Brin, Google’s Co-Founder and President, Technology, said they are inspired by the efforts of the Automattic team and the WordPress community, and plan on leveraging WordPress to replace at least three products currently in development: Blogger, Picasa and Google Page Creator. “We backed the wrong horse with Blogger, and quite frankly Page Creator will just never graduate from Google Labs,” he explained.

Larry Page, Google Co-Founder and President, Products went on to comment that by embracing open source software, Google will continue to provide a free software offering to the online community. Asked if he thought that this weakened their position by allowing competitors to start a similar service, Larry responding by saying that the software is only the delivery vehicle. The value added by Google will be the service provided, which includes; data center facilities, (Automattic currently only has three), advertising revenue, support, on-going development within the open source community, and the customizability, through Google owned themes and plug-ins. “The only way we can make true advances in computer technology is by embracing the development efforts of everyone on the planet though open source projects, and not just those at Google.”

The Automattic team will be relocating to Hangar One at Moffett Field, once it has been made fit for occupation, which is estimated to cost in excess of $200 $54.2 million due to PCB contamination. They plan on setting up bungee cords and climbing walls to provide the ultimate development environment.

hangar-one.jpg

Matt said that he asked for a full size replica of the USS Macon, but settled on access to the Google plane on weekends, which has landing rights at Moffett Field instead.

Automattic employees will be given the option to live in San Francisco or any other Silicon Valley city, and Google will pay up to $1 million per Automattic employee for housing. Google will be extending its shuttle service to include a fleet of helicopters, in an attempt to reduce travel time for employees.

Matt.er“, Matt’s next project, which will use the core WordPress engine, merges traditional blogging software with functionality made popular by Facebook, Flickr, Twitter, and YouTube.

Matt.er” will encompass “all things that matter,” explained Matt. “With Google’s ginormous processing power, we will have the resources available to provide the level of functionality we have only previously dreamed about with continuous 24×7 support, and unlimited scalability.”

Sergey Brin added that Google have been looking for the “killer best way to advertise and monetize the social networks” and they have found it in WordPress.

Following the news the WordPress community has started a Save WordPress Web site to ensure that continued access to the latest software is available.

Read the full Google Press release.

About Google Inc.

Google’s innovative search technologies connect millions of people around the world with information every day. Founded in 1998 by Stanford Ph.D. students Larry Page and Sergey Brin, Google today is a top web property in all major global markets. Google’s targeted advertising program provides businesses of all sizes with measurable results, while enhancing the overall web experience for users. Google is headquartered in Silicon Valley with offices throughout the Americas, Europe and Asia. For more information, visit www.google.com.

About Automattic

Automattic is a premier provider of blogging (WordPress) and anti-spam (Akismet) technology and services. The world’s top publishers utilize Automattic’s expertise in content management systems, rich media, video, mobile, search and blogging platforms to help them make the most of the digital medium. From its position at the nerve center of digital distribution, Automattic provides superior insights and insider knowledge to its customers. Learn more at http://automattic.com.