WordPress design hierarchy

Hierarchy showing WordPress content breakdowns

In an earlier blog post, I wrote about Plugin Strategy to maximize the power of the core WordPress system by closely connecting functional customizations to core APIs. I’d also like to share that WordPress core – and by extension WooCommerce – cleanly optimizes design output in a very maintainable hierarchy.

The components to this design hierarchy, if you imagine them inside a pyramid from top to bottom, are:

  • CMS framework
  • Theme
  • Child theme
  • Plugins
  • Custom plugins
  • Post types
  • Pages or posts
  • Sections
  • Rows
  • Columns
  • Blocks

Popular responsive page builders (plugin or theme versions available) are Divi* + Divi Commerce, Beaver Builder*, and the Gutenberg editor (currently in beta testing for WP core). These bring a wealth of design capabilities to your sites and to WooCommerce shopping, product, cart, and checkout pages. They can in some regards provide a faster, simpler, and cacheable design tempting system that replaces the need for certain categories of plugins or extensions. They can be much more efficient that stuffing CSS code throughout your site, in both an operational sense and a code efficiency sense.

Share this:

Note: I may receive compensation for referrals.

WP Engine - A smarter way to WordPress
The best email marketing tool, responsive templates, automations, Worldwide support, tracking and reports, Benchmark Email, free plan available
Sell everywhere. Use Shopify to sell in-store and online.
Klaviyo partner badge
Okendo Partner, certified
WooCommerce, the most customizable eCommerce platform for building your online business. Click to get started.
Jetpack, a stronger, customizable site without sacrificing safety. Click to get started.