WordPress website designed with a little jQuery
I have just made another website using WordPress as a CMS for an international internet service provider.
I worked for quite a while on the design stages with the client. We went through 14 visuals for the home page before I started to work on coding the WordPress theme. Here is one of the last of them:
jQuery and the power of blogging
One of the most exciting parts of the website for me was creating an image slider with jQuery. The client was particularly keen on having clickable sliding panels like the ones that can be seen at BarackObama.com. So how was I going to find out how to do that?
The answer was already on my own website in the shape of a comment by Jaitra Gillespie on a post about JavaScript I’d written a while ago. In it he posted a link to a jQuery coda slider that had a particularly good accompanying tutorial and screencast. This is what I used for the panels beneath the top navigation.
If you click the above image to go to the website you’ll see that not only do the buttons beneath the panels operate them but also the links in the text below.
I’m grateful to both Remy Sharp for the excellent tutorial and Jaitra Gillespie for putting me on to it.
Designing and developing the website with WordPress
After I did the theme and the image slider there were still other things to do.
I used NextGEN gallery for the image gallery. There was a slight conflict between the JavaScript calls in the head for the jQuery coda slider and the NextGEN plugin which caused the Shutter and Thickbox image presentation effect not to work. I moved the (and therefore the NextGEN JavaScript calls) to after the jQuery JavaScript calls in the head and this seemed to get it to work.
I created different categories in the blog section, one being “Latest News”, and had the 10 most recent posts of that category listed in the sidebar. I also added a contact form with Contact Form 7 plugin, a chat room, various static pages and a site-wide social bookmarking and networking link.
What do you think?
Have you ever used WordPress as a CMS to create a site? Have you ever used jQuery to create a coda slider? What do you think of the way I did it?
Related articles
Download free “How to Market Yourself Online” ebook
Discover the secrets behind building a better web presence
Everything you will need to know about self-marketing on the web, including:
- Creating websites
- Setting up WordPress
- Writing blog posts
- Getting links
- Driving traffic to your site
- Using social media
- Offering RSS feeds and subscriptions
- Getting found on Google
Hey nice work Rob, glad to see that my jQuery slider link proved to be of some use.
On a related topic, in recent months I finally got around to putting together a WordPress based portfolio website, with a slider in place to feature content, although in this case I didn’t take my own advice and rather used jcarousellite—mainly because I started development before the jQuery for Designers approach you employed came to my attention:
http://www.specialops.co.nz
Funnily enough, although this is typical with the fast paced world of web development, I probably would use a different slider approach if I was starting over—jQuery Cycle Plugin.
From one designer to another, I would also preface showing my website by saying that it is still in development, and yet to have any of my best work added
Hi, Jaitra, I’ve had a look at your website with the slider and it looks really good. I really thought that slider I used was fantastic though – thanks for the link originally.
And as with everything with WordPress, just after you do something really difficult you realize there’s a plugin that does it for you. WP Featured Content Slider looks pretty good maybe that could be adapted.
But anyway, I look forward to seeing you add to your site. Please pop back here sometime as I regularly give advice about WordPress and web publishing in the blog. All the best!
That slider looks great. When I get the time I’m going to to take a look at some of my websites and see if they can be improved using this type of technology. Thanks very much!
Good idea Fedela, the first few times I tried I couldn’t get it right. Try to search for a jQuery tutorial with a demo, then you can copy the HTML, CSS and the JavaScript and try to edit it to fit your sites. Good luck!
This is what I had been searching for last an hour..I am really surprised how you solved this problem with a very unique technique..thanks a lot for sharing this little secret about WP..