I finally got round to updating to the new Mystique theme (3.1) for my Website.
After a brief read around the web, I was slightly concerned by the number of difficulties folks seem to be having with the transition. I’ll be honest I found it all straight forward, but I did do quite a lot of research before attempting it. I also took a crash course in Child Themes, using the default TwentyEleven WordPress Theme. Learning about Child Themes has been a great help but for this particular walk-through it is not required.
So the only thing that I didn’t get working instantly was the new header / banner system. Like many, I miss the scrolling headers that show our Featured Posts. I also read that many others miss this feature and a lot of folks are having trouble even getting the new system to work at all.
Nothing like a challenge… So I have done it myself. It all works great and not only will it show images that link to posts but your choice of pages too, which is great.
The hardest part really (for me), was creating the header images. To do it right it takes time and I was very keen to get the site running. I will tidy up the actual header images later. There are also other things that can be done with this feature but my desired result was a similar thing to the old system. So that is what this walk-through is all about.
Here’s how it’s done.
First you will need to activate and set up the Mystique Photo Gallery Module. For this walk-through you should use all settings exactly as I have, to avoid confusion. I elected to leave Captions OFF as there seem to be many insurmountable problems with some of my plugins in that area.
The important thing here is the Dimensions. This must match your header image exactly.
Mine Dimensions are set at 960×320.
Make Some Artwork
Now you need to make some headers. These are the banners that will lead to your posts or pages and must be the correct size. So make a blank banner that is exactly 960×320 Pixels and save it. Or you can use mine.
To test everything is working you can skip designing your header/banner and just upload the blank one. Then when that is working go on to make some new banners and add them in the same way.
To design the header quickly, I found that keeping the blank banner open in a photo editor and then simply copying and pasting some of my images on to that, resizing over the blank template image until it looks OK and then saving as a new image, means that the header image always retained the correct dimensions.
Attach and Feature Your Media
OK so the last steps are as follows.
Go to the Media section of your Dashboard.
Click Add New.
Select Files – Upload your banner image(s).
Once the images have finished crunching click Save all changes.
Click the Featured Star so that it turns yellow.
On main screen you will see that the image you just uploaded is marked as (unattached).
You will then be greeted with the Find Posts or Pages dialog.
Simply search for the post or page you want to connect the image banner to. This will be the post or page that will show when anyone clicks on that particular image header.
Your Media section should now look something like this.
That’s it you’re done! Check your site and see how it looks. (Refresh the page obviously).
I hope that this helps some folks and of course as usual, if there are any questions please drop me a line.