Go ahead and paste the following HTML code in your HTML file:

        	<ul id="nav">
            	<li><a href="#">Home</a></li>
                <li><a href="#">Apple News</a>
                	<ul>
                    	<li><a href="#">iPhone</a></li>
                        <li><a href="#">iMac</a></li>
                        <li><a href="#">Apple</a></li>
                    </ul>
                </li>
                <li><a href="#">iPhone App Reviews</a>
                	<ul>
                    	<li><a href="#">Echofon</a></li>
                        <li><a href="#">Shazam</a></li>
                        <li><a href="#">Urban Spoon</a></li>
                    </ul>
                </li>
                </ul>

Style the navigation and dropdown with CSS

The following CSS code, will ensure that the dropdown looks and works properly. Also we will add a pointer arrow image and do some CSS tricks, so we can have the arrow centered at the top of the dropdown.

/*main nav*/
#nav li {position:relative; float: left}
	#nav a {float:left; margin: 0 30px 0 0; padding: 5px 0 15px; font-size:1.4em; color: #9F8F79; text-decoration:none}
		#nav a:hover {color: #f2f2f2}
	/*dropdown*/
	ul#nav ul {display:none; position:absolute; top:36px; left: 0; padding: 8px 0 0; background: #e3e3e3 url(i/pointer-drop-down.png) no-repeat 50% 0; border-bottom: 1px solid #000; z-index:100;}
		ul#nav ul li {float: none; display: block; background: #5b544a; border-bottom: 1px solid #6e6659; border-right: 1px solid #000; border-left: 1px solid #000;}
		ul#nav ul li:first-child {border-top: 1px solid #000} /*dropdown*/
		ul#nav ul li:last-child {padding-bottom: 35px} 
			ul#nav ul li a {float: none; display:block; width: 148px; margin:0; padding: 5px 20px; background: #5b544a}
			/*the magic*/
			ul#nav li:hover ul, ul#nav li:focus ul {display: block}

The Jquery centers what CSS cannot

First we need to include the Jquery library. My preferred method, is by using the Google CDN, as it loads faster that way. At the top of your HTML file, within the head tag, add the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

The very next thing we need to add will be our code:

<script type="text/javascript">
	$(document).ready(function() {
		$("ul#nav li").mouseover(function() {
			var the_width = $(this).find("a").width();
			var child_width = $(this).find("ul").width();
			var width = parseInt((child_width - the_width)/2);
			$(this).find("ul").css('left', -width);
		});
	});
</script>

Browser support

It works well in all of the major browsers, including IE7+. In IE6 the drop-down does not show up but there are fixes for that and the dropdown will still show up centered, after we apply the fix.

Your opinion

Let me know how it works for you or if you have any questions regarding the method.

Related posts:

1. Better techniques for writing CSS and markup
2. Float images in WordPress properly
3. How To Display Dynamic Menu Pages In WordPress

Down below, there is an example with how the final result will look. You can see how the logo images wrap around text nicely.

Include WordPress default styles and clear the float

When you develop custom themes for WordPress, it is very likely you will replace the whole code from style.css, which is a good practice actually.

However, there are some styles that are recommended to be preserved, so we can float elements. The only styles we need to add to our style.css file, are:

.alignleft,
img.alignleft {
	display: inline;
	float: left;
  margin-right: 1.5em;
}
.alignright,
img.alignright {
	display: inline;
	float: right;
  margin-left: 1.5em;
}
.aligncenter,
img.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
p {
     clear: both;
}

Notice that last line clear: both, clears the floated image inside the paragraph and prevents it to wrap around a previous element in page.

Wrap an image left in WordPress editor

Now, when we edit a page or a post:

• we need to insert the image
• select it
• click the align left button and make sure it will show up on a single line (that means the image and the text, are located in the same paragraph so they can wrap around). When you click align left button, a class .aligncenter is added automatically.

In this example, I floated images left, but they can be floated right as well, using the same method, by clicking the align right button instead.

At this point, I assume you already know how to upload and include images in your WordPress editor.

Float multiple images left

Now we can float more images to the left of the text, using the method described above. They will show up nice within the main website, since we have have specified clear: both for the paragraphs.

WordPress TINYMCE editor, uses other stylesheet than the one you use for the main website and it doesn’t know, that floats are supposed to be cleared within paragraphs.

Customize the TinyMCE WordPress editor

While this step is optional, I find it is very easy for the clients to get a feel of how content looks like before publishing, they won’t get confused and will have great experience while editing their websites.

TinyMCE WordPress editor – the polished final look

Code for WordPress editor styling

First we need to create a CSS file in our theme file. I am gonna create a folder called css, a file name editor-style.css and add the following code in it:

Basic CSS code

/*image float CSS clear*/
.mceContentBody p {clear:both; margin: 0 20px 25px 0}
	.mceContentBody p img {margin: 0 20px 25px 0}

Enhanced CSS code

This code is optional only, and the code from above is enough to show up floats properly, but it will look great if we customize the text color for headings, normal text and basic links; the width of the content will match the one of the website as well.

/*general CSS text and links styles for Wordpress editor*/
.mceContentBody { color: #333; font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif !important; font-size: 12px; line-height: 18px; width: 590px; }
.mceContentBody h1, .mceContentBody h3, .mceContentBody h4, .mceContentBody h5, .mceContentBody h6 {color: #1f201c}
.mceContentBody h2 {color: #f78a20}
	.mceContentBody h2, .mceContentBody h4 {font-style: italic}
body.mceContentBody a { background: none; color: #f78a20 !important; text-decoration: underline; }
 
/*image float CSS clear*/
.mceContentBody p {clear:both; margin: 0 20px 25px 0}
	.mceContentBody p img {margin: 0 20px 25px 0}

Load our custom CSS editor file

[Update: starting with wordpress 3.0 editor-style.css is part of theme and is not necessary to load it using the code from below (make sure you enable the editor-style.css by adding add_editor_style(); in functions.php).

However, the following snippet is useful if you still use an older version of WordPress.]

In order to make it look that way, we need to add this snippet to functions.php file, located in our theme folder. Don’t forget to edit the link inside to match the location of our custom editor CSS file.

//CUSTOM WORDPRESS EDITOR STYLE
function custom_editor_style( $url ) {
  if ( !empty($url) )
    $url .= ',';
  // Edit path to match the custom style location. Currently the file is located in active theme, in a folder called css.
  $url .= trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor-style.css';
  return $url;  
} 
  add_filter( 'mce_css', 'custom_editor_style' );
// END CUSTOM WORDPRESS EDITOR STYLE

Thanks to Matty for the code snippet. You can learn more about this method on his website.

Your feedback

Please let me know how everything works for you, using the comment form below.

Related posts:

1. How to load Javascript on specific pages in WordPress
2. Center a DropDown Menu Using CSS and JQUERY
3. Better techniques for writing CSS and markup

Write the CSS before the HTML markup

When I first started, I was building the HTML markup, thereafter writing the CSS for it, having to go back and forth several times between the CSS and HTML.

Now, I found out I am more efficient and much faster if I specify the CSS first. After you specify the id, classes and their attributes in the stylesheet file, it is easier to go and add the HTML.

The advantage is that you will have specified the appearance of the elements in page. If you choose to write the HTML structure and move on to CSS, you might figure out that some HTML need to be re-organized to accommodate the CSS styles, slowing you down. As analogy, you first need to specify the house plan before you can start the foundation and building the house.

CSS Reset before anything else

The browsers are styling differently the elements within a website, so if you want to save time and headaches in future, the first thing to do, is add a master CSS reset.

Erick Meyer has the most popular CSS reset.

However, that is too long and general for my projects and I came up with a shorter and efficient one which suites better for the websites I work on:

/* RESET */
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0px; padding: 0px; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,th { font-weight: normal; font-style: normal; }
ul,ol,li { list-style: none; }
fieldset,img { border: none; }
caption,th { text-align: left; }
table { border-collapse: collapse; border-spacing: 0; }

Floats clearfix

There are two layout coding techniques which are mostly used for fixed-width layouts: floats and absolute positioning.

At the present time, the floating technique is the best method of building expanding websites, where the height adjust dynamic based on content.

Absolute positioning alone is still useful and sometimes critical at certain times, for arranging elements (e.g elements position in a header with specific height are easier to be specified using absolute positioning than floating).

Clearfix float code

As you may already have know, the floats needs to be cleared, usually inserting the following code after a floated element, which will stop the others elements wrap it.:

<br clear="both">

A big time and markup saver is the clearfix method, the only thing to do is to specify the following code in your CSS file:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
 
.clearfix {display: inline-block;}
 
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Than, all of the parent elements that contain at least 2 floating elements need to get a class=”clearfix”.

You can find out more at this article: How To Clear Floats Without Structural Markup.

IE 6 support not that hard

Using the method specified above the bugs for IE6 are minimal and easy to fix.

I have encountered consistently 2 bugs in IE6 and those are:

• Double margin float bug which can be fixed by specifying display: inline for the affected float.
• IE6 duplicate characters bug which shows up when you have html comments between the floats. Weird enough, I decided I will not comment my HTML anymore, that way I can minimize the file size. Instead of commenting the HTML I found out that indentation is more important. However, I still comment the CSS file where we usually spend at least 80% of the time when building a website.

Single line / hybrid CSS formatting rules

There are multiple ways of formatting the CSS: multi-line, single line, hybrid etc.

While some coders have their own preference, in my opinion, the single line formatting is the best from all:

• File size is reduced, the website will load faster;
• The code is easier to read and spot. Imagine how hard is to find elements in a multi-line CSS file and how much scrolling needs to be done;

I still have some parts of my code (around 10%) formatted as multi-line that’s why I call it hybrid.

Other CSS tips and tricks

Use of starter files: CSS, HTML

If you are building websites for some time now, I guess you already found out that you need to repeat a lot of code. To avoid that for future projects, a great practice is creation of basic starter files as: index.html, style.css, a folder for images called i by the way, a folder for scripts, a robots.txt file and maybe a .htaccess file.

Inside the CSS file you should have the clearfix and reset code portions we have mentioned above, plus some basic styling for layout elements such header, container, nav, sidebar, footer and other elements you are using often.

One single CSS file – no @import

I like to organize my CSS in one single file, that way it is much more easier to maintain, instead of searching in few other different files.

In case you are the one who likes to have the CSS organized in more files, you should also know that @import is not recommended and the use of style tag within head tags, is better.

Images folder name should be short

The folder where I store my images has a really short name, actually one letter: i. That way, whenever I have to call images in my CSS on the mark-up will take me lesser time and will result in reduced code.

Unnecessary CSS selectors

The golden rule is: never be too specific when you don’t have to be.

For example, when you are working the navigation there is no reason to specify the styles for the links like following: ul#nav li a, instead #nav a is better practice. It will also take lesser code to specify the styles for nested elements, such as drop-downs and easier to mange the code.

Unordered lists are better than div block in certain cases

While the div tags are used mainly for organizing the markup, ul will keep the mark-up shorter for certain elements: navigations, footer elements etc. Using unordered lists is not only advised, but is a technique used by all experienced coders.

Your opinion

Please comment below what other tricks you are using when coding websites, for maximizing productivity and quality.

Related posts:

1. Float images in WordPress properly
2. Center a DropDown Menu Using CSS and JQUERY
3. Include different sidebar in WordPress, depending on the section you are

In the images from below, you can see how the subpages expand only for the active parent page.

The breadcrumb plugin

First thing to do is to download the modified fold list page plugin, unzip and just copy in the WordPress plugins folder, than activate in the back-end.

The plugin itself contains some modifications in order to achieve the desired functionality so you might want to download this version and never upgrade (the development has been discontinued in 2008 anyways).

The code to call in your template files

You can integrate it in a sidebar or anywhere you want to have it displayed.

<?php $g_page_id = $wp_query->get_queried_object_id();
	$ancestorIDs = _wswwpx_page_get_ancestor_ids($g_page_id); { ?><div class="sublinks"><ul>
	<?php wswwpx_fold_page_list ('depth=2&sort_column=menu_order&title_li=&child of='.$ancestorIDs[1]); ?></ul></div><?php }
?>

The CSS

Please read the comments that come along with the code for a better understanding:

#sidebar_subpage ul ul {margin:2px 0 2px 20px}	/*this will create some left space for the subpages links*/	
		#sidebar_subpage a {text-decoration:none; color:#000} /*default link style*/		 
		#sidebar_subpage a:hover, #sidebar_subpage a:focus, #sidebar_subpage li.current_page_item a, #sidebar_subpage li.current_page_ancestor a {color:#00aef0;} /*hover and current page link style*/
 
			/*color fix for subpages - will fix CSS inheritance colors for the subpages links*/
			#sidebar_subpage li.page_item li.page_item a {color: #000}			
			#sidebar_subpage li.page_item li.page_item a:hover, #sidebar_subpage li.page_item li.page_item a:focus, #sidebar_subpage li.page_item li.current_page_item a	{color:#00aef0}

WordPress version support

At this moment the page list folder plugin, which makes this functionality possible, has been tested with WordPress 2.7.1 up to WordPress 2.9.2 and it works.

It is very likely to work with the WordPress 3.0 and other future versions to come, but not guaranteed.

Questions?

If you have any questions, please use the comment form below.

Also don’t forget to check the article: how to display parent page title in wordpress.

Related posts:

1. How To Display Parent Page Title in WordPress
2. BBpress Front Page Text Plugin
3. How To Display Dynamic Menu Pages In WordPress

The requests mentioned above, can be implemented with a smart if /else statement solution:

<!--sidebar conditional navigation sidebar-->
        <?php if (is_page_template('page-services.php') ) { ?>
                <!--than include the services specific navigation-->
                <?php include("side-nav-services.php") ;?>
			<?php } elseif ( is_home(7) || is_single() || is_category() ) { ?>
                <!--if not, include the blog navigation for blog section-->
                <?php include("side-nav-blog.php") ;?>
			<?php }
        	else { ?>
            	<!--if not anything from above, include the generic page navigation for the rest of the pages-->
                <?php include("side-nav-pages.php") ;?>            
            <?php } ?>

Code explained:

First statement

The first piece of code tells us if we have a page template page-services.php, than it should include the navigation for that part. The side-nav-services.php contains:

   <div id="side-nav" class="side-nav-services">
   		<ul>
        	<h3>Services</h3>
                        <!--the code from below will display sub-pages of services page with the id of 4-->
			<?php wp_list_pages('child_of=4&title_li&depth=1'); ?>
    	</ul>
 
        <ul>
                <!--this code will display the popular links, manageable from wordpress backend-->
        	<?php get_links(); ?>
        </ul>
    </div>

Second statement

The second portion of code, includes instead, the blog links from the file side-nav-blog.php for blog index, categories and single page. Here, the sidebar contains:

   <div id="side-nav" class="side-nav-blog">
      		<ul><h3>Latest Posts</h3>
        	<li><a href="<?php bloginfo('url') ;?>/health-wisdom">Health Wisdom Blog</a>
				<ul>
					<?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?>
                </ul>           
            </li>
    	</ul>
   		<ul><h3>Categories</h3>
        	<li><a href="<?php bloginfo('url') ;?>/health-wisdom">Health Wisdom Blog</a>
				<ul>
					<?php wp_list_categories('&title_li='); ?>
                </ul>           
            </li>
    	</ul>
		<?php if ( function_exists('wp_tag_cloud') ) : ?>
 
 
        <ul><h3>Popular Tags</h3>
            <?php wp_tag_cloud('smallest=8&largest=22'); ?>
        </ul>
        <?php endif; ?> 
    </div>

Third statement

The last logic, tells that if there is no blog or services section it should load the normal navigation. side-nav-pages.php contains:

   <div id="side-nav" class="side-nav-pages">
        <ul>
        	<?php get_links(); ?>
        </ul>
    </div>

Conclusion

While the same result could have been accomplished with other method, by creating page templates for each sidebar, that method is more clumsy and the site harder to maintain.

If / else statements, can be of tremendous help in accomplishing tasks with WordPress (or other CMS applications) and can be used for displaying categories in a certain way or output code only in desired areas of the website.

This programming logic, also allows the developer code faster and the websites will be easier to maintain.

Related posts:

1. 8 Recommended Useful Plugins for WordPress
2. How to load Javascript on specific pages in WordPress
3. Float images in WordPress properly

W3schools has published a research page with Operating system statistics and Windows family counts 90% of the most used operating systems.

As some of you may know, there are some CSS bugs that can be encountered only using a specific OS, even if you use the same browser.

I remember while I was working on a project and I had to setup some images as background, it showed great using Firefox on my Windows but I’ve been informed that on Firefox for Mac OS X, it was displayed 5px down, enough to ruin the design. If I would have used the MAC I would have tried to make it look right there and possibly ignored the rest of 90% of users, as I couldn’t know about the problem.

Using Windows 7, you can run native IE6 and IE7

Maybe the Windows Vista was a bad OS but those of you who have installed Windows 7, I am sure you were surprised in a good way. At least I am.

While there are some tools for testing websites in IE using IE Tester or spoon.net/browsers, there are differences and the big minus is that you cannot install the IE developer toolbar, as you can do on a native IE6 or IE7 (the toolbar is not Firebug, but helps!).

If you have Windows 7, you can run native IE6 and IE7 using XP Mode feature. I found an article that shows you how to install a virtual machine and setup XP Mode.

Viruses are not detected on Macs – security issue

Now you may think, it is very good to stay away from viruses and it is for the regular users. However, we developers, are responsible and need to identify potential threats, while having a mac you won’t be aware of those and the rest of 90% of users might get infected.

I got a job recently, where I had to improve a Joomla website. While the website had no issues, when I tried to log-in in administrator area, my local Bitdefender antivirus, blocked some Trojans.

The Mac users might still have a solution. Chrome seems to identify better infected websites, and won’t let you access it, so you will know at least that there is a problem.

However, if you try to clean up an infected website, you still need an antivirus to point to the infected files but Antiviruses for Macs detects threats for Macs, not for PC and so, not for majority of users.

Buying a Windows system is cheaper

Productivity is important, that’s why each 3 years or so, I personally, need to change my laptop with a more advanced one, as technology is moving faster and the software demands more resources.

Even if you use a Mac, you still need to upgrade it after a period and they don’t come cheap.

Conclusion:

While the Windows is more vulnerable to viruses, buggier, not that stable as a Mac, I believe the points discussed above, should make you think about making the switch or decide a platform, as a web developer.

Let me know what’s you opinion regarding building websites on Mac OS X vs Windows.

Related posts:

1. Mistakes print/graphic designers do when design websites

You can download the version 1.0 of the plugin here.

As you may know, the current version of BBpress does not include the WordPress nice functions of formatting text but this release also includes a WYSIWYG editor so you can format the text using headings, paragraphs, etc.

Installation

Unzip the the file and add within your bb-plugins folder than go in the bb-admin control panel and activate the plugin.

The Front Page Text tab should appear after the Settings tab. Go inside and add the desired text.

The only thing left to do is to call that text, within your front-page.php in your active theme folder by using the tag:

<?php echo bb_get_option('homepage_text'); ?>

The plug-in is built in mind for home page, but you can add the tag anywhere in your template files, for example the registration page.

Compatibility

The plug-in has been tested with the BBpress 0.9 and 1.02 versions and it is built to work with further BBpress releases, unless some radical modifications are added on the way.

Notes

The plug-in is free to use and modify. Enjoy!

Let me know if you have any feedback.

Related posts:

1. Show subpages only for the current parent page in WordPress
2. 8 Recommended Useful Plugins for WordPress
3. How To Display Parent Page Title in WordPress

In this post, I want to show you how to include JavaScript, just on specific pages or areas in WordPress. First thing you have to do, is to add the JavaScript you want to load in your theme folder of WordPress. To keep everything organized, create a folder called “Scripts” or “Js”.

Than, open you header.php file from you active theme and instead calling the link as you normally do, paste the following code within the head tag:

The Code

<?php if (is_page('home') ) { ?>
<!--home page custom JS-->
    <script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>
<?php } ?>

Code explained

if (is_page('home')

That means that if you have permalinks active and a page called home, the JavaScript will load just on that page.

<!--home page custom JS-->

This is a simple HTML comment to keep organized or to make the life easier to other developers who might have to work with your code.

<script type='text/javascript' src="<?php bloginfo('template_directory'); ?>/Scripts/customJS.js"></script>

Basically, this is the link to our JavaScript file that could stay by itself just that will be loaded on all of the pages.

Variations

Additionally, you can have more pages like that inclusive a page id (please replace just this line in the code from above):

if (is_page('home') || is_page('contact') || is_page('45')

Or sections as:

if (is_single()

For more options please refer to WordPress Conditional Tags

Remove WordPress plugins JavaScript

This is a tricky one. The websites which use WordPress as CMS, need several plug-ins to achieve the desired functionality. Many of those plug-ins insert JavaScript within the head tag using the wp_head() hook.

What happens if we want to call that JavaScript code of specific plugins, just on certain pages? For example, I have a contact form and I want to load its JavaScript only on contact page or I have a video page and the plugin that embeds the videos should be active only on that page.

WordPress offer us a way to disable JavaScript, also called deregister JavaScript, unfortunately not all of the plug-ins are written properly, so with some of them it will not be possible.

Code needed

Using following code in our functions.php file, will disable a plug-in’s JavaScript except the page you specify:

add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
 
function my_deregister_javascript() {
   if ( !is_page('Contact') ) {
	wp_deregister_script( 'contact-form-7' );
     }
}

The only plug-ins you can target, are those which use wp_enqueue_script and you need to find the handle for that specific plugin by browsing it’s main .php file.

Justin Tadlock on his blog, offers a more in depth tutorial regarding this matter.

References

The order you insert JavaScript is important, especially when you deal with Jquery in WordPress. You might want to check out this article as well: Use Google-Hosted JavaScript Libraries (…still the Right Way)

Related posts:

1. Float images in WordPress properly
2. How To Display Dynamic Menu Pages In WordPress
3. BBpress Front Page Text Plugin

While those issues are not critical, I think straighten out some of those, can save time to both parties involved in the project and can also provide better usability and accessibility. Thus far, I have experienced the following:

No home link in navigation

This is a usability issue that I have observed in designs I have received. The logo can still act as a link which takes on first page and a lot of us know about that, but in the same time there are visitors who don’t know that the logo is supposed to take home.

Home button link in navigation is a must have and the visitors are familiar with that in other websites.

Simple or not footer information

Most of the experienced web designers know that the footer is an important area of the website. You can present there a lot of information, which otherwise, you cannot present in other areas. Furthermore, you can repeat here most of the important links of your website which is very good for SEO. You can also present contact information and company address which will help you better rank in Google business listings. Other information you can display there, may be latest blog posts, sitemap, socials, latest tweet pulled from a twitter account, meta information like copyright and year etc.

Again, I had to slice designs with just minimal information or no footer at all! Footer is an important element and users expect it, so you should use it.

Not using a grid system

Every designer should know about the golden ratio which makes a design more esthetic.

While out there are some excellent designs, which are not based on the golden ratio, using it, is a good practice and can save time while designing and developing.

Not once, I had to calculate that left sidebar 268px wide with a 13px margin right and the 569px wide text area. You know what I mean by that.

I use 960.gs grid system when I design in Photoshop, and make design process faster while designs look excellent.

Repeating backgrounds not repeat

I had to tutor some designers, how the repeating background should work. If that website edge repeats vertically, will the starting point match the ending point of that edge? What happens when the content box gets very long? Will the background beneath repeat properly?

While some of these tasks are attributed to the one who slice the design, the website should be designed with that in mind.

Most of times I have to use clone stamp tool, one of my best friends in Photoshop, to fix those non repeating backgrounds.

Provide design in illustrator format instead of Photoshop

While some designers are more comfortable using Illustrator rather Photoshop, I consider the websites should be layout in Photoshop. Illustrator can be used for logos and other website illustration elements, thereafter imported in Photoshop, but ultimately, Photoshop should remain the main choice for designing the website. Illustrator is vector creation software while Photoshop is image creation and editing software, while the website, is not vector; it is just a static image needed to be sliced.

If you are better using Illustrator and you slice the layout by yourself, you are welcomed use it. However, most web designers use Photoshop for website design and are familiar with that.

Layers in Photoshop not organized properly

That is another issue I encountered trying to find my way in document. A website has header, content and footer areas. Within header we usually have logo, navigation, search box or related elements. Each one of these elements should get their own folder and should be organized in their appearance order.

The layers should also have the option to be turned on/off, especially the navigation buttons which, eventually, will be used as background.

Text layers should not be rasterized so whenever somebody tries to edit the layer they can copy the text as needed.

Web safe fonts

Print designers are very fond of their chosen fonts and I am sure they would like using it in all website copy. I agree that the font is a very subtle, but important element of design itself, however it is not possible, using traditional methods, include that everywhere. Typekit can help in those kind of situations, however not everybody is willing to pay yearly fees or simply the desired font might not be included in the library.

Usually I use sIFR method for headlines text replacement and images as a background for navigation.

The font for the body still needs to be web safe font like Arial, Helvetica, Georgia etc. That is another point I have to clarify while I work with a designer.

Not all elements are designed

Here I am referring to those list items bullets, headings 2, 3 and 4, block quote if necessary, contact form inputs, which are not provided most of times.

Luckily I can improvise those by myself, however would make everything easier if the original designer would provide those elements designed.

Which was your experience?

Which other issues have you encountered while working with somebody else design? Please comment below.

Related posts:

1. How To Display Dynamic Menu Pages In WordPress
2. Why web designers should develop using Windows
3. Better techniques for writing CSS and markup

Please note that this solution is non productive whenever you want to have normal text as menu links. In case you want to have a navigation using images, this would be the solution for you. The main navigation from this website it is built using a background image and switch its position based on the ID of the menu item, with the help of CSS. This type of navigation can be done just using WordPress solution (next code), as we can’t assign ID’s dynamically, using WordPress Dynamic Menu Page Method, described later in tutorial.

<ul>
	<li id="home-item" <?php if (is_page('home') ) { echo ' class="current"'; } ?>> <a href="<?php bloginfo('url');?>" class="current"><span>Home</span></a></li>
	<li id="services-item" <?php if ( is_page('services') || is_page('subpage1') || is_page('subpage2') ) { echo ' class="current"'; } ?>><a href="services"><span>Services</span></a>
        <ul>
            <li><a href="services/subpage1">Subpage 1</a></li>
            <li><a href="services/subpage2">Subpage 2</a></li>
        </ul>
    <li>
	<li id="contact-item" <?php if (is_page('contact') ) { echo ' class="current"'; } ?>> <a href="contact" class="current"><span>Contact</span></a></li>
</ul>

The first list item, Home, has a conditional to check if is home page it should set a class of “current” so you can display the current page in a different way, so the usability of the site will be increased.

The second list item has two sub pages, that using CSS, will show up as drop down. If the Services page will be active, WordPress will automatically assign a class of “current” to its list item.

In this method the “span” tag will help us to hide the text so we can view just the background image.

The example contains just 3 list items, but if we want to have more, it can can become very hard at some point, to maintain the menu. Plus, if you want to give your client the control over navigation this is not a viable solution.

WordPress Dynamic Menu Page Method

You can see a demo of this method, within a website I have developed. All of the menu there, is generated dynamically by the code described below.

You can see in that demo, that we can still assign background images and have in the same time real text. The text is wrapped with a “span tag” so we can use a CSS method called sliding doors to set images as background for this menu-items.

The dynamic solution would be:

<ul>
<?php wp_list_pages('&title_li=&link_before=<span>&link_after=</span>&depth=2'); ?>
</ul>

The Code Explained

This piece of code is a WordPress tag that calls the pages and set their titles a names. Also we want to display any sub page as a dropdown with the help of CSS so we specify a depth of 2.

<?php wp_list_pages('&title_li&depth=2'); ?>

If we want to display a higher number of sub pages, we just increase the number or remove “&depth=2″ so will display unlimited sub pages.

Because we want to set images as background for the menu items, we have to add a span tag:

<?php wp_list_pages('&title_li=&link_before=<span>&link_after=</span>&depth=2'); ?>

Html Result:

Now we have a totally dynamic menu and submenu, that will display as HTML like so:

<ul>
    <li class="current"><a href="home"><span>Home</span></a></li>
    <li><a href="services"><span>Services</span></a>
        <ul>
            <li><a href="subpage-1">Subpage 1</a></li>
            <li><a href="subpage2">Subpage 2</a></li>
        </ul>
    </li>
</ul>

The CSS

Now we have the HTML dynamic generated, but we still need to customize it with CSS. We will do this in a separate lesson, where I will show you how to set up background images for menu items, as a Apple menu way.

WordPress Menu Page Highlighting With CSS

Now if you take a look the source code, you will see that WordPress outputs a “current_page_item” class to the corresponding li tag of the page where you are. Now is very easy, with the help of CSS, to display in bold, the current page link:

Highlight the parent page

li.current_page_item a {font-style:bold}

Highlight parent’s child page

What if you want to have the parent page bold, while you are on one if its subpage? WordPress comes in help again, outputting dynamically, a special class “current_page_ancestor”, so our code will look like that in this case:

li.current_page_ancestor a {font-style:bold}

That was it. I assumed in this article, that you already have basic CSS knowledge and you are aware of CSS specificity.

Some Helpful Plugins:

Page Exclusion

If you need to have some pages excluded from navigation you need the exclude pages plugin.

My Page Order

A really useful plugin is my page order plugin, which will allow you to order the pages in your menus.

Page Tree Overview

If it happens to work on a website with a lot of pages wordpress page tree will give you an overview of those and you can reach a specific page really quick in order to edit it.

Resources:

WordPress non productive method: WordPress Dynamic Menu Highlighting.

Here you can find a great resource for WordPress dynamic page menu: Delicious Recipes WordPress Page Menus.

Related posts:

1. How to load Javascript on specific pages in WordPress
2. Include different sidebar in WordPress, depending on the section you are
3. How To Display Parent Page Title in WordPress