New Responsive Theme

Themes are how WordPress styles your site.  It’s possible to switch to a different theme with minimal effort, and all of your site’s content preserved.

Recently I’ve been developing a new ‘responsive’ theme aimed at research group websites.  The aims of this new design were:

  1. To have a layout which dynamically adapts to different sizes of browsing window.  This means that graphics can be dropped, or change size to fit different kinds of devices.
  2. To have a menu which would also change form at the smallest sizes to accomodate phone based browsers.
  3. To pair back header and other elements to allow content come to the fore.

The theme I’ve been working on derives from the WordPress Twentytwelve theme, with a few functional additions (like hide/reveal for search and a resizing sponsor’s footer area).

You can see some example pages using this responsive theme at the site below.  It’s in a version of the School of Biology livery, but other versions will be available.  To test it on a desktop, visit the site, and then drag your browser to make the window narrower or wider. Watch what happens in the header, and also to page and footer graphics.  There are several pages on the site with slight variations.

If you’d like to find out more, please get in touch.

Truncate a post

You can use ‘more’ to shorten a post at a specific point.  The post will be truncated at the precise point you indicated, and display a’continue reading’ link there, which takes the user to the full post.  To use ‘more’:

While editing an individual post, make a short ‘beginning part’ which you wish to appear – e.g.

An excellent opportunity for people interested in research in this area to gain a deeper understanding.

In the text editing area, place your cursor at the end of this passage, then click the ‘more’ button (circled below)

The click to update the post.

Pressing the more button inserts a special tag which truncates the story listing at the precise point you indicated, and displays a’continue reading’ link there, which takes the user to the full post.


Remove uploaded images

Q. How do you get rid of header images, e.g. that are collected in the “random” section of appearances?

A. If you have uploaded images and you wish to permanently remove them then:

STEP 1: Sign in to the dashboard for your site

STEP 2: click the Media button to open the Media Library

STEP 3: browse through the library to locate the image you wish to remove, mouse over it, and click ‘delete permanently’.  Or, to remove several images at once, click the check box to the left of several images, then select ‘delete permanently’ from the Bulk Actions drop down, and click the Apply button.

This works for uploaded header images as well as for uploaded images used elsewhere.

What is the project about?

Research Groups tend to need sites which, as well as being clean and professional, can be very dynamic, even conversational, and easily updated.  Sometimes groups want to be able to have multiple authors.

We would like to help to these requirements while a maintaining a connection with the main School site, and making content in a form which allows information from research group feeds to give an impression of day-to-day research and outreach cavities right across the School.

The idea of this project is to provide a resource which can be used to host small, dynamic websites and blogs for Research Groups, and create news feeds which can be pushed upstream for consumption by Centres, Schools, and the wider world. Continue reading

Link to a pdf

Linking to a pdf which is on another website is just like making any other link:

  • you edit the page or post where you want to place a link,
  • type and select the text which you want to be the link, click the ‘link’ button, and
  • paste the URL of the pdf into the address window.
  • Check the box to open in a new window if you want to do this, which is usually nice.

To link to a pdf which is on your website, you need to upload the pdf first, by clicking on the ‘Upload/Insert’ button…

  • Once a pdf is in your media library, if you ‘edit’ it you will see that one of its attributes is called ‘File URL’.
  • Select all of that and copy it.
  • Then get back to the page or post and select the text which you want to be the link,
  • click the ‘link’ button, and
  • paste the URL of the pdf into the address window.
  • Check the box to open in a new window if you want to do this.

Here is a YouTube video showing how to do this (apologies for the advertising):

Change the header image for one page/post

If you find you do not have the correct level of access to carry out this task, please contact support for this WordPress.

To change the header image for a single page or post only:

STEP 1: prepare your image.  You will need an image file of at least 1000 pixels width, but it must also be under 1Mb (the maximum upload size).  If you don’t know how to do make an image file like this, perhaps ask a photoshop guru.

STEP 2: edit the page or post for which you want to set this as the header image

STEP 3: look for the ‘Featured Image’ panel near bottom right of the editing page.  Click ‘Set Featured Image’

STEP 4: drag and drop your image file to upload it

STEP 5: after the image uploads, towards the bottom of the image details you should find a link called ‘Use as featured image’  – click this, wait while this task is carried out, then DO NOT insert the image on your page or post, instead simply click the X top right of the window you’ve just used to close it.

STEP 6: click Update (or Publish) to save your page or post.

STEP 7: click to view or preview your page or post to see the result

note: the image size used for header pictures most sites here is 1000 x 187 pixels.  If you want to control precisely what part of a larger image is shown, try cropping your image to this size before uploading.

To remove a ‘featured image’

Edit the page or post where the image appears.  Find the ‘Featured Image’ panel towards the bottom right, and click ‘Remove featured image’.  Alternatively, you can open Media>Library and delete the featured image file.


Hi  –

This began is a support blog for users of the Bio/CompSci WordPress pilot, and has developed into a support site for users of our ‘Synergy’ WordPress Service.

So far there is a wiki with some ‘how to…’ pages, and this blog.

If you think of something that is needed here, please let me know.