0
Wordpress sidebars
Placing content and images in your
Wordpress website sidebars
Arthur’s Guide to
What is a sidebar?
The sidebar is
the bar to the
right, or left of
your site that
appears on
every page of
your site.
Here...
Can you have more than one?
Yes! Here’s a theme from
www.wordpress.org with
two sidebars on the right.
You can also have o...
Adding content
• The easiest way to add content is via widgets
• Sign in to your Wordpress Dashboard
• Look for Appearance...
On the left ringed in blue are all the
widgets.
On the right is your
sidebar with any
widgets that are already
on the side...
To “load” a widget
• Simply drag the widget you want from the left
to the right (hold the left mouse button down
on the wi...
Active immediately
• You don’t “save” the sidebar – widgets are
active immediately you drag them on to the
sidebar.
• TIP:...
Removing widgets
• To remove a widget either drag it off the
sidebar or open it (by clicking on it) and press
the remove l...
Adding new widgets
• You will often find new widgets come with
plugins. E.g. if you use a gallery for pictures on
your sit...
Text Widgets
Great thing about text
widgets?
You can put anything you like in
there and it will appear on your
sidebar! Ye...
First place your text box
• Before you start writing text for your box you
need to drag a text box onto your side bar.
So how to add text?
• Well you can try just normal text. Depending
on how your Wordpress theme is set up, you
may find tha...
Heading code
• <h1>Your Text here</h1>
I often find heading 1 is too large for sidebars but
you can just go down in headin...
The Title box
• Each text widget
has a title box.
• There is no need
to use heading
tags in the title
box. Just use
standa...
Paragraph code?
• You should not need to put in the <p> and
</p> tags at the beginning and end of each
paragraph in a side...
• Don’t forget to tick
the box at the
bottom of the text
widget to
automatically add
paragraphs if you
don’t use <p> tags....
Add an image to a sidebar
Slightly more
involved – pay
attention
To add an image to your sidebar you need to do three
thin...
Add an image to a sidebar cont’d…
2. Load your
image to your
media library.
When you have
loaded it, look for
the File URL...
Add an image to a sidebar cont’d…
3. Finally go to the text widget and type in the
following:
<img
src=“http://www.freshap...
Important: link must be in quotes
NB: Make sure your link has quotes around it. I
often miss the last quote and then thing...
More detail
You can add more of course. This is my full code for my text
widget which includes the exact size of the image...
And this is what that looks like on the
site:
This is the standard
text widget title – no
tags needed.
Here’s the image – ...
Add links to your social media
• You can add links to your social media like this
too
• First find your desired image (the...
So
1. Search for “social media icons”
2. Load your icon to your media library remembering to make a note of the
direct lin...
Have a go!
So don’t be daunted. Have a go.
Images and your own wording in the
sidebars of your site can make a huge
differ...
More content like this?
Head over to
http://www.rosemariegant.com
For lots more tips and hints on Wordpress, email
newslet...
Upcoming SlideShare
Loading in...5
×

All about sidebars in Wordpress

108

Published on

Another of Arthur's Basics: all about sidebars in Wordpress - what are they, how many can you have, how do you put things in them?! This presentation includes how to use widgets and also how to put images from your media library into your sidebar using the text widget. Not only is this great for promoting your products but don't forget you can put your social media buttons in here too in the same way.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
108
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "All about sidebars in Wordpress"

  1. 1. Wordpress sidebars Placing content and images in your Wordpress website sidebars Arthur’s Guide to
  2. 2. What is a sidebar? The sidebar is the bar to the right, or left of your site that appears on every page of your site. Here’s the sidebar on www.rosemariegant.com
  3. 3. Can you have more than one? Yes! Here’s a theme from www.wordpress.org with two sidebars on the right. You can also have one on the right and one on the left. But how do you put content in the sidebars?Two right sidebars on this theme.
  4. 4. Adding content • The easiest way to add content is via widgets • Sign in to your Wordpress Dashboard • Look for Appearance / Widgets • You will be presented with a screen similar to the following slide:
  5. 5. On the left ringed in blue are all the widgets. On the right is your sidebar with any widgets that are already on the sidebar listed.
  6. 6. To “load” a widget • Simply drag the widget you want from the left to the right (hold the left mouse button down on the widget name and move to the right). • Space will open up on the sidebar as you do this so you can drop the widget (let go of the mouse button) • You can also move widgets around by just dragging them up and down in the sidebar.
  7. 7. Active immediately • You don’t “save” the sidebar – widgets are active immediately you drag them on to the sidebar. • TIP: Open up a new browser window or tab so you can move easily between your live site and the dashboard to see what is happening.
  8. 8. Removing widgets • To remove a widget either drag it off the sidebar or open it (by clicking on it) and press the remove link.
  9. 9. Adding new widgets • You will often find new widgets come with plugins. E.g. if you use a gallery for pictures on your site you may find that alongside the gallery plugin you get a widget to place images in your sidebar. • Check Appearance / Widgets after you load a new plugin to see if new widgets are available.
  10. 10. Text Widgets Great thing about text widgets? You can put anything you like in there and it will appear on your sidebar! Yeah! Not so good thing about text widgets? They need to be in code a lot of the time – boo! <p>this</p> <h4>is a bit</h4> odd!
  11. 11. First place your text box • Before you start writing text for your box you need to drag a text box onto your side bar.
  12. 12. So how to add text? • Well you can try just normal text. Depending on how your Wordpress theme is set up, you may find that the sidebars can pick up details from the theme and your text appears just fine. • If not, you will need some code basics. For headings try the following:
  13. 13. Heading code • <h1>Your Text here</h1> I often find heading 1 is too large for sidebars but you can just go down in heading level until you get to the right one • <h2>Your text here</h2> etc. These heading styles are taken from your website style sheet. So if you are using H2 for your blog post titles, your sidebar title will look like that. These are code “tags”
  14. 14. The Title box • Each text widget has a title box. • There is no need to use heading tags in the title box. Just use standard text.
  15. 15. Paragraph code? • You should not need to put in the <p> and </p> tags at the beginning and end of each paragraph in a sidebar widget. • However if things are not lining up then you can always try using them.
  16. 16. • Don’t forget to tick the box at the bottom of the text widget to automatically add paragraphs if you don’t use <p> tags. And remember to press SAVE!
  17. 17. Add an image to a sidebar Slightly more involved – pay attention To add an image to your sidebar you need to do three things: 1. Check what size you need the image to be. (Although you can resize them it is better to start with the right size.) If you are using Chrome or Firefox, right click the mouse and hover over the sidebar to see the size. Or you may have to do some tests. As a rough guide try starting at no wider than 300 pixels.
  18. 18. Add an image to a sidebar cont’d… 2. Load your image to your media library. When you have loaded it, look for the File URL and copy it:
  19. 19. Add an image to a sidebar cont’d… 3. Finally go to the text widget and type in the following: <img src=“http://www.freshapproachweb.co.uk/wp- content/uploads/bluesilverparcel1.jpg” /> Where my link in blue is your link that you copied from your media library for your image.
  20. 20. Important: link must be in quotes NB: Make sure your link has quotes around it. I often miss the last quote and then things don’t work so if your image is not appearing check that carefully: <img src=“http://www.freshapproachweb.co.uk/wp- content/uploads/bluesilverparcel1.jpg” />
  21. 21. More detail You can add more of course. This is my full code for my text widget which includes the exact size of the image, no border, and a link: <img src="http://www.freshapproachweb.co.uk/wp- content/uploads/bluesilverparcel1.jpg" width=150 height=150 align=left style="border-style: none" /> <h5>Ready for a new website? Or need to give your current site some love and attention? </h5> <a href="http://www.freshapproachweb.co.uk/about- fresh/wordpress-and-packages-available-from-fresh- approach">Take a look at our lovely range of Fresh Approach package deals...</a>
  22. 22. And this is what that looks like on the site: This is the standard text widget title – no tags needed. Here’s the image – note “align=left” from the previous page means I get text next to the image. And the text is <h5> And at the bottom is a link – see the bit that starts <a href… on the previous slide
  23. 23. Add links to your social media • You can add links to your social media like this too • First find your desired image (there are plenty of sets freely available on the web) • Insert each image into your media library, just like we did with the previous image • And then link by wrapping the link text around the image (what??? – see next slide…)
  24. 24. So 1. Search for “social media icons” 2. Load your icon to your media library remembering to make a note of the direct link to the image that begins http:// (see slide 18) 3. Drag a text box onto your sidebar 4. Type the code to show the image: <img src=“http://www.rosemariegant.com/wp- content/uploads/twitter.jpg” /> 5. Then add the link like this: <a href="https://www.twitter.com/rosemariegant"><img src=http://rosemariegant.com/wp-content/uploads/twitter.jpg”></a> This is how I get the social media icons on my sidebar.
  25. 25. Have a go! So don’t be daunted. Have a go. Images and your own wording in the sidebars of your site can make a huge difference!
  26. 26. More content like this? Head over to http://www.rosemariegant.com For lots more tips and hints on Wordpress, email newsletters and social media.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×