How to create a clickable image for WordPress dot com sidebars

If you look to the right of this post (less easy if you’re on a phone!) you’ll see The Trussell Trust’s logo and an invitation to click it, which will take you to their donation page. That’s what I mean by a ‘clickable image’ in a sidebar. Here’s how to do it.

These instructions may well work for WordPress dot org and other websites too but I’ve never owned a self-hosted one to be able to test it. Some organisations create their own shareable ‘buttons’ which are made from a short piece of code – you insert that bit of code into your website and it pings into a little clickable button when you publish. In the absence of (a) that bit of code and also (b) the ability to tinker with code in a WP dot com blog here’s an alternative.

You will need

  • An image that people will click on.
    If you don’t have one you can create something in PowerPoint or Word and save it as an image. Don’t pinch one off the internet unless it’s an official logo where it’s OK to use for this purpose (also don’t imply that they endorse your website).
  • A web address to link the image to so that when someone clicks it they’ll go there
  • A WordPress dot com blog, and to be logged in (go to wordpress.com to do that)

Instructions

  1. Save your image with a sensible name. You can either upload it in advance to your media page (add /wp-admin/upload.php to the end of your wordpress blog name) or do that during the process
  2. Visit your widgets page (add /wp-admin/widgets.php to the end of your blog name), look among the available widgets for Image (Ctrl+F image will speed that up).
  3. Click on the down-arrow next to it, then choose its location (on my blog it’s Sidebar or nothing) and click Add Widget
  4. Your Image widget will now appear in the editable Sidebar to the right of all the widget options – it’ll be added to the bottom but you can move it by clicking and dragging.
  5. Click on Add Image which will take you to your Media Library. You can drag and drop an image here to upload and use one, or select one that you’ve previously added. You can also edit the image (eg add a caption if you want, try stuff out)
  6. Where it says ‘Link to’ add the web address of the page you want people to go to when they click on the image.
  7. Give it a title (in my own example it says “If you’ve found this useful, please make a donation to a Food Bank – here’s one“), then click save
  8. Visit your blog’s homepage and check it’s as it should be – below are some photos of what things look like as you’re doing this.

 

01 Image widget among other widgets
01 Image widget among other widgets

 

02 Click on down arrow on Image widget to add to sidebar
02 Click on down arrow on Image widget to add to sidebar

 

03 Edit the Image widget in situ
03 Edit the Image widget in the sidebar

 

04 The completed Image widget

05 The finished published Image widget

This post is adapted from a post I wrote on my main blog – I’m gradually transferring the techy posts from there to here.

 

How to create ‘page jumps’ aka bookmarks / anchor tags in HTML on WordPress dot com

Following on from How to create bookmarks / anchor tags on Google Docs documents here’s how to do pretty much the same thing, but in HTML on a WordPress dot com website (or indeed on any website, will work for WordPress dot org sites too).

This post is an aide memoire for me, made public in case anyone else will find it useful. I’m using the ‘old’ editor on WordPress dot com, here are the instructions if you are using the newer blocks version (I don’t like it so haven’t made the jump and so needed to find the HTML way of doing this).

Here’s what the links look like, separate from other content on the HTML view of a page.

Screenshot 2020-04-15 01.28.13

Written below as text, but with spaces to stop it from becoming live code

[2] < a  href = ” # target  ” > link < / a >
[1] < a  name = ” target “> < / a >

The tag in [1] is done first and creates the anchor / target / bookmark at the point where you want to jump.
Then [2] is then created as a link and you need to know the target name before you can do that.

You can create multiple of these jumps / anchors / bookmarks in one post, just need to give each pair a new name each time.

Notes
In [1] the < / a > ending goes right next to the < a name = … > bit, usually this type of HTML goes around something to hyperlink it.
In [2] it’s an HREF, not NAME as in [1] and it needs the #symbol.

Here’s how [2] looks in context on a work-related blog post. Each < T D > denotes data in a table, there are three columns in one row (< T R >) in this example.

And here’s one of the target examples from [1], in context

 

 

 

Add “?random” to a WordPress dot com blog homepage to view random posts

Random post generator

Granted this might not have wide application on this particular blog (where people are generally looking for answers to specific questions) but if you fancy having a wander around this site you can use the Random post generator button in the menu panel on the right. Clicking it takes you to a link formed from the blog’s homepate address with ?random appended to the end – https://howtodotechystuff.wordpress.com/?random

Just add ?random at the end of any WordPress.com blog homepage.

This mildly useful trick came from the WordPress dot com blog https://en.blog.wordpress.com/2007/04/26/get-random/

• Fighting with WordPress admin / editor – a bleat rather than a solution (wp-admin)

For work we have a paid-for work-related WordPress dot com website (not self-hosted WordPress dot org which is a completely different thing). I thought I’d keep a tally of some of the (reasonably recent) changes to the layout that really annoy me about it. Seemingly aesthetics has one out over functionality and it is extremely poor and unintuitive to make changes on the site.

A solution of sorts
The first thing to commit to memory is the suffix /wp-admin (stick it at the end of your homepage address) which will always take you to the main ‘old’ admin bit of your site, from which you should be able to find all the things you want to do.

Editing a sequence of pages, finding the right address
My site has information about a 10-week course. There’s a start page with an overview of the course and 10 sub-pages for each week, to which I add material every week. I’m fairly sure I used to be able to ‘URL hack’ the address to bring up the next page that I wanted to edit.

If you can guess what the link for Week 8 might be you’ve already grasped URL hacking.

https://teachinglondoncomputing.org/gcse-week-5/ https://teachinglondoncomputing.org/gcse-week-6/ https://teachinglondoncomputing.org/gcse-week-7/
what could go here... :)

Things aren’t that simple once you’re stuck in their awful new editing system, the address I’m actually stuck with is

https://wordpress.com/page/teachinglondoncomputing.org/6925

[hopefully this won’t actually work if you click on it as you’re not logged in to my site]

This means I have to prune everything up to teaching… and after .org and re-add /wp-admin to start a new editing instance. It is seemingly impossible to navigate to other pages from within the editing pane. You may be lucky, if you’ve recently been on the /wp-admin page you can use the back button, but invariably this won’t take you to where you want to be.

I can’t understand why the WordPress-using community (particularly those of us who’ve paid for an ad-free service) isn’t up in arms about how poor this interface is. Hear me bleat.

They have improved things a little bit though
One thing they have fixed though is being able to access a new page or post you’ve just created or edited, see the ‘escape’ / page launch button to the right of the updated page, below. For a long time using the View Page (once the page was published) would only give you a sort of pop-up overlay but with no way of getting the actual address to copy. If you click on the new button below you’ll be taken to a copy of the page from which you can collect the URL.

magicbutton

Poor situational awareness for comments
Another difference between the two admin interfaces is shown in the pictures below. In the /wp-admin one (on the left) you can see that there’s a comment waiting for attention, in the newer Admin page (right) that notification is absent.


Hopeless wrangling of pages
Oh my goodness, this is comically bad. In the newer version (lower image) it’s not obvious how you select an author or order by date. It looks like you can’t do a quick edit (change the URL, add a password, edit the categories and tags) either. Awful.

The top images shows all pages that I’ve written, in reverse date order and at the bottom displays an example of a ‘quick edit’.

Screenshot 2017-07-27 13.43.33

Screenshot 2017-07-27 13.44.13

More bleats to come as I remember things about this new interface that annoy me…