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

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.

No related posts.

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. 8 Recommended Useful Plugins for Wordpress
2. How To Display Parent Page Title in Wordpress
3. How to load Javascript on specific pages 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. How To Display Dynamic Menu Pages In Wordpress
2. 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.

No related posts.

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:

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

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

To make it work, just insert the code anywhere in your wordpress template files, within the loop:

<?php 
 
$current = $post->ID;
$parent = $post->post_parent;
$grandparent_get = get_post($parent);
$grandparent = $grandparent_get->post_parent;
?>
<?php if ($root_parent = get_the_title($grandparent) !== $root_parent = get_the_title($current)) {echo get_the_title($grandparent); }else {echo get_the_title($parent); }?>

In case you want to display the immediate parent of a subpage, you can use the following code. In this portion of code, you have a link to the parent page itself.

 
<?php
 
$parent_title = get_the_title($post->post_parent);?>
<a href="<?php echo get_permalink($post->post_parent) ?>"><?php echo $parent_title;?></a>
 
<?php echo $children;?>

Related posts:

1. How To Display Dynamic Menu Pages In Wordpress
2. Include different sidebar in Wordpress, depending on the section you are
3. BBpress Front Page Text Plugin

1. All in One Seo Pack

This plugin is far the most popular SEO plugin for Wordpress and will boost you visibility in Search Engines, by giving you the ability to set-up custom titles, description and keywords for every page.

If you have Wordpress 2.7.1 you might encounter some problems when you have set-up in Reading Options from Settings tab, the Front page to Home and the Posts page to Blog. You won’t be able to separate titles of those two pages just using conditionals between in template Header file and manually insert the titles for this Home and Blog pages. It is more a Wordpress bug than a plugin bug.

Go to download page

2. Contact form 7

I would say one of the most popular contact forms for Wordpress for providing simplicity and versatility. You can fully customize and provides great included protection against spam, using Askimet plugin without necessary having to install Captcha, but you have that option also. You can even add the option to upload files.

Go to download page

3. Dagoon Sitemap Generator

Some of its features include: support for multi-level categories and pages, category/page exclusion, multiple-page generation with navigation, permalink support, choose what to display, what order to list items in, show comment counts and/or post dates, and much more. The plugin will give you a sitemap page in minutesm will keep the links inside tha page up to date and you won’t have to worry about it anymore.

Go to download page

4. Fancy Box

If you feel that the popular Light Box plugin animations are too boring, you can try Fancy Box which is similar with Light Box but gives you more animation options. After you install the plugin, it will apply Fancy Box to any image link, which opens an image. It uses jQuery so keep in mind that it might interfere with other plugin that is uses the same technology.

Go to download page

5. Google XML Sitemaps

This plugin will create a Google sitemaps compliant XML-Sitemap of your Wordpress pages and will inform all major search engines about any content update. This one also, is install and forget plugin and will help your SEO for sure.

Go to download page

6. Advanced Excerpt

In comparison with the similar plugin Evermore or default Wordpress excerpt, which shorten the posts by paragraph, this one give you more control and let you chose a word or character count for a post preview.

Go to download page

7. WP e-Commerce

This shopping cart extension, I would say, is the most reliable free solution for Wordpress. If you want to take full advantage you will have to buy the paid version but totally worth it.

Go to download page

8. Flutter

Also known as a very buggy CMS plugin, still remains a robust solution for those who want to use Wordpress for content management system by creating custom write panels that can be fully customized (radio buttons, file uploads, image uploads, checkboxes, etc).

Flutter also includes power image manipulation (automatic resizing, cropping, watermarking, etc), edit in place (works instantly!), and modulation of your themes.

Go to download page

Related posts:

1. How to load Javascript on specific pages in Wordpress
2. How To Display Dynamic Menu Pages In Wordpress
3. BBpress Front Page Text Plugin

Better Search Engine Optimization has been integrated as well, using friendly links, keywords, description and distinctive titles for each page and post.

Please provide any feedback regarding the look and feel of this improved version. Also you can make a comparison with the older version:

The website complies with world wide web consortium coding rules:

No related posts.