Erik’s Blog: Board Shorts and Business Suits

Building Bussiness Systems from the Shores of Waikiki

Entries Comments



Aloha Update Blog Design is Automatic

7 April, 2007 (19:09) | HTML Tips, Starting a Blog Network, Wordpress Tips | By: Erik

OK, the actual design of Aloha Update wasn’t automatic, but the way it’s setup creates quite a few automatic adjustments to the blog.

Wordpress Static Front Page
First off, I’ve decided to use Wordpress’ built in static front page to create a more news like, content in your face. It was tough at first because the addition is rather new to Wordpress and there isn’t much documentation out there.

Aloha Update Screen Shot

If you are trying to add a static front page with a working inner page that shows all posts you need to remember that the page you setup as the “all posts” page needs to be run off the index.php file. If you don’t do this, wordpress pagination, ie /page/2/, will not work. At least it didn’t work for me. The other page, the static front page, can be created from a template page. Check out Aloha Update and our All Posts Page.

Adding a Drop-Down Horizontal Menu to Show Categories
The next sweet thing I did was add a drop-down menu using some javascript and a css/.js method I found over a A List Apart.

Auto Update on Categories Javascript Wordpress Menus

The menu drops down and reveals the sites categories which are organized based on the different islands of Hawaii. The cool thing is, the drop down menu is smart. It is able to recoginze which category you are in, be a single post or a category, or a sub category, of one of the main categories. This way, you don’t have to setup separate headers and nav bars for each category.

It took me a while to get it right and I’ll surely write a little wordpress tutorial for you all soon as in my searching I found a lot of people wanting to have this happen.

Added Tabbed Interactive Boxes
Next I added some tabbed interactive boxes as you can see on the front page where I list the images as well as on the inner pages where I list top things about Aloha Update.

Example of Using tabber.js in wordpress

I found everything I needed over at BarelyFitz Designs. This was probably the easiest to implement out of everything. All you have to do is cut and paste and FTP some files over and you’re done.

UPDATE:
Automatic Picture Formating
The last thing I did which is probably the most automatic thing and took a while is utilize the “read more” tag in wordpress, along with The Excerpt Reloaded plugin.

Basically what I do is within a post I first put a thumbnail image, then I put the more tag, then the noteaser tag, then the large image, and finish it off by adding an excerpt. This allows me to control what image shows up where.

On the front page I have the latest image show up as a sized version of the large image using the php “the_content(’ ‘, ‘TRUE’)”. Next within each sub tab of that same area I show the thumbnail image as a link to the page, then the title (also a link) and finally the excerpt as I wrote it in the post.

Next, in the image category I have it show the thumbnail image, and then when you go to individual pages you will have the full image and that full image will be link to the large image.

I’ll try and do tutorials of all these because I know from searching around that there are others out there that would like this help as well.

Write a comment