Digging Into WordPress » Search Results » termhttp://digwp.com
Take your WordPress skills to the next level.Wed, 25 Feb 2015 18:59:59 +0000en-UShourly1WordPress Themes In Depthhttp://digwp.com/2014/09/wordpress-themes-in-depth/
http://digwp.com/2014/09/wordpress-themes-in-depth/#commentsMon, 08 Sep 2014 19:02:24 +0000http://digwp.com/?p=7828Just launched my new book WordPress Themes In Depth! This book literally is packed with over 450 pages of in-depth theme-building action. If you want to develop, customize, and distribute your own WordPress themes, I think you will benefit greatly from this book.

About WordPress Themes In Depth

For most of this year, I have been focused heavily on WordPress theme development, pouring every ounce of knowledge, experience, and inspiration into this book. It’s filled with practical information and is just the right balance of theory, application, and technique. The book includes lots of ready-to-go code snippets, tutorials, tricks, and tips. It’s basically a hands-on field guide for intermediate-level users who want to understand how themes work and build their own awesome WordPress themes.

The book goes in-depth on the following topics:

Setting up for theme development

WordPress theme fundamentals

Theme anatomy and the WP Theme Template

In-depth coverage of the WordPress Loop

Complete chapter on customizing themes

Theme development according to the WP API

Security, optimization & testing

Front-end techniques

How to share and sell your own themes

Two complete, step-by-step theme walkthroughs

Advanced tour of the premium 2020 theme

The book covers all of the awesome things that WordPress can do, like Theme Features, Custom Fields, Meta Boxes, Widgets, Theme Options, Theme Customizer, Actions & Filters, Custom Taxonomies, Custom Post Types, and much, much more. To get a better idea of all that this book contains, check out the official Demo:

Bundled themes & demos

The book provides complete step-by-step tutorials for building the Simplest Theme, DIY Theme, and General Theme, and also features an in-depth walkthrough of the 2020 theme. You can see 2020 in action by visiting the book’s homepage. Throughout the book, these bundled themes are referred to as concrete examples to help facilitate learning.

The bundled Demos are plug-n-play examples of techniques covered in the book, including the following:

Custom fonts (via Google)

Custom fonts (direct CSS3 method)

PHP diagnostics

Mobile/responsive sticky dropdown menu

Full-size background image

Full-size background video

Lightbox functionality

@media queries

Random images via JavaScript

Random images via jQuery

Dynamic scroll-to-top link

Fixed-width content slider

Full-width content slider

Video slider

Social media buttons

Theme Customizer

Theme Options - Basic

Theme Options - Tabbed

Theme Options - Paged

Toggle anything with jQuery

The book goes through each of these front-end techniques step-by-step, using the demos as plug-n-play examples so you can “see” how it works while following along. And to help tie everything together, many of these techniques are included in the 2020 theme. Triple win :)

With my new book, WordPress Themes In Depth, I bring all of this experience and knowledge together in a complete, focused guide that shows you how to master the art of building high-quality WordPress themes.

Get the book!

WordPress Themes In Depth is a beautifully designed book that contains over 450 finely crafted pages with clean layout and easy-to-read typography. Every page is meticulously designed in full color and 100% focused on WordPress theme development. Here are some of the book’s best features:

Full color

Hyperlinked

Searchable PDF format

Bundled themes & demos

Lots of copy/paste code samples

Helpful diagrams & tables

Concise & easy-to-read

12 chapters / 450 pages

300+ external resources

At-a-glance notes

Many tips & tricks

In addition to the Demo, here are some screenshots to give you an idea of what’s inside the book:

]]>http://digwp.com/2014/09/wordpress-themes-in-depth/feed/8Plugins & Tools for WordPress Developershttp://digwp.com/2012/12/plugins-wordpress-developers/
http://digwp.com/2012/12/plugins-wordpress-developers/#commentsSat, 01 Dec 2012 10:20:32 +0000http://digwp.com/?p=6539I recently spent some time updating my growing collection of WordPress plugins, and during the process discovered some great resources for my WP "developer toolbox." These are some super-useful plugins and tools for debugging, logging data, working with translation files, analyzing performance, and making otherwise difficult tasks efficient and manageable. May they serve you well!

WP Developer plugins & tools

"List query-actions only for admins; for debug purposes. See all queries on the frontend of the blog and find the slowest part. The plugin is perfect for WordPress developers, plugin and theme developers and site administrators who are trying to find out why the blog is too slow."

"The WordPress Hook Sniffer plugin is a tool for plugin developers that helps determine the sequence in which action and filter functions are fired. It allows you to peer into the inner workings of the WordPress Plugin API. You can configure what is outputted and to where the output is sent (screen or text file)."

"Debug Objects provides a large number of information: query, cache, cron, constants, hooks, functions and many more." E.g., query, cache, cron, constants, hooks, and functions. "Values and content get displayed at the frontend and backend of the blog, to analyze errors but also to better understand and develop with/for WordPress."

WP Developer Assistant is "essentially is a toolkit that makes life as a WordPress developer easier." Does cool stuff like customizable PHP errors, global variable dump, table modification, execute queries, phpinfo(), and much more.

"Displays Most Everything about your WordPress Rewrites. Displays Most Everything about your WordPress Rewrites, Permalinks, URI's, in a very detailed and raw way. Informational plugin only... Nothing is modified or changed."

"This really simple plugin hooks into your wp_footer function (so make sure that your theme uses it) to count the number of queries, how long they took, how much memory was use, and when it all occurred. That way, they can show some solid data to the host so that they are able to compare numbers and know for sure that their load times are faster or slower when compared."

"TPC! Memory Usage allows WordPress administrators to view the current and peak memory usage of the application. This is extremely helpful when testing new plugins, or if there are a lot of modifications, plugins, or large language files. As of version 0.4, administrators now have the ability to view detailed system information about their web server, MySQL, PHP, and WordPress software."

"Developer toolbar giving you easy access to debug information across your entire website. The WP-Devel plugin for WordPress features a ton of debug options to help developers. Debug information is easily turned on/off from the WP-Devel toolbar anywhere on your website."

Leave a comment if you know other awesome resources for WordPress devs!

]]>http://digwp.com/2012/12/plugins-wordpress-developers/feed/13Customizing WordPress Feedshttp://digwp.com/2012/10/customizing-wordpress-feeds/
http://digwp.com/2012/10/customizing-wordpress-feeds/#commentsTue, 23 Oct 2012 18:41:12 +0000http://digwp.com/?p=6546WordPress feeds enable your visitors to subscribe to your content for use in their favorite feed-reader. For example, subscribing to the main-posts feed and/or the comments feed is a great way for your readers to stay current with all the latest from your site.

With WordPress, you can deliver a wide variety of "Full-text" or "Summary" (partial) feeds in numerous formats, including Atom, RDF, and RSS2. This variety extends the reach of your content by enabling your feeds to be read in more apps, readers, and devices.

As awesome as the default feeds may be, they are also readily customizable using a variety of methods. In addition to WP's built-in ways of configuring your feeds, you can go even further with custom templates, functions, and plugins. In this DigWP post, you'll learn everything you need to customize your feeds with bonus content, recent posts, social media, and much more.

Note: In previous versions of WordPress feeds were also generated in RSS-0.92 format, but those now are redirected to their respective RSS-2.0 formats, even though the template file for RSS-0.92 still exists in the core. The feed template files are what WordPress uses to generate the various types of feeds in their various formats. Let's take a look..

Feed Template files

To generate the different feed formats — Atom, RDF, and RSS2 — for its myriad feed types, WordPress employs the following template files:

Post-based feeds

/wp-includes/feed-atom.php

/wp-includes/feed-rdf.php

/wp-includes/feed-rss.php

/wp-includes/feed-rss2.php

The post-based feeds look self-explanatory: feed-atom.php is used for Atom feeds, feed-rdf.php for RDF feeds, and so on. As mentioned, the thing to note here is that the feed-rss.php (for the RSS-0.92 format) still exists in the WP core, even though it's no longer used, afaik.

Comment-based feeds

/wp-includes/feed-atom-comments.php

/wp-includes/feed-rss2-comments.php

The comment-based feeds are available in only two flavors: Atom and RSS 2.0. As with post feeds, requests for RSS-0.92 comment feeds are redirected to their respective RSS-2.0 formats. Also worth noting, requests for RDF-formatted comment feeds are mysteriously redirected to RSS2 post feeds. Examples:

For each of these examples, it would make more sense to redirect to the respective RSS2-formatted comments feed, rather than to any of the post feeds.

Feed functions

/wp-includes/feed.php

Lastly, the feed.php file contains some of the key functions used in the various feed-templates. For example, the rss_enclosure() function is used in feed-rss2.php to display any RSS enclosure(s) included for the current post. So, if you've added, say, the following enclosure to your latest post (via custom field named “enclosure”):

WordPress will automatically insert the enclosure into your RSS2 feed via the rss_enclosure() function. Here is what your feed's XML will look like after the enclosure is included (line breaks added for emphasis):

There is a similar function for including enclosures for Atom feeds, atom_enclosure, which is also included in feed.php. And so, now that we're all up to speed on the what, why and where, let's apply the information as we learn how to customize our own WordPress feeds.

Built-in ways to customize feeds

The easiest way to customize your feeds is by using the built-in options that WordPress provides. Probably these are familiar to most of us, but they're worth mentioning along with some of their pros and cons:

Full-text or Summary feed?

If you visit "Settings" > "Reading Settings", you can choose whether to syndicate your complete posts or only the excerpt. Note: does not apply to comment feeds, which always display comments in their entirety. Delivering partial-feeds is a good way to prevent content-scraping, while delivering full-feeds makes it easier for your readers to stay current (i.e., they don't have to visit your site, which may be another reason to use partial feeds).

Number of posts/comments to include in feeds

To customize the number of items that appear in your post and comment feeds, visit "Settings" > "Reading Settings" and adjust the option, "Syndication feeds show the most recent". The number that you choose will apply to both post and comment feeds.

Including larger numbers of posts can make your feed look more attractive to potential subscribers, which may be useful when delivering partial feeds. When delivering full-feeds, however, you may be better served by choosing a lower number of feed items. Here at DigWP.com, we deliver full-text feeds, eight at a time.

Character encoding for feeds

While the default UTF-8 character-encoding is recommended, it is possible to choose an alternate encoding method. Visit "Settings" > "Reading Settings" > "Encoding for pages and feeds" to make it happen.

Customize with custom templates

As explained in previousposts, a great way to generate custom feeds is to use a custom feed template. Those posts explain it all in detail, with the basic idea going something like this:

Create a custom page template – and paste into it any existing feed template

Modify the custom feed template – for example, change the number of posts, make it a category-specific feed, add custom XML enclosures, and so on.

Provide a link to the feed – once everything is in place, the custom feed will be available at the URL of its custom page.

As you can imagine, using custom feed templates is an ideal approach, but it's also possible to modify your existing feeds (instead of creating new ones). Read on to learn how..

Customizing with WP plugns

The easiest way to go further than default WP customization options is to use a plugin. There are many available. Here are some of our favorites that show the wide range of feed-customizing that's possible with free WordPress plugins:

Comments On Feed – enables visitors to view and leave comments directly from each post in the WordPress content feed.

With that snippet included in your theme's functions.php file, WordPress will display a line of copyright information (for example) to each of your feed items. Of course, much more is possible once you're able to target hooks for specific feeds. Fortunately, WordPress provides some useful format-specific feed hooks:

Atom post feeds

atom_ns()

atom_head()

atom_author()

atom_enclosure()

atom_entry()

RDF post feeds

rdf_ns()

rdf_header()

rdf_item()

RSS2 post feeds

rss2_ns()

rss2_head()

rss_enclosure()

rss2_item()

Atom comment feeds

atom_ns()

atom_comments_ns()

comments_atom_head()

comment_atom_entry()

RSS2 comment feeds

rss2_ns()

rss2_comments_ns()

commentsrss2_head()

commentrss2_item()

For more information (and more hooks), and to see where everything is located, check out the relatively short feed template files mentioned previously. Some of these hooks are also discussed in the WP Codex, and there are some additional infos elsewhere on the Internets. For now, we've seen how to hook into feeds and some feed-specific hooks to use, so let's continue with some practical examples of customizing feeds via your theme's functions.php.

Examples of customizing feeds via functions.php

Straight on then, here are some practical examples showing different ways to customize default WordPress feeds directly from your theme.

Add a custom logo and icon to your feed

As explained here, a useful way to boost your brand is to include a custom logo and icon to the header area of all of your feeds. Just add the following code to your theme's functions.php file:

Note that there are two images in play here: an icon for the Atom feeds and a logo for the Atom, RSS/RSS2, and RDF feeds. Once both the code and images are in place, your WordPress feeds will be uniformly branded with the ultra-buff image(s) of your choice.

Add feed <link> tags to your web pages

A great way to boost feed reach is to include automatic feed links to the <head> section of your web pages. When this theme-feature is enabled, WordPress draws upon its vast army of feed types and includes links to any relevant feeds for the current page view. This enables "feed-aware" devices and browsers to automatically detect your available feeds, making it easier for visitors to discover and subscribe. This theme feature is enabled with the following snippet added to your theme's functions.php file:

Nothing else to do! Just slap it in there and enjoy your new automatic feed links. Huzzah!

Completely remove the version number from pages and feeds

By default, WordPress includes its version number in your feeds. If you're always running the most current version of WordPress, there is nothing to worry about; otherwise, it's a good idea to remove the version information wherever possible. Here's the code to add to functions.php:

After adding this code to your functions.php file, WordPress will wait five minutes before updating your feeds with the new content. This buys you some precious time to triple-check everything and fix any last-minute errors. To delay feed-updating for a longer (or shorter) amount of time, edit the $wait and $device variables to whatever you prefer.

Disable all feeds

With all this talk about customizing feeds, it's worth asking whether or not you want to make feeds available in the first place. They're enabled by default, but sometimes it's optimal to disable them entirely or even selectively. Here's the function to make it happen:

This technique works out of the box to add some custom content (or whatever) to the first feed item, and is extendible to target subsequent posts as well. Feel free to customize the output to be anything that makes sense. Note: as-is, the custom content is added to the beginning of the first post. To add content instead to the end of the first post, switch the order of the first return, like so:

return $content . '<p>Put some custom content here!</p>';

Incidentally, I use this technique in my new feed-tracking plugin to add a custom-tracking image — works a treat!

Conclusion

We hope this article helps people in customizing their own WordPress feeds. The take-home message is that WordPress provides a wealth of possibilities when it comes to creating, formatting, and customizing your feeds. So be original, and have some fun :)

Plus lots of other details to help improve the plugin based on requests and feedback from users of the theme. I also used the excellent Theme-Check plugin as well as WP's built-in debugging feature to help find ways to further improve the already awesome theme. For more info, see the readme.txt file or check out the following links:

How to get it

The All AJAX theme is one of our exclusive themes and is included with any book purchase. For those of you who already own the book, visit the Member's Area to download All AJAX version 2 at your convenience. To get the book, themes, and all of the extras, visit the DigWP Book Store. Thank you!

]]>http://digwp.com/2012/10/all-ajax-theme-update-v2/feed/13Complete List of Default WordPress Fileshttp://digwp.com/2012/05/complete-list-wordpress-files/
http://digwp.com/2012/05/complete-list-wordpress-files/#commentsThu, 03 May 2012 19:34:12 +0000http://digwp.com/?p=6035When cleaning up hacked sites and testing .htaccess tricks, it's nice to have a list of WordPress directory and file names for checking patterns and finding strings directly via Search/Find. Especially when working remotely, having a complete list of WordPress files available online can help expedite the attack-recovery process.

The official Codex page lists some important files, but only for WP version 2.x and doesn't seem to list files located in all sub-directories. Sure it's not the most exciting topic in the world, but it's always good practice to know thy files. You get to see the bigger picture and gain a better understanding of how much stuff actually is included in WordPress — especially if you start digging around in the /wp-includes/ directory.. bring a snack, knife, and some flint to improve your chances.

We're looking at default download/unzip of WordPress version 3.3.2 — a complete list of all files in all directories in alphabetical order. Here's the roadmap:

]]>http://digwp.com/2012/05/complete-list-wordpress-files/feed/25Attach Unattached Media Fileshttp://digwp.com/2012/05/attach-unattached-media-files/
http://digwp.com/2012/05/attach-unattached-media-files/#commentsTue, 01 May 2012 16:24:29 +0000http://digwp.com/?p=5832Attaching any unattached media files that you may have floating around is a good way to keep things organized and running smooth. Normally, when you're working on a post in the Edit Post screen, you click the Upload/Insert button and use the nifty drag-n-drop media uploader to get 'er done. When you upload your media files in this manner, WordPress "knows" that you want to attach the file to that particular post. Super straightforward sure, but there are situations where WordPress doesn't know which post to use. In this DigWP post, we walk through the process of finding unattached media files and attaching them to their respective posts.

Why media files may be "unattached"

Basically, WordPress needs to know which post to attach the file to, so if that information isn't available, the file's status is set to "unattached". For example, if you have a bunch of images attached to a post, and then delete the post, the images are still visible in the Media Library and still exist in the /wp-content/uploads/ directory, but they will be unattached to any particular post.

Another reason why you might have unattached media files is because they were uploaded directly through the Media Library instead of through a specific post. Some WordPress users like to upload lots of images up-front, before creating any posts. Are there other ways that media files become unattached? Possibly, but ultimately it doesn't matter because it's relatively straightforward to locate all unattached files and attach them to specific posts. Well, it is once you know how to do it..

How to find your unattached media files

Eliminating and/or organizing rogue files of any type is good practice for running a tight ship, whether it be media files, theme files, or other project files laying around on the server. When it comes to cleaning up your media files, WordPress provides two easy ways of locating everything that's not attached to a specific post.

As seen in the previous image, the first and easiest way to find and attach your files is to click the Unattached link (1) at the top of the Media Library page. That will list all of your unattached files along with a quick link to Attach (2) the file to a specific post. This is also the second way to find unattached images, as the "Attach" link is easy to spot among all of your attached media files.

How to attach your unattached media files

Once you've found some unattached files, you're ready to attach them to their rightful posts. There are several ways to do this, depending on where you're at in the WordPress Admin.

If you're on the Media Library page, then you'll see the Attach link next to the unattached file (see previous image).

If you're already viewing the list of "Unattached" images, you can hover over a specific file to reveal its Attach link.

If you're working on a post, click the Upload/Insert button, go to the Media Library tab, search for the image, and click the Insert into Post button.

Here is a screenshot showing the "Attach" link next the file in the list of "Unattached" files:

After clicking the "Attach" link, a popup window will appear, like so:

At this point we see some room for improvement, in that you sort of have to "know" in advance the title or contents of the post to which the file should be attached. If you're not sure and just want to sort of browse through existing posts to find the best one, try searching with some relevant/related search terms. If you really have no idea which post to use, try searching for a super-common word like "the" or "a" and you'll get the first 30 or so posts. Unfortunately at this time there is no way to navigate through more than the first set of results, but it may be enough to get you there. It would be good to have this option in the future (hint hint).

Once you've found the post that you would like to use, select it and click the Select button, as shown in the previous image. That's all it takes, after clicking "Select" WordPress does its thing and the file is attached to the selected post.

How to un-attach media files

Wrapping up, just wanted to point out another area where WordPress could be improved. As far as I know, there is no way to "un-attach" media files from their respective posts from within the Admin area. Unless somebody knows a way of doing so, the only way seems to be complete deletion of the media file in question. When working with a lot of files, each with their own meta information, this can be a rather unpleasant experience, but I digress.. Yes you can always attach the file to another post, but that doesn't change the post to which it was first attached. To change that information, it's either a trip to the database or delete the file and start over.

1-minute summary

To attach an unattached media file, find an Attach link, select the desired post from the list, and click the Select button. Alternately, if you're working on a post, click the Upload/Insert button, visit the Media Library tab, locate and select the desired post, and click the Insert into Post button.

Taking the time to clean-up and organize your files is a great way to improve the efficiency and maintainability of your website.

That's all for now, Happy attaching :)

]]>http://digwp.com/2012/05/attach-unattached-media-files/feed/14Measuring Latency with Apache Benchhttp://digwp.com/2012/04/measure-latency-apache-bench/
http://digwp.com/2012/04/measure-latency-apache-bench/#commentsMon, 16 Apr 2012 18:31:33 +0000http://digwp.com/?p=5920One of the important factors in the speed of your site is the distance between your servers and the browser visiting your site. The time it takes the information to travel from the server to the browser is called latency. Latency increases with distance, so no matter how fast your servers may be, high latency can make your site load slowly for visitors who are geographically removed from your servers.

Since there are plenty of places to measure your site speed online, this article goes into detail of how to measure your site latency using Apache Bench. This is helpful because you'll know how to make educated hosting decisions, AND after running the following test, you'll be familiar with Apache Bench, a useful tool for site administration.

Less latency = faster websites?

The question of latency came up when WP Engine, a managed WordPress hosting provider, and the company I work for, began fielding support calls from Asian and Pacific geographies. They had a variety of questions about our hosting, but we answered the same question about latency several times:

"How much faster would my site be to me if I moved it to another location?"

We decided that it would be helpful to share a tutorial of how to answer this question for those so inclined.

This question often came from an Asian country who was asking if their site would load faster on their continent if they moved their hosting from North American servers to Asian servers. The distance between the browser and the server are an important factor in how quickly a page will load in a browser. It will simply take longer for a page to load in China if it is being served from Dallas, Texas instead of Beijing.

It's fair to say that most, if not all, big WordPress sites have visitors from across the globe, so it can be useful to know how to test the relative speed differences between hosting companies or locations, so we'll show you how to use Apache Bench to do that.

Defining terms

First off, lets define terms. We're measuring latency rather than total speed. That is, we're concerned with the time it takes the first byte to appear in the browser, not the time it takes all the bytes to appear.

That's because distance typically increases latency but not throughput.

For example, suppose a browser in London is hitting a server in New York City. First it has to make the request for the page — traversing the Atlantic or bouncing off a satellite — then the server starts sending the response, which now also has to move across the Atlantic.

Let's call the length of time to move across the ocean L (for Latency) and the length of time the server takes to start sending bytes S (for Server-Speed). Then the time of this transaction is:

2L + S

Actually, in reality it's worse than that. That's just the HTTP request, and before that even happens you have to establish the TCP/IP connection, which takes another back-and-forth (actually there's three legs to that protocol, but we'll gloss over that detail), so the true equation is:

4L + S

If the browser is in New York City, L will be small, perhaps as little as 40ms. Whereas even on very fast servers like we have at WP Engine S is at least 250ms, and typical hosting providers with page-cache plugins have 500ms of S. Without page caching S could be up to 1-4 seconds. Therefore, when you're close to the server, S dominates the equation, and the speed of the server is the most important factor.

However, with a browser request from London, L is easily 500-750ms. With a fast server the latency is an order of magnitude more time than the server time. At great distances, the latency will completely determine the apparent speed of the site.

Measuring Latency with Apache Bench

So how do you easy measure latency in the field? And in particular, how would we measure the difference between identical servers in London and NYC?

There's a simple, free tool from Apache called Apache Bench, which we recommend for basic tests like these (and many other too). You can run Apache Bench from Terminal on a Mac, or Putty on Windows. There are other options depending on how secure you want to be.

To make sure it's working for you, let's see what happens when you run it once on our company homepage:

Now the trouble with making just one request is that there's all kinds of errors that can happen. For example, maybe someone two houses down just started downloading 17 simultaneous bittorrents of porn. That will mess up your results.

So what we really need is to run N trials and aggregate the results. ab can do that. Suppose N is 100, and just do this:

ab -n 100 http://wpengine.com/

Now the results are more interesting, showing us average and standard deviation:

Apache Bench Test 2

The "standard deviation" tells you how much error is there. Assuming a normal distribution of results (which seems appropriate), 95% of the results fall within +/- 2 standard deviations. Even if the distribution is not normal, at least 75% of the results fall within +/- 2.

In particular, check out the "time to connect" and "time to start," which show the 2L time to establish the TCP/IP connection and the additional 2L + S time to request the page and start getting the data.

In fact, just from these two data points we can compute L and S! After all, we have:

(1) 2L = A
(2) 2L + S = B

So subtracting (1) from (2) we find that B - A = S, and A/2 = L. Now, this is just an estimate because, remember, there's lots of potential error and variation here. Still, it's a good bit of data to gather.

Now of course we only have to run the same command from a machine in another location to find the difference in L.

So to solve the original problem, the person in London can run Apache Bench against a copy of her blog in London and the live one in NYC to see the difference.

This is a helpful method to check your site's latency in various geographic locations. Just because it's blazing fast in the US, does not mean that your customer in Europe or Asia will be getting served as quickly, especially if the closest server is far away.

Let us know what you think! How else are you guys using Apache Bench, or how has measuring this latency changed the way you're managing your WordPress?

About the author

This guest post is by Austin Gunter, blogger and brand ambassador for WP Engine. WP Engine offers fast WordPress hosting that is optimized for speed and security. They also like breakfast tacos and long walks along the server beach.

]]>http://digwp.com/2012/04/measure-latency-apache-bench/feed/9HTML Formatting for Custom Menushttp://digwp.com/2011/11/html-formatting-custom-menus/
http://digwp.com/2011/11/html-formatting-custom-menus/#commentsMon, 28 Nov 2011 18:09:42 +0000http://digwp.com/?p=5440For some projects, it's nice to output clean, well-formatted markup. Using theme template files enables great control over most of your (X)HTML formatting, but not so much for automated functionality involving stuff like widgets and custom menus. One of my current projects requires clean, semantic HTML markup for all web pages, but also takes advantage of WordPress' custom-menu functionality to make things easy. In this DiW article, we'll see how to enjoy both: WordPress custom menus and clean, well-formatted HTML markup.

That's a mess of class and id attributes, plus an extra <div> container to boot. Fortunately, the wp_nav_menu() provides some useful parameters for customizing the display of your custom navigation menus. Here is a list of the default parameters:

Of these parameters, $container lets you specify how to wrap the <ul> element, using either 'div', 'nav', or false. So by specifying false for the $container parameter, we can simplify markup by removing the <div> container. The wp_nav_menu function also provides two more optional parameters for customizing menu markup:

$items_wrap – "Whatever to wrap the items with an ul, and how to wrap them with" (source: WP Codex)

$walker – "Custom walker object to use (Note: You must pass an actual object to use, not a string)" (source: WP Codex)

These sound useful, but I haven't had much luck with either. The $items_wrap didn't seem to do anything, but there are plenty of customwalkerscripts(404 link removed 2013/04/18) available for further experimentation and customization. If you can get them to work properly, a custom walker provides complete control over custom-menu markup displayed with the wp_nav_menu tag. Unfortunately, I was unable to get very far with any of them, so I sought an alternate method..

An alternative approach for custom markup

After fiddling with a few of the various custom walkers, I decided to find an easier way to customize and format WordPress nav/menu markup. The walkers are fairly extensive and complex, and just seem like overkill for building a simple list of custom menu items. After some digging through the WordPress Codex, I found the perfect function for crafting squeaky-clean WordPress menus: wp_get_nav_menu_items. As the name implies, wp_get_nav_menu_items returns the items from your custom navigation menus (as created in the WP Admin → Appearance → Menus panel). Thus, you can use this function to mark up your custom menus however you want. For my particular project, the desired format looks like this:

Trying to do this with the commonly used wp_nav_menu function and a custom walker is possible, but it's much easier building the menu structure from scratch, using only what's required to make it happen. So alternately we use wp_get_nav_menu_items and begin with the example function provided at the Codex. After wrapping it in a function and customizing the output, we have the clean_custom_menus() function, ready for copy/paste into your theme's functions.php file:

For lines 8-15, anything is possible – you can include whatever list items, markup, and attributes required. Additionally, you can tab and indent markup to line up with page markup using \n for a new line and \t for a tab space. The fastest, easiest way to use this function is to copy/paste into your theme and then check out your list markup. For example, if the nav list is too far to the left, add some more tabs. You can also add class and id attributes, include custom items, and even manipulate which list items are displayed ($url, $title, etc.). After a little fine-tuning, the wp_get_nav_menu_items() function enables clean, well-formatted markup for your custom menus.

Remove class and ID from wp_nav_menu()

Here is another way to clean up the HTML output of wp_nav_menu(). Just add the following snippet to your theme's functions.php file: