WordPress Help and Support » Design

Adding an image to your WordPress post or page

Babs — Thu, 22 Apr 2010 08:00:59 +0000

Adding an image can complement your WordPress blog post or page, the visual interest seems to hold a reader’s attention, generally. Solid blocks of text can get a bit much, including an image or two can break that up nicely and make it easier to read.

This post is a basic “how to add an image to your WordPress post or page”.

If your image is on your computer you need to upload it, and WordPress handles this very well.

When you are creating your post or page, you will see Upload/Insert above your content area.

Clicking into that icon brings you to:

and it’s here that you choose your image file. You can also see options that will enable you to insert an image from an URL – have a play with that if you know of an online image that you want to use (and are allowed to use, of course). Back to uploading your image file from your computer – click on Choose File and you will then be able to select the file you want to upload. When chosen, click the Upload button and this brings you to the following:

Now you can add some alt-text (for accessibility purposes), a caption if you want one, a description, and in the Link URL you can enter a link that clicking on the image will take you to, if useful. Select the alignment (left and right will allow text to the side of the image), and a size if you do not want to use the Full size of the image. And then you do need to remember to click Insert into Post (I forgot this several times when I started out with WordPress).

And your image then neatly appears in your post or page.

You can go back and edit any of the above – within your post/page edit mode, click once on the image and you will see two icons – one to edit and one to delete. Go into the Edit icon and you will have the option for some simple Edit Image options, or the Advanced Settings. Have a play to really get to grips with it all.

And add some visual interest to your blog posts and/or WordPress pages.

Adding a link and/or image to your WordPress sidebar

Adding a link and/or image to your WordPress sidebar

Babs — Wed, 14 Apr 2010 16:00:00 +0000

This is a more specific post than the earlier tutorial on the “mighty text box” which outlined what we could include in the Text box widget.

Adding just a link: Go to Appearance, Widgets and drag a fresh text box into your sidebar. Within that put your link (I usually copy and paste, to be sure it’s right). Now you need to “tell” WordPress that it is a link by placing some html code around the link; the code you need is Text for your link

The a tells WordPress and the Internet that a link follows, and the href says where the link is, and you do need to be sure to “close” your link with the

So, for a link to the Blogmistress free healthcheck the code would be:

Book your free WordPress healthcheck here

Now if you want to use an image instead or as well as your link, you first need to have your image available online. You can either upload using the notes in the earlier post on using images within WordPress, or use FTP (for which I am not going to do a tutorial just now – if you know it you’ll know what to do). What you need is the image address/url (get in touch if you do want some help with this), and you use that instead of the link text – but with a little code so that the the web knows it’s an image – the

” alt=”wordpress healthcheck” />

Of course you may want to link to an image that is already online, such as something within wikipedia – do be sure that you are allowed to use any images from elsewhere, and you simply use that image’s url instead of the one you uploaded.

And it is possible to add a link and/or image to your WordPress sidebar without using a widget, but that means rolling up our sleeves and coding into the theme’s files – we’ll cover that later.

Design rules apply to WordPress too

Babs — Sun, 28 Mar 2010 10:00:36 +0000

A forthcoming post from Sarah had me rummaging around for something I wrote many moons ago on the basics to consider for a website. So during this Sunday of housekeeping, I thought I’d review that document and see how those rules apply to a WordPress blog/website.

Now of course your overall design wants to reflect your company’s professional image – and WordPress really is useful for that. If your website looks unprofessional, you will be perceived as being unprofessional – it is as simple as that. We are all expected to have a presence on the Internet these days, and it can be hugely useful for your marketing, but be sure that it looks good, that it does not look as though your nephew has been practicing his web design as a “favour” for you (unless of course he’s a professional!).

No Animation! Trust me – no scrolling text, flipping envelopes (fewer of these nowadays, thank goodness, but they are still about), animated images – anything that does not have a purpose or that distracts your visitor from the information they want. Very rarely is this going to enhance your visitor’s opinion of your website. You have your visitors’ attention for just 1/20th of a second – within that tiny timeframe they know whether they like your website or not. Mind you, if your page has taken longer than a few seconds to load, they’ll probably have lost interest anyway, clicked the “back” button and be away to the next website.

No clutter either – don’t be afraid of space – this makes it easier to read the content, which is what people look at even before the images. And italics – again – please don’t. It’s much easier to read non-italicised text on-screen. Indent your text or use some other way to distinguish it from the main text.

Be gentle with your visitors’ eyes – pink on orange will have them hitting the “back” button before they even (try to) read a word. Textured backgrounds, pale text on light backgrounds – anything that makes it less easy on your visitors’ eyes will tell them that you’ve not thought about making their visit a positive one. There’s a really good reason why black on white is the most often used format – it works, it’s easy to read. Your visitors do not want to be wowed; they want to find what they’re looking for.

And while we’re at it – make the text a sensible size – too small is irritating – if you want tiny text at least make it possible for the visitor to increase the font size (basic accessibility). You do know that we can do that – in your browser hold down your Ctrl and + keys to see an increase in the text size (or not) – good to see what happens to your design when you do that, too.

There you go – a few of the old design dos and don’t that still apply. Much of this is taken care of with WordPress, but there are plenty of themes available that break every rule above! Think of the websites that really hold your attention, that have you wanting to do more, read more, get in touch – make it simple for that to happen on yours.

Where did you get that theme?

Babs — Wed, 17 Mar 2010 11:00:14 +0000

For many of us, choosing a theme for our WordPress can be satisfied from the WordPress Free Themes Directory – you can search through these easily and upload without having to move from the comfort of your Dashboard (Appearance, Add New Themes). And I would suggest that choosing from themes already approved by WordPress themselves is likely to be good security practice.

Now some of us want more – functionality, choice, support – and for this we are happy to pay for a Premium Theme – those tried and tested by us are listed below, together with others that we consider trustworthy.

Or you might want a bespoke theme created for you – something simple that can be created with Artisteer (which was used for this blog and a few others we’ve worked with), or something more complex that requires some geek attention – again, a solution you can feel secure with (if you trust your geek!).

And then you have the many free WordPress theme directories from which to choose – and this is where you must be more careful – and not only with your time (it’s too easy to spend hours searching for just the right theme!). A quick Google for “Free WordPress Themes” will offer you hundreds of directories to while away more time than perhaps is necessary or welcome and before you download and use a theme, however lovely, from such a site, considering the following:

Take a look at the bottom of the page – in the theme’s footer area. Is there a link that perhaps you’d rather not have associated with your business? This is very common and many an unsuspecting blog owners ends up with a link to “Online Bingo” or worse (much worse”).
Are you happy to look through the source files for any unexpected and hidden links that might
detract from your blog?
How do you feel about the site on which you’ve found this lovely theme? Are you met with pop-ups or anything that makes you at all uncomfortable? Avoid such, I suggest!
Keep an eye on the theme creator’s blog for any upgrades available, etc.
Take a look through the WordPress forum for any issues with that theme.

I think you get the idea, and there are plenty of free WordPress themes that will suit you just fine, but if you want to err on the side of caution, stick with one of the first 3 options. And if you are ever unsure, we’re here to guide and help you.

Some premium WordPress themes that we work with (these are non-affiliate links):

Setting a different home page in WordPress

Does my blog look good in this?

Babs — Wed, 24 Feb 2010 08:45:52 +0000

How does your WordPress website or blog look on your visitor’s screen? Do you know how your site looks on Internet Explorer, Firefox, Chrome, on a PC or a Mac – it is something worth checking.

Cross-browser compatibility has always been an important consideration and until we are all using the same browser on the same machine, it always will be – though things do seem to be settling down more now and we have fewer headaches than in the days of Netscape vs Explorer, for instance. Good web designers know to check that their work looks good across all browsers as standard, but as more of you are enabled to create your own websites, you also want to know how to check your cross-browser compatibility.

Thankfully there are tools available to us – of course there are! I tested the Blogmistress site at BrowserShots and these are some of the results:

Try it out on your website, just to be sure… (and don’t panic if things don’t look as they should – that happens and may only need a small code change to have you cross-browser compatible).

Another option, if you have frequent tests to carry out, might be CrossBrowserTesting – you can run their free trial before committing to that level of service.

Now while you’re about it, you’d may as well consider your site for usability and accessibility – both are as important as ever and we can become complacent about such, especially those of us using WordPress and relying on the system to comply with certain standards.

Usability is something that you really want real people (as opposed to pretend people!) test out for you. If you want us to cast an eye over your site, drop an email to hello@blogmistress.com and we’ll do that for you – we’ve considered usability to be an essential consideration for every website we’ve worked with. If you want to know more about this, I’d personally recommend the book Don’t Make Me Think!: A Common Sense Approach to Web Usability by Steve Krug – still the most easy to read, common-sense book for everyone with a website of any kind.

Accessibility may not be as hot a topic as it was a few years ago, but is still essential, and really warrants a whole blog post of its own (as indeed does Usability). To get an idea about it all though, you’d do well to visit the RNIB’s guidelines – they know what their members need and want!

There are tools available at W3C’s Web Accessibility Initiative, but that can become overwhelming and automated tools do have to be considered from a human perspective too.

And you have a useful post tomorrow from Sarah on accessibility options that you can implement with relative ease – so pop back and take a look at that, or subscribe so you don’t miss it!

Any questions or comments, please add them here, or send in an email to hello@blogmistress.com

No related posts.