Adding and Styling Images in WordPress

Displaying images properly and nicely can be the difference of a well looking web page or a shoddy one. Here are some tips in how to upload images.

The first step is to have an image and have set as the right size.  See this post for more info on preparing and saving the right size images. (you can also adjust size of your image – see below instruction – but it’s best to have your image pre-optimised – too big an image can slow down the load time of your page).

Once you have your picture ready to add to your website, follow the below instructions.

1. Put the cursor at the beginning of the paragraph you want to put the picture next to and click on ‘add media’ button.

Choose your picture (either already in the media library or upload a picture from your computer) – the chosen picture will have a border around it and a tick at the top right corner.  Once you have the picture you want to include in your text marked, the picture details will show up on the right.   Here you can add the picture title, caption, alt text, meta description and where the picture should link to.

Then choose where you want the picture to picture to show up – either on the left, right, centre or not aligned.

Then choose where it should be linked – none, media (opens up the picture in a new tab and the original size or custom).

Then if you want the image to be a different size (smaller), use the size dropdown.

Then insert the image.
If you’re not happy in how the image is sitting, you can go back into the image settings by making sure you’re in the visual tab, clicking on the image and hitting the pencil icon that shows up.
Here you can change the alignment settings (and add a caption – see bottom of post).  Set it for what you want and save the post.
Below shows the different alignment settings:
If you would like to add a border around your image, you will have to go to the TEXT tab on the top right and then add the following code to your image source code:

style=”border: 6px solid #B8D989;”

after image class (see below example to get it exact – if it’s not exactly like this it won’t work and might throw an error instead).

the 6px stands for 6 pixels – that is the thickness of the border measured in pixels (a pixel is the smallest addressable element in a picture).   The #B8D989 is the colour code.  To find out colour code you want, you can check out this site. 


Well, enjoy.  Hope this was of some use 🙂

Google Rating
Based on 25 reviews