#27 Topic Image Links

Amy Marsh Is A Fashion Technologist In Training

top bar images


I know I keep going on about it but only 3 days left of #30daysofcoding… I don’t know what I am going to do with all my spare time! Well I will still be working but regular working hour will fall back into place I am sure! Yesterday was far from a normal day coding as I attended a Go Think Big event which Chloé (founder of chloédigital) was speaking at. It was so nice to see how enthusiastic girls around the age of 16 are about technology! The blog will have a full post on the day in a few days so make sure to check it out!


Today I have added a top bar containing images which links to top tags on the blog. A great way for users to access your content is creating topic images that can be used as links to tags or categories that you don’t have in your main navigation. You can place this in your sidebar but we have decided to place them at the top.


Let’s get started!


To start this tutorial I first made these simple images and in photoshop:

fashion technology london

behind chloedigital

coding snippets


I then added these images to the blog by selecting ‘Media’ then ‘Add new’ in the left side bar and adding them.


Next I added this section of code to the header.php file at the beginning of the main tag, you will need to alter this code to suit your sites needs:



You will need to change the href and src in these lines of code:



For the link you need to change this section:


Here I am asking the blog to show post which contain the tag coding snippets. I have done this by using the tag coding snippet’s slug, in order to find what this is, select ‘Posts’ then ‘Tags’ in the left hand sidebar of your WordPress and this page will be displayed, as you can see the slug is listed next to the tag name:


Screen Shot



For the image to be displayed you need to change this section of code:

To get the correct link to display the image, go back onto to ‘Media’, then ‘Library’, and then click on the edit underneath the image you want to display. That will show this page:


Screen Shot


Copy the ‘File URL’, shorten it to this and this is the link you should use:


Next add the styling:



Leave a comment with any questions or to submit your progress and make sure to check out the blog tomorrow and see what has changed!


Stay Updated

If you enjoyed this post, subscribe to the Fashion Technologist for updates

What are you interested in?

Discover more:
email course
(blog)Random Banner Ad Featured Image
Screen Shot 2014-06-10 at 17.43.10
two ways to make your site more secure
(feat) theFEED Profiles- RooftopAntics.com
How to change the default media linking option in wordpress
Why I do not like blog posts being By Admin
how to create a wordpress plugin

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">