Integrate a CSS Drop Down Menu into your Wordpress Theme

May 13th, 2008 daniel Posted in Blog Design, CSS, WordPress 5 Comments »

My last article was about creating a Pure CSS Flyout Menu. In this article I want to teach you how you can integrate that concept into your WordPress Theme so that when ever you create Pages or Sub Pages the menu structure will automatically be created. It really is SIMPLE to do.

If you haven’t read the previous article on How To Create the CSS Flyout Navigation Menu then I suggest you read that one first as I am not going to go over how to set it up from scratch.

Ok, so you have a horizontal navigation structure in your WordPress theme and you want to take advantage of the pages and sub pages facility built into WordPress and create a navigation structure to suite that facilitates the sub pages as well as the main pages in a drop down menu format. Here is how we can achieve that using PURE CSS!


CSS Nav Bar in WordPress

First we need to find where in your WordPress Theme the navigation is located. You will usually find it in the header.php or index.php files depending on your theme. In this example mine was in the header.php file. Look for a line of PHP code that looks something like this:

<?php wp_list_pages('sort_column=menu_order&title_li='); ?>

It may not be exactly the same but it will have wp_list_pages in the line of code. This WordPress Template Tag lists all the WordPress Pages and displays them as links. If you would like to read more about this template tag, you can do so here.

All I did next was copy the CSS Code that I created for the CSS Flyout Menu (see article here.) and paste it at the end of the style.css file of the WordPress Theme and to make it easier on yourself at a later date add some commenting so that you know what that section is all about.

Read the rest of this entry »

AddThis Social Bookmark Button

Web Standards Support And Accessibility in Email

April 17th, 2008 daniel Posted in Blog Design, CSS, Web Design No Comments »

A couple of days ago I wrote an article on Creating a HTML Newsletter using CSS (Cascading Style Sheets) I mentioned that different email clients render CSS differently and trying to make things look the same in all client was just about impossible.

Well The Email Standards Project is trying to do something about this, which is great for us designers and developers.

“Our Mission is to drive the use and support of web standards in email, working with email client developers to ensure that emails render consistently.”

The site is a great resource if you are interested in developing an email marketing campaign for your business or you are a designer trying to design a newsletter. If your business or blog has an email newsletter that goes out on a weekly, fortnightly, or monthly bases then there are golden opportunities for you generate some income by making some ad space available on your newsletter. Using HTML Emails are ideal for this!! Make sure you do not miss the boat and grab a piece of the action.

Jupiter Research projects that e-mail marketing spending will grow from $1.2 billion in 2007 to $2.1 billion in 2012 So getting it right will be very important.

Let’s delve a bit deeper into a few popular email clients to see how they rate. Now what the Email Project does is send an email “Acid Test” similar to that of the Web Standards Group to different clients to test a limited number of CSS properties constructed with proper markup. Read the rest of this entry »

AddThis Social Bookmark Button