MSP
August 4th, 2008, 02:00 PM
http://nettuts.s3.amazonaws.com/028_jQuerySidebar/200x200.png
Apple Startpage (Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the [URL="http://www.apple.com/startpage/"), and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that’s not enough for me, I want to be able to show and hide it at my pleasure as well. I’m gonna show you how!
Preface
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation, there is a tutorial on that here for Windows (http://geeksaresexy.blogspot.com/2006/06/installing-wordpress-locally-under.html), and here for OS X (http://michaeldoig.net/4/installing-mamp-and-wordpress.htm).
http://nettuts.com/wp-content/themes/nettuts/site_images/button_src_nm.jpg (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/sidebarTheme.zip)
http://nettuts.com/wp-content/themes/nettuts/site_images/button_demo_nm.jpg (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/preview/preview.html)
http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/filestructure.png
Files you’ll need.
We need a total of 6 files for this tutorial:
functions.php - This will hold a small line of code registering our sidebar.
index.php - We most definately need this file. Any guesses why?
jQuery - Here’s version 1.2.6 for you (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/jquery-1.2.6.min.js).
jQuery UI (accordion) - We only need the Accordion plugin and the UI core (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/jquery-accordion-1.5.2.min.js), not the whole UI library.
sidebar.js - Contains all the jQuery code for the sidebar.
style.css (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/style.css) - Needed to activate the theme, and contains all CSS.
images folder - I’ll give you a list of images to fill this up with a bit later on, in the CSS part. For now, though, we only need 1 image that is in the HTML - the RSS icon (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/images/rssIcon.gif)! Place it in the folder ‘images’ and let’s get started!
Don’t forget to activeate your Wordpress theme (which should be aptly named sidebarTheme) in Dashboard! Right. To the tutorial! We’re going to start off with the HTML and Wordpress we’ll need. This will include the strcutre we’ll need, Then we’ll fill it up with the Wordpress code that will display posts and register and show our sidebar. It’ll still look icky after this, so we’ll fix it up with some pretty CSS that’ll make it somewhat resemble the apple startpage, and make the sidebar look apple-y too. We do this before the JS so those without JS still see the pretty lookin’ thing. Then, finally, my favourite - the jQuery. We’ll animate it open and closed, and use accordion() and it’s parameters to generate the hover effect.
Step 1 - HTML
Quickly open up functions.php, and put this in:
functions.php is automatically picked up by PHP/Wordpress and executes the functions. This function asks Wordpress to register a new sidebar in the Dashboard to add widgets to it. That’s not all though… We need to put that into our theme! I’ll explain that after the HTML/Wordpress bit next. The array just names the sidebar, so that in Dashboard we can select which sidebar to edit (not really a problem… More of a good habit incase of numerous sidebars).
Copy or type this into your index.html:
<div id="wrapper">
<div id="content"> Top Stories http://myspacepros.com/forum/<?php bloginfo('template_directory'); ?>/images/rssIcon.gif (http://myspacepros.com/forum/<?php bloginfo('rss2_url'); ?>)
<div class="post"> <h3>
Apple Startpage (Apple have always been Gods in terms of the way they present themselves and their products. I just love the sidebar on the [URL="http://www.apple.com/startpage/"), and wanted to use the Accordion plugin in jQuery UI to achieve this! As if that’s not enough for me, I want to be able to show and hide it at my pleasure as well. I’m gonna show you how!
Preface
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to. If you want to run a local server on your computer with a wordpress installation, there is a tutorial on that here for Windows (http://geeksaresexy.blogspot.com/2006/06/installing-wordpress-locally-under.html), and here for OS X (http://michaeldoig.net/4/installing-mamp-and-wordpress.htm).
http://nettuts.com/wp-content/themes/nettuts/site_images/button_src_nm.jpg (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/sidebarTheme.zip)
http://nettuts.com/wp-content/themes/nettuts/site_images/button_demo_nm.jpg (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/preview/preview.html)
http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/filestructure.png
Files you’ll need.
We need a total of 6 files for this tutorial:
functions.php - This will hold a small line of code registering our sidebar.
index.php - We most definately need this file. Any guesses why?
jQuery - Here’s version 1.2.6 for you (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/jquery-1.2.6.min.js).
jQuery UI (accordion) - We only need the Accordion plugin and the UI core (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/jquery-accordion-1.5.2.min.js), not the whole UI library.
sidebar.js - Contains all the jQuery code for the sidebar.
style.css (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/style.css) - Needed to activate the theme, and contains all CSS.
images folder - I’ll give you a list of images to fill this up with a bit later on, in the CSS part. For now, though, we only need 1 image that is in the HTML - the RSS icon (http://nettuts.s3.amazonaws.com/028_jQuerySidebar/res/images/rssIcon.gif)! Place it in the folder ‘images’ and let’s get started!
Don’t forget to activeate your Wordpress theme (which should be aptly named sidebarTheme) in Dashboard! Right. To the tutorial! We’re going to start off with the HTML and Wordpress we’ll need. This will include the strcutre we’ll need, Then we’ll fill it up with the Wordpress code that will display posts and register and show our sidebar. It’ll still look icky after this, so we’ll fix it up with some pretty CSS that’ll make it somewhat resemble the apple startpage, and make the sidebar look apple-y too. We do this before the JS so those without JS still see the pretty lookin’ thing. Then, finally, my favourite - the jQuery. We’ll animate it open and closed, and use accordion() and it’s parameters to generate the hover effect.
Step 1 - HTML
Quickly open up functions.php, and put this in:
functions.php is automatically picked up by PHP/Wordpress and executes the functions. This function asks Wordpress to register a new sidebar in the Dashboard to add widgets to it. That’s not all though… We need to put that into our theme! I’ll explain that after the HTML/Wordpress bit next. The array just names the sidebar, so that in Dashboard we can select which sidebar to edit (not really a problem… More of a good habit incase of numerous sidebars).
Copy or type this into your index.html:
<div id="wrapper">
<div id="content"> Top Stories http://myspacepros.com/forum/<?php bloginfo('template_directory'); ?>/images/rssIcon.gif (http://myspacepros.com/forum/<?php bloginfo('rss2_url'); ?>)
<div class="post"> <h3>