Dec 29, 2011


Staff Directory Wordpress Plugin - Photos to show

If you want the photos to show on your page, you have to add the [photo] shortcode to the Staff Directory template.

To do this:
  • Under the "Staff directory" item in the wp admin bar, click on "templates".
  • In the Staff Page HTML section add the [Photo] shortcode inside the [staff_loop]' shortcodes at the location you want the photo to show.
For example, if you want the photo to show first before the name do this:

<div class="staff-directory">

    <div class="staff-directory-divider">

You customize the templates and css to match your desired layout and style.

I hope this helps! 

Dec 10, 2011


jQuery Mega Menu Plugin

The Mega Drop Down Menu plugin takes standard HTML nested lists and turns them into horizontal mega menus. With some basic CSS styling the mega menus can be used to create unique and visually appealing navigation.

A mega menu has several advantages over standard drop down menus, including:
  • All options visible at the same time
  • No scrolling and tricky mouse manoeuvres to see sub-menus fly out
  • Using standard nested lists the groups can be easily structured and formatted with CSS
To get the full effect of the plugin use 3 levels of nested lists.
For vertical mega menus refer to our other plugin jQuery Vertical Mega Menu.
To initialise the mega menu with the default settings – 3 sub menus per row and fade in speed of “fast” – use the following code:
jQuery(document).ready(function($) {

download zip file also comes with 8 different skins giving an example of more advanced styling. To use one of these skins wrap the mega menu in a div tag and assign the div with a class to match the skin name – e.g class=”black” and the mega menu ul tag with class=”mega-menu”. Then add the relevant css file to the head of the document.

Menu Options

The widget has several parameters that can be configured to help cutomise the mega menu:
  • Hover/Click - Select the event that activates the sub-menu. Note that if using "Click" the parent menu links will be disabled
  • Number Items Per Row - Select the number of sub-menu items to be shown on each row of the mega menu.
  • Skin - Several sample skins are available to give examples of css that can be used to style your own mega menu
  • Animation Effect - The effect used to display the drop down menu. Options are slide down or fade in
  • Animation Speed - The speed at which the dropdown menu will open/close - selecting "No Animation" will immediately show/hide the menu
  • Set Sub Menu To Full Width - If checked, the drop down mega sub menu width will be 100%

See demo

Dec 9, 2011


Worpress Plugin TimThumb To Your WordPress Theme

TimThumb PHP Script is a custom image-sizing script, that allows you to produce a cropped and sized version of an image. These are great to use along with a WordPress Magazine Theme. TimThumb has recently been released as open source, and here I will walk you through adding TimThumb to your WordPress theme.

Using TimThumb will require the use of WP Custom Fields.

01. Setting Up The Script

Lets grab the TimThumb.php source code, and save it to our theme directory.
To keep things organized, lets save it in a scripts directory in our theme.
Now create a new directory inside of scripts, and name it “cache”
Make sure that both directories /scripts/ and /cache/ are set to 755 so they’re writable by the server.

02. Adding The Call To Our Theme Template

Depending on whether you use home.php or index.php, open the appropriate template file up, and lets find The Loop. Look for the calll to the post title, and lets insert the call somewhere below the title, or meta information.
I’m presenting you with 3 options for the call. You can pick which one might suit you best.
Option 01 – Show Image Only
<?php // This will show only the image. Alter the width and height (in both places) to your needs. ?>
<?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
 <div class="postthumb">
  <img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="100" height="57" />
<?php } ?>
Option 02 – Show image, and link image to post
<?php // This will show the image and link the image to the post. Alter the width and height (in both places) to your needs. ?>
        <?php if ( get_post_meta($post->ID, 'thumb', true) ) { ?>
 <div class="postthumb">
  <a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>" width="150" height="150" /></a>
<?php } ?>
Option 03 – Show image and link image to URL of your choice. Requires additional custom field of “imglink”. Could be used for outgoing links, or linking a thumb to a full version of the image. This option would work best inside of your single.php template.
<?php  // This will show the image and link it to anything you place into another custom field of "imglink".
  // Alter the width and height (in both places) to your needs.
<?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?>
 <div class="postthumb">
  <a href="<?php echo get_post_meta($post->ID, "imglink", $single = true); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php } ?><img src="<?php bloginfo('template_directory'); ?>/scripts/timthumb.php?src=<?php echo get_post_meta($post->ID, "thumb", $single = true); ?>&h=150&w=150&zc=1" alt="<?php the_title(); ?>"  /><?php if ( get_post_meta($post->ID, 'imglink', true) ) { ?></a><?php } ?>
<?php } ?>

03. Making Use of Custom Fields

  1. In your post go ahead and upload your image.
  2. In the “LINK URL” input, highlight and copy the entire address of the image you just uploaded.
  3. Close the image manager, and open the Custom Fields box down below.
  4. For the key enter thumb.
  5. For the value, paste in full address of the image we just copied. ie:

Oct 27, 2011


WordPress Theme Hacks

WordPress was originally created as a weblog or blog platform. But now WordPress has grown so powerful that you can use it to create any type of website and use it as a Content Management System (CMS). In this article, I'm going to share some of my WordPress tricks with you on how to make a better WordPress theme. I'm not a programmer nor developer, so I will focus more on the frontend development. Oh yeah, I forgot to mention that WordPress has made it so easy that even a non-programmer (designer like me) can build a wonderful website. My WordPress sites included: N.Design Studio, Best Web Gallery, Web Designer Wall, and some free WordPress Themes.

WordPress Conditional Tags 

Conditional Tags are very useful when creating a dynamic WordPress theme. It allows you to control what content is displayed and how that content is displayed. Here are couple sample uses of Conditional Tags:


Dynamic Highlight Menu

Here is what I used to create a dynamic highlight menu on Best Web Gallery. In the first list item, if it is Home or Category or Archive or Search or Single, add class="current" to the <li> tag, which will highlight the "Gallery" button. Second item, if it is page with Page Slug "about", add class="current".
<ul id="nav">
<li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ' class="current"'; } ?>><a href="#">Gallery</a></li>
<li<?php if ( is_page('about') ) { echo ' class="current"'; } ?>><a href="#">About</a></li>
<li<?php if ( is_page('submit') ) { echo ' class="current"'; } ?>><a href="#">Submit</a></li>

Dynamic Title tag

Again, I use Conditational Tags to output dynamic <title> tag in the header.php.

if (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');

Dynamic Content

If you want to include a file that will only appear on the frontpage, here is the code:
<?php if ( is_home() ) { include ('file.php'); } ?>

Feature post highlighting

Let's say categoryID 2 is your Feature category and you want to add a CSS class to highlight all posts that are in Feature, you can use the following snippet in The Loop.
<?php if ( in_category('2') ) { echo ('class="feature"'); } ?>

Unique Single template

Suppose you want to use different Single template to display individual post in certain category. You can use the in_category to check what category is the post stored in and then use different Single template. In your default single.php, enter the code below. If the post is in category 1, use single1.php, elseif in category 2, use single2.php, otherwise use single_other.php.
$post = $wp_query- >post;

if ( in_category('1') ) {
include(TEMPLATEPATH . '/single1.php');

} elseif ( in_category('2') ) {
include(TEMPLATEPATH . '/single2.php');

} else {
include(TEMPLATEPATH . '/single_other.php');

? >

Unique Category template

Suppose you want to use different Category template to display specific category. Simply save your Category template as category-2.php (note: add "-" and the categoryID number to the file name). So, category-2.php will be used to display categoryID 2, category-3.php will be used for categoryID 3, and so on.

Display Google Ad after the first post

A lot of people have asked me for this. How to display a Google ad after the first post? It is very simple. You just need to add a variable ($loopcounter) in The Loop. If the $loopcounter is less than or equal to 1, then include google-ad.php code.
<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); $loopcounter++; ?>

// the loop stuffs

<?php if ($loopcounter <= 1) { include (TEMPLATEPATH . '/ad.php'); } ?>

<?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

Query Posts

You can use query_posts to control which posts to show up in The Loop. It allows you to control what content to display, where to display, and how to display it. You can query or exclude specific categories, so you get full control of it. Here I will show you how to use query_posts to display a list of Latest Posts, Feature Posts, and how to exclude specific category.

Display Latest Posts

The following code will output the 5 latest posts in a list:
<?php query_posts('showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>

Display Feature Posts

Let's say categoryID 2 is your Feature category and you want to display 5 Feature posts in the sidebar, put this in your sidebar.php:
<?php query_posts('cat=2&showposts=5'); ?>

<?php while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;?>

Exclude specific category

You can also use query_posts to exclude specific category being displayed. The following code will exclude all posts in categoryID 2 (note: there is a minus sign before the ID number):
<?php query_posts('cat=-2'); ?>

<?php while (have_posts()) : the_post(); ?>
//the loop here
<?php endwhile;?>

Tips: you can overwrite the posts per page setting by using posts_per_page parameter (ie. <?php query_posts('posts_per_page=6'); ?>)

Custom Fields

Custom field is one the most powerful WordPress features. It allows you to attach extra data or text to the post along with the content and excerpt. With Custom Fields, you can literally trun a WordPress into any web portal CMS. On Web Designer Wall, I use Custom Field to display the article image and link it to the post.

First add the Custom Field in the post.


Oct 18, 2011


HostMonster WordPress Hosting

HostMonster WordPress Hosting is like getting the best of both worlds when choosing to host your website with HostMonster. Then choosing to manage your website with WordPress is a great way create a professional website with HostMonster WordPress Hosting.
HostMonster WordPress Hosting is a combination of the best web hosting and the best blogging and content management system (CMS) around. There are tons of benefits of having access to HostMonster WordPress Hosting including extra features and a still-low monthly payment. WordPress is a CMS, which means you can create your entire website using the tools from WordPress. WordPress tools and features like themes, plugins and widgets work to help you design a website that is professional yet innovative. Another one of the best parts to HostMonster WordPress Hosting is that it can easily be updated whenever there is a desire or need to do so.

Getting Started with HostMonster WordPress Hosting:
After signing up with a HostMonster web hosting account, there are a few ways to control your website. You can use the free website design and website builder tools to design the entire look of your site. In addition, you can access the HostMonster Control Panel that allows you to access your WordPress tool. From inside the control panel, you can access the WordPress icon and begin the installation process using SimpleScripts, which makes the installation process only take a matter of a few clicks of the mouse. For those who are new to web hosting and have never used WordPress, this is a simple solution to begin combining the efforts of HostMonster and WordPress. After installation, users now have the opportunity to choose a theme that will dictate the overall look and design of the website. These themes are available via WordPress or through individual design companies. If you really want to have a different-looking theme, it is easy to have an individual web designer build a custom web design and theme if you don’t mind spending a little money for the project.

HostMonster WordPress Hosting Features:
In addition to the WordPress theme, users can also add in various WordPress plugins and widgets to enhance the look and functionality of their HostMonster WordPress hosted website. Choosing tools like the WordPress calendar widget and video and audio streaming plugins and tools are helpful because not only do they enhance the overall look and appearance of the website, but they also provide your web visitors with more options and tools to help them navigate your website. For many website owners, starting up a website to build an online business is a great way to attract more customers. Having access to not only the HostMonster web hosting tools and features like ecommerce and marketing services, users can also make a website using all of the design and functionality features that come with WordPress.
Having a blog in association with your website is also a good idea even if you choose not to use WordPress for the entire content management system. This is great because it can connect your website to other locations on the web, which can increase your chances of getting found online. This is the best way to increase business. The only way to generate a bigger clientele on the Internet is from exposure. By adding a blog using WordPress to your HostMonster website, it is helpful in that effort to get your business name out to more people online.
To learn more about HostMonster WordPress Hosting, take a few minutes to check out the HostMonster website for a complete listing of all of the tools and features for a great web hosting experience that WordPress has to offer.

HostMonster $3.95 WordPress Hosting


Oct 8, 2011


How to Use JavaScript in WordPress Pages

JavaScript are one of the most used languages in the web world that helps in implementing objects, rich content, modules and media into the site effectively with decent level of animation feature. WordPress, as content management software, is pretty robust to integrate JavaScript properly with some limitations due to security.

Generally JavaScript, such as tracking or analysis codes, can easily be added into the WordPress as they require to be inserted in the home page only and most of the themes have predefined place to insert the code or the code can simply be added into the header via the header.php file. The problem occurs while adding any JavaScript in a single particular page or post, as there is no php file separately for each page and post of WordPress that can simply be edited and inserted the JavaScript. While creating or editing any new page or post, html tags are accepted as well as some php syntax but if you use any JavaScript under the html tab of the page or post, it will not be activated in there, neither any effect of that JavaScript will show in the edited page or post.

As we said earlier WordPress have the compatibility to use JavaScript in anywhere, page or post but for security reasons, the JavaScript are blocked and only html or xhtml scripts are allowed to run by a filter predefined in WordPress library. Tracking or analysis codes are inserted to specified php files where filers are not used but normal page or posts have the filters activated. To use JavaScript in any particular page or post, we have to disable the filter so that JavaScript can be used anywhere. Another alternative is to install a plugin like AdSense implementer where JavaScript can be added and used anywhere in the site.

To use disable the filter, you have to use the following codes :
function disable_content_filters() {
global $current_user;

These will elevate the blockade on JavaScript by Disabling KSES HTML/XHTML filter of WordPress security, but to prevent any mishaps for the lack of security, another code should be used to prevent any non-elevated user to exploit JavaScript in the site, so after adding the codes above, use these jjust under :

if ($current_user->user_level >= $min_user_level) {
remove_filter(‘content_save_pre’, ‘wp_filter_post_kses’);
remove_filter(‘excerpt_save_pre’, ‘wp_filter_post_kses’);
remove_filter(‘content_filtered_save_pre’, ‘wp_filter_post_kses’);

These will ensure proper use of JavaScript keeping the security loop tight, along with disabling the KSES filter to work simultaneously. There are some plugins in the site that does exactly the same to enable JavaScript, but using own codes are always better for learning and security purpose. Make sure to add the php syntax on the beginning and end of the combined codes like <?php code ?> otherwise the code will not be recognized as a php script and hence will not work.

Keep reading for more tips on editing and customizing WordPress and don’t forget to subscribe. If you have any query or suggestions, write in the comment, your views are very important for us.

Oct 7, 2011


The content limit function for wordpress

function the_content_limit($max_char, $more_link_text = '(more...)'
$stripteaser = 0, $more_file = '') {
$content = get_the_content($more_link_text, 
$stripteaser, $more_file);
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
$content = strip_tags($content);

if (strlen($_GET['p']) > 0) {
echo "";
echo $content;
echo "<a href=""the_permalink();</p> <p> 
     echo "">"."Read More</a>";
echo "";

elseif ((strlen($content)>$max_char) &&
 ($espacio = strpos($content, " ", $max_char ))) {
$content = substr($content, 0, $espacio);
$content = $content;
echo "
echo $content;
echo "...";
echo <a href="";echo the_permalink(); 
echo "">".$more_link_text."</a>";
echo "

else {
echo "
echo $content;
echo "<a href="";echo the_permalink();echo "">"."Read More</a>";
echo "";