3 WordPress Tricks you MUST Know!

September 10, 2013 | Posted in B2B, Technology and tagged , ,

wordpress-logo-stacked-rgbWordPress isn’t just used for blogging anymore. Downloaded and installed on your hosting platform, it’s a fully-developed open-source CMS software tool. Written in PHP, it’s tremendously customizable, contains useful built-in functions, and developers can “hook” into the software and create “plugins” which enhance functionality. But as with any software, there are suggested requirements and a learning curve. Thankfully, there are resources and articles that help you through the process from installation to customization, starting with the WordPress Codex at http://codex.wordpress.org/ and expanding into helpful tips such as this post. So let’s get started.

Add Theme Support

WordPress 3.0+ was a big step toward building your own theme, and this is important if you’re going to have a custom designed and developed website built. Whereas novice WordPress developers will utilize a parent theme and build a “child theme” based upon it, experts would build a theme for your business from the ground-up, customizing every function.

One of my favorite supported features just released in version 3.6 is ‘menus’, and as of version 3.4 is ‘custom-header’.

If you’re like me, I don’t want a new page I’ve just created to show up in my navigation bar automatically, I want my main links to be specific. This is where you could add support for custom menus and choose exactly what you want to show up in your main navigation, footer navigation, or any other place in your website where you want a navigation element to go. And it doesn’t limit you to Pages or Posts. If you have Categories, Taxonomies, Tags, Products, or some other Custom Post Type, then you can create a custom menu, mixing any of these areas.

Your logo, a photo that spans the width of the site, a tagline, or just a small illustration that you’d like to change every so often, this is what the ’custom-header’ support can be used for. Add this function to your theme, set your parameters and easily upload an image that will show up at the top of your site, or wherever you choose to show it (remember we’re working with YOUR customized theme, so we can place it anywhere you want it to show).

Both of these features, once added to your functions.php file, would be available under the Appearance menu in your WordPress Dashboard.

Here’s how you might use this:

//Add Theme Support
function my_theme_setup() {
	//Add Custom Header support.
	$args = array(
		'width'         => 1009,
		'height'        => 142,
		'header-text'   => false,
		'default-image' => get_template_directory_uri() . '/images/header.jpg',
	);
	add_theme_support( 'custom-header', $defaults );

	//Add Featured Image support
	add_theme_support( 'post-thumbnails' );

	//Add Menus support
	add_theme_support( 'menus' );

}
add_action( 'after_setup_theme', 'my_theme_setup' );

Enqueue Scripts (and Styles)

Much has been said about this already, but it’s worth bringing up a few tricks that will help even a novice developer look more professional (and learn something along the way). A good developer will tell you that you’ll need to separate markup from functionality, and this is the perfect WordPress function that will help you understand this concept. What makes it so easy is that it only requires one line of code in your header.php file to make it all work:

<?php wp_head(); ?>

And you thought I was fibbing! Really though, if you put this into your custom theme within the tags then you can place any line of code into here, and actually tell it to run before any code that it’s dependent upon. For example, you have a slideshow using jQuery Cycle which requires jQuery to run before it. Then you have some custom parameters for the jQuery Cycle slideshow such as speed, type of transition, and pagination, which have to run AFTER jQuery and jQuery Cycle run. In addition, you have custom styles that need to be placed within the <head> tags and in order to overwrite any plug-in styles, your stylesheet needs to load AFTER the plug-in’s styles.

All of this can be accomplished with the wp_enqueue_scripts action in your functions.php file. Here is some example code to get you started thinking of ways to utilize this feature:

//Enqueue scripts and styles to use in wp_head
function my_enqueue_scripts() {
	wp_enqueue_script(
		'cycle-script',
		get_stylesheet_directory_uri() . '/js/jquery.cycle.all.js',
		array('jquery')
	);
	wp_enqueue_script(
		'general-script',
		get_stylesheet_directory_uri() . '/js/scripts.js',
		array('jquery','cycle-script')
	);
	wp_enqueue_style(
		'google-fonts',
'//fonts.googleapis.com/css?family=Droid+Serif|Roboto'
	);
	wp_enqueue_style(
		'reset-style',
		get_stylesheet_directory_uri() . '/cssreset-min.css'
	);
	wp_enqueue_style(
		'main-style',
		get_stylesheet_directory_uri() . '/style.css',
		array('woocommerce_frontend_styles')
	);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

wp(retty)_nav_menu

Now that you’ve added menu support to your theme, how do we use it to make a (pretty) menu? Assuming you’ve added Pages and/or Posts to your Dashboard (Content Creation), first create the menu (it’s different in version 3.6 but still only takes a few steps to complete):

  1. In your WordPress Dashboard, go to Appearance -> Menus.
  2. In the Menu Name field, type in a name for your menu.
  3. Click the Create Menu button
  4. Then, in each section: Pages, Posts, Links, Categories, or Tags; select specific items using the checkboxes and click the Add to Menu button. Hint: If you don’t see the section that you want to use to add items to the menu, in the upper right of the Dashboard there is a button/tab named Screen Options. Click it and a neat drop-down section will appear in which you can select or deselect the visibility of the sections.
  5. Drag and Drop the order of the menu items.
  6. Click the Save Menu button.

Now for the fun part, adding the menu to your template. For this example I’ll show you the quick standard way, and then a super easy but unknown trick for making a simple (but pretty) footer menu.

Wherever you want your menu, perhaps in your header.php file, just add this code (substituting Menu Name with the Menu Name you created above):

<?php wp_nav_menu( array( 'menu' => 'Menu Name' ) ); ?>

Once this code is run through your template, by default, it will produce source code similar to this:

<div class="menu-primary-container">
	<ul class="menu" id="menu-primary">
		<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92" id="menu-item-92"><a href="http://www.mydomain.com/company/">Company</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-93" id="menu-item-93"><a href="http://www.mydomain.com/services/">Services</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-91" id="menu-item-91"><a href="http://www.mydomain.com/resources/">Resources</a></li>
		<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-90" id="menu-item-90"><a href="http://www.mydomain.com/contact/">Contact</a></li>
	</ul>
</div>

And without styling, it would look something like this in a browser:

Company
Services
Resources
Contact

Using CSS and background image sprites, you can create beautiful graphically enhanced menus. And try using Google Fonts for a no-image typeface effect (just be sure to test it in all browser and OS combinations (don’t forget tablet and smartphone either!)

And now for the trick!

You might just want a good ole simple footer menu that looks like this, center aligned:

Company | Services | Resources | Contact | Home
Well it’s actually not that straightforward when using the wp_nav_menu arguments as listed in the WordPress Codex.

Yes, you can use the ‘after’ argument to add a pipe character after the tag, but when you’re using float:left to get the <li> tags to display the list horizontally (you would need some additional CSS to get it centered), or display:inline (which strangely adds some extra pixels inside the <li> tags), and figuring out how much margin or padding you’ll need after pipe and before the next <li> tag, you might find that this little trick will save you a ton of effort and keep your resulting code tidy.

<?php echo strip_tags(wp_nav_menu( array( 'menu' => 'primary', 'echo' => false, 'after' => ' | ' ) ), '<a>' ); ?><a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a>

Let’s break it down:

And the resulting source code (now THAT’S pretty!):

<a href="http://www.mydomain.com/company/">Company</a> |
<a href="http://www.mydomain.com/services/">Services</a> |
<a href="http://www.mydomain.com/resources/">Resources</a> |
<a href="http://www.mydomain.com/contact/">Contact</a> |
<a href="http://www.mydomain.com/">Home</a>

With these simple snippets of code in your templates, anytime you want to change your Main Menu links, rearranging the order or adding/removing menu items, your menus will generate automatically. Now go build yourself a WordPress site, or better yet, let Somethumb build it for you 😉

About Scott Weiss

Scott Weiss is the founder of Somethumb, a creative services agency focused on web design and development. "Like" us on Facebook, Follow us on Twitter, "Plus-One" us on Google+, "Connect" with us on LinkedIn, and view our portfolio on Somethumb.com.

Comments are closed.

Industries

© 2003-2019 Somethumb™ Company2244 Oak Grove Rd, #30030, Walnut Creek, CA 94598 925­-695-7925Contact Us

Creative Ideas. Intelligent Solutions. Lasting Impressions.™
Local. Personal. Service.