The Anatomy of a WordPress site

One of the first things you’ll need to do as a WordPress site owner is get familiar with the territory. It will give you the confidence to update the site and save you bags of time in the long term.

Getting used to the terminology will undoubtedly make conversations with your developers/tech team a great deal easier too. In order to illustrate the anatomy of a WordPress site we are going to need a volunteer, as proof that WordPress powers some big name players, take a look at the variety site.

 

According to their about page;

Variety is the most authoritative and trusted source of entertainment business news, reaching an audience of affluent influencers. For 113 years, influential producers, executives and talent in entertainment have turned to Variety for expert film, TV, digital, music, and theater business analysis and insights.

 

In terms of WordPress the site’s biggest impact would be its appearance on the WordPress showcase section. Whilst it may not like your own small business site (unless you run a magazine) there are still a number of elements that will overlap, that will be useful for you to get a grasp on as a WordPress site owner.

Firstly, lets take a look at the header area;

WordPress site header

 

As you can see, the web team at Variety do not adhere to the principles of minimalist design! It wouldn’t be outlandish to describe this setup as ‘old skool’ in it’s design. That said, it also displays many shared characteristics with the millions of WordPress sites around the web.

Starting from the top left

 

Social/Search icons: The magnifying glass is your search icon and will open up a search box allowing you to search the contents of your site. A vital part of any SEO plan. Social icons are links to your social profiles an ever present, if somewhat superfluous, element of almost every site you will see on the internet today.

Subscription/priority links: At the time they put this site together, there was a commonly accepted trend that all of your most important inks should be at the very top of the page. This principle isn’t exactly adhered to today, as you’ll end up with an awful lot going on in a small area, often termed a ‘busy’ design.

Login link: An element that is still very much in operation throughout the web is the login link to your members area will often be found at the top right of any web page.

Header logo: Again ubiquitous across the internet, your logo should always occupy a prominent position in your header area, this often helps with branding links etc on social media.

Navigation menu: Or nav menu, often in WordPress specific terminology this can be referred to as the ‘primary menu’. This is a selection of the most important pages on your site and from a UX point of view, the pages you want users to visit. Or to rephrase with the user in mind, pages the user will find most useful.

 

Moving beyond the website header

WordPress site body

 

In the above image you can see the site divided into two main sections. On the left, the main content area and on the right, a sidebar, or widget area.

Main content area

In this example the main content area features a collection of posts sometimes called a featured posts gallery. The right sidebar features a list of more posts in a widget form, often known as a recent posts widget.

 

As I’ve mentioned, Variety are keen to demonstrate they have a lot of content on site. In the first section highlighted above you can see what is commonly known as a full width banner which features a call to action encouraging users to ‘subscribe today’.

Beneath this is yet more illustration of the bottomless depths of there site with a post carousel. As a general rule, when you can see multiple images, you are looking at a carousel, one big image, it’s a slider.

 

Video Slider

WordPress video slider

 

Variety are know showing their variety in content types in the above video slider. If you were looking for something similar on your site, firstly, don’t. Sliders are bad, they slow down pages, nobody ever looks at them and they hurt conversion rates. If you want to ignore all the data and want something like this, then search for ;video slider with thumbnails’ and don’t say I didn’t warn you.

 

Footer

 

Now if I’m being completely truthful, you’ll see if you check out variety site, there are a myriad of posts before you find the welcome relief of the website footer. The website footer is found as it sounds at the bottom of all sites and often contains copyright and registered info. As with a large number of sites, Variety have chosen to include a more comprehensive footer menu, for those users looking for some more detail. They’ve chosen to do this by using custom menu widgets in the footer widget area.

 

So, as briefly as possible, there’s a run down of the anatomy of a WordPress site. Whilst these rules might not remain absolutely true for every WordPress theme out there, you should be good for around 90%. If you work on the basic notion that

  • top = header
  • underneath = page/post/main content
  • left or right of main content = sidebar/widget area
  • bottom=footer

You won’t go too far wrong and should make what you are looking for a whole lot easier.

 

Leave a Comment

Your email address will not be published. Required fields are marked *