What Design Elements Drive WordPress Development Costs?

What Design Elements Drive WordPress Development Costs? - The White Label Agency

There are many factors which drive WordPress development costs. Some of them are obvious; some not so much. This post talks about design-driven impacts on WordPress website costs.

WordPress Development Costs and Plugins

Installing certain plugins like Woocommerce, BuddyPress, etc. require additional templates which need to be styled. More templates = more hours = higher cost … that’s a pretty obvious correlation. As such we rarely get questions about the necessity of those sorts of additional WordPress development costs.

WordPress Development Costs and Responsive Design

At this point in the life cycle of the web, responsive development is the norm.  Google’s Announcement pretty much made responsive development a fact of life. Everything we quote is quoted as fully responsive unless we are specifically told otherwise. One factor that can potentially drive up WordPress development costs is when the design includes specific responsive views which are different from the framework defaults1. For an overwhelming majority of our projects we are provided with full width designs only. Our developers then apply common sense, good judgment and the framework defaults to create the responsive views at the standard breakpoints. If your project doesn’t require specific responsive views, don’t provide them. You will save on development as well as save hours of design time. Unless your customer has specific responsive design requirements which you know to be different than the framework defaults, leave the responsive layouts to us.

Design Elements Which Drive WordPress Development Costs

The rest of this article is written from a top down perspective, starting with the header and working towards the footer. Design elements which impact WordPress development costs are listed below. I would love to claim that this is a comprehensive list, but it is not. I plan to come back to this document and update it frequently as other good examples come to be obvious.

Navigation

Three navigation design elements can lead to additional WordPress development costs:

  1. Use of so-called “sticky nav”. A good example of a sticky element can be seen here: https://stickyjs.com/
  2. Use of so-called “mega menu”. Here is a good example: https://maxmegamenu.com/
  3. Creating a menu with more features and functions than the Bootstrap or Foundation default menus. This blog post from WPMUDEV.org does a good job of explaining that type of menu.

Slideshows/Parallax

Implementing slideshows and/or parallax elements can be inexpensive or really costly. If what your design calls for fits nicely into what a plugin delivers, then costs can be managed. If your design calls for true custom development to be done, costs can be quite substantial.

Custom Fields

Many sites these days are designed with a “row” on the home page which is broken up into 3 or 4 columns and each column contains an image or icon, a bit of text, a button with call to action and the call to action has a link associated with it. Setting these 3 or 4 “blocks” up is relatively simple using the Advanced Custom Fields plugin to create a custom page template. When you add a “row” like that to a particular page such as the home page, you end up being required to have a unique template for that page. If your design has 3 blocks on one page and 4 blocks on another, that means you need 2 separate templates. More templates = more hours = more cost.

Different Sidebar Widgets on Different Pages

There is a plugin called Woosidebars which makes this pretty easy to do technically speaking, but it still takes time to do it. The more variations to the page layouts that you have, the higher the WordPress development costs will be.

Contact Forms

We assume most sites are going to have at least a Contact Us form and/or an email marketing subscription form. The typical Contact Us form has name, email address and a textarea field. If B2B sales, maybe it adds a company name field and/or a website URL. Email address is typically the only required field. That’s it. If your design includes any forms that are more complex than that, then you can assume your WordPress development costs will rise.

Social Media Feeds

There are plenty of plugins which make adding social media feeds to a website simple in terms of pulling in the content. However, they aren’t all as “developer friendly” when it comes to styling them so their layouts and look/feel fit the current website. Finding a plugin which matches the functionality you want with the design you’ve created can be problematic and sometimes trade offs need to be made. Anything is possible – for a price.

Little Things

There are so many random “little things” which can have a big impact on WordPress development costs that it would be almost impossible to catalog them all here. A few things come to mind:

  1. Use images with consistent proportions. Let’s say you’re designing a custom post layout that will have both a single “Team Member” template and be used dynamically for an “Our Team” archive. If you’re only going to have one photo per team member (e.g. their official headshot) and you want to minimize development costs, then be sure to design both the single view and the archive view so the pictures are the same proportions. They don’t have to be the same size, they just need to have the same ratio of height to width. That way a single picture loaded as the Featured Image on the post can be used in both the archive and the single views. If the pictures are different proportions, then the developers need to add a custom field to the template to capture the second image and write additional code to use the second image on one of the two templates.
  2. CSS animations for the sake of CSS animations. Elements that move cost more than static elements. It’s pretty much that simple. If your site is glitzed up with CSS or JS “tricks” which cause items to move, flip, spin, etc., then those elements are going to require more development time which will increase your WordPress development costs.

1 The White Label Agency primarly uses Bootstrap and Foundation frameworks. We also have experience with Genesis.