How to get a Wordpress template designed

Want to design your very own Wordpress template but lack the skillsets? In this post we show how easy it is to get it done with a web designer.
Jun 28, 2020 • 10 minute read
Edward Kost @EdwardKost
Technical Co-pilot
Cover photo for How to get a Wordpress template designed

Bleiben Sie auf dem Laufenden

Abonnieren Sie unseren Newsletter, um über wichtige Themen auf dem Laufenden zu bleiben.
Danke fürs Abonnieren! Behalten Sie Ihren Posteingang für unser nächstes Update im Auge.

Designing your own Wordpress template will set you apart from all the other boring websites

Wordpress comes with a vast selection of free templates you can use to build a Website. The problem, though, is that these designs aren't unique to you and your brand. Wouldn't it be nice if you could create and use your own custom Wordpress template?

But if you don't know any coding what can you do?

Simple, work with a website designer.

We'll show you the complete end to end process including how to give web designers access to your Wordpress website, what type of files you should expect to receive and how to upload them. 

Why you should get a custom Wordpress template designed

While Wordpress does offer an impressive selection of free themes, you don't have complete editing freedom. So you'll most likely run into a scenario where you'd like a specific element repositioned or added but you can't because you're working within a fixed design framework.

A custom Wordpress theme removes these limitations so you can get your website designed  precisely how you want it. With this level of control, you can create a design that effectively reflects your unique brand identity and sets your website apart from all the other generic Wordpress websites built from pre designed themes. 

A quick overview of Wordpress theme development

To design your Wordpress theme with a web designer most efficiently, it's important for you to have a firm understanding of the complete Wordpress theme development process. This will help you maintain confident control over the entire project. 

Where are Wordpress themes developed?

Wordpress themes are not not developed on your website. This is a good thing. You don't want designers adjusting your website design while it's live. Instead, they're developed on a seperate server, which is usually just the computer of the designer working on your template. 

Note: We use the terms 'template' and 'theme' interchangeably because they both refer to the same thing. 

Custom Wordpress templates are moulded from existing themes. Underscores is usually the starting template of choice by most web designers because its incredibly customizable.

Wordpress template files

A Wordpress template is not just one file (for example, Wordpress.exe), many different files make up a Wordpress theme.

Below is an example of the types of files that comprise a Wordpress theme and how they should be organized when delivered. Directory, or '(dir)' represents a folder. Notice that all of the primary template files are placed in the root directory and not in folders. 

All images and videos are stored in the assets folders. 

assets (dir)

      - css (dir)

      - images (dir)

      - js (dir)

inc (dir)

template-parts (dir)

      - footer (dir)

      - header (dir)

      - navigation (dir)

      - page (dir)

      - post (dir)

404.php

archive.php

comments.php

footer.php

front-page.php

functions.php

header.php

index.php

page.php

README.txt

rtl.css

screenshot.png

search.php

searchform.php

sidebar.php

single.php

style.css

The style.css template contains the styling rules for your entire Wordpress website. This is where your designer will be doing most of their work (more on this shortly).

Upload your Wordpress template to your website.

Once your theme is designed you will need to upload all of its files via your Wordpress dashboard. 

The first thing you'll need to do is compress all of your Wordpress template files into one neat compressed folder. Once that's done, from the Wordpress dashboard navigate to appearance > themes > add new > upload theme, and select your zipped folder to upload.

how to upload wordpress theme

how to upload a wordpress theme

If you want to avoid the arduous process of accepting all Wordpress files, making sure nothing is missing, and then uploading them, you can give your web designer access to your Wordpress platform and they'll upload the new theme themselves. Here's how you grant Wordpress access to a web designer.

Navigate to users > add new

how to add a new wordpress user

Then fill out all of the fields and assign them an administrator role. The administrator role does give them the highest editing privileges, so make sure you only assign this role to people you can trust.

how to add a new wordpress user

Testing your new Wordpress theme

After your Wordpress template is delivered and installed, you need to put it through a series of rigorous tests to ensure it's built to withstand the typical processing activity of a published website. These tests need to be performed ASAP to prevent your site from crashing when your precious visitors start pouring in.

The standard Wordpress theme test is the Theme Unit Test. This test executes a series of common visitors functions such as post creation, uploading pictures to posts etc. To perform this test, an XML file is uploaded to Wordpress containing all of the test instructions. You'll need to assign names to all fictitious post authors so that you can keep track of all the dummy content created in each test.

wordpress theme testingSource: themeisle.com

The Theme Unit Test is a great way to test your theme's ability to withstand the minimal level of expected user activity, but it's by no means a comprehensive assessment of a theme's overall stability. A complete quality assurance test should be implemented before driving traffic to your website to ensure your theme doesn't break even in the most extreme of circumstances.

Who do you hire: a web designer or a web developer?

The titles web developer and web designer are often used interchangeably but their roles are very different.

Web designers are concerned with the aesthetics of your website, and web developers build out the structure and functions of a website. Because these two strands of web development focus on different areas, they write code in different computing languages.

Web designers code in CSS (Cascading Style Sheet) and Web developers code in Javascript and HTML.

This simple definition doesn't really explain much so we'll further unpack it through a house construction project illustration.

When a new house is constructed its structure is in place, but inside it's completely bare. No furniture, no pictures. Nothing.

Even though this house might be fitted out with the most modern functions, very few people would want to visit. It's not aesthetically appealing, it's not comfortable to lounge around in. In other words, it doesn't offer a very pleasant visitor experience.

To complete the build, an interior designer needs to plan the design of the house so that it appeals to the specific visitors that will frequent it. Then, the designer will need to position all of the furniture and wall decorations in accordance with this plan. 

Think of website developers as the personnel involved in building the physical house and website designers as the interior decorators. Web developers create the framework and functions of the website and web designers 'decorate' these functions to make them very appealing to visitors. So web designers work on things like the color palette, the creation of all custom graphics as well as the placement and display style of all graphical elements.

But web designers aren't just concerned with making a website look as pretty as possible, like in our scenario above, their designs are strategically planned out to make the visitor experience as enjoyable as possible. This is achieved by leveraging visual cues to intuitively guide visitors through all of the website's functions with minimal steps and minimal confusion.

This design strategy is also known as UX design (user experience design) and it directly affects your website's ability to rank well in Google, so it needs to be optimized.

So now that you know the difference between these two strands of web development, who do you hire to create your Wordpress template?

If you hire a web developer, your Wordpress template may not look very appealing because it will just be comprised of the basic framework of a Wordpress template (web developers focus on website structure and functions remember). A web designer, on the other hand, will design your Wordpress theme from a blank canvas and then position all of the new design elements together with some fancy code work.

You should, therefore, hire a web designer to create your Wordpress template.

If you wanted to also customize the functions of your Wordpress template, you'd need to also hire a web developer. Your web developer and web designer would then work seamlessly together, the developer would code up all of the web functions of your template and the designer would code up the design of these functions. 

Because Wordpress allows you to permit access to multiple users, you can create a collaborative working environment between web developers, web designers and any other content contributors to create a Wordpress template that's as beautiful and as functionally complex as you like.

Just follow the same process outlined above to give a web developer access to your Wordpress website. They'll need administrator access to manipulate the code base.

Because CSS coding only affects the aesthetics of a website, this the codebase your web designer will be primarily tinkering with.

A lot of impressive aesthetic gymnastics can be achieved with some clever CSS coding, some aspects even slightly eclipse the functions of Javascript. Some examples include, sticky navivations, smooth scrolling, dark mode and even scroll snapping.

Scroll snapping is a particularly stunning visual effect that gently 'snaps' each segment of content into place while scrolling down the page, encouraging visitors to absorb each phase of the navigational journey. You can experience this stunning web design effect here.

An ordinary web designer will make your website look great, but an extraordinary web developer will captivate your visitors with dynamic display elements. So it's worth putting in the effort into hiring the right web designer for your Wordpress template.

How to hire a Wordpress template designer

When hiring a Wordpress template designer, you have 3 different options to choose from.

  • Option 1: Hiring in-house

The average web designer salary in the United States is $52,691

  • Option 2: Hiring via an agency

The price of a simple custom website design by an agency ranges from $15,000 - $20,000.

Complicated custom website design pricing ranges from $20,000 - $40,000

  • Option 3: Hiring a freelancer

The average web design project on Freelancer is completed for $220.94 USD.

As you can see, hiring a freelance web designer is by far the cheapest option. Unlike the other options, when working with a freelancer you're not burdened with any additional costs, such as over time rates and benefits. You're also not obligated to keep them on board throughout the entire year, hire freelancers for however long you need them, whenever you need them.

How to select the perfect freelance web designer for your Wordpress template

Besides the advantage of cheaper pricing, freelancer website designers also publicly display their pedigree of capabilities on their profile. So if a freelancer offers to complete your Wordpress template project you can cross reference their profile to confirm their skill level for the job.

Some key skills to look for in an ideal candidate are:

  • CSS

  • Graphic design

  • Website design

But you shouldn't have to rely on listed skills alone, freelancers usually display a portfolio of their completed projects to justify their skills. This is yet another advantage of working with a freelancer, you can select a candidate that has completed a Wordpress template design similar to what you are aiming for, The resulting trust will be further supported by their public rating based on previous employer experiences.

Besides the above 3 essential skills, there are 3 more highly desirable skills to look out for that'll make your project run nice and smoothly.

The first is Wordpress. The ideal web designer should be comfortable with logging in and uploading all of their design coding files without breaking any aspect of your website. The second is QA testing. A competent Wordpress template designer should be able to conduct a series of QA tests beyond the simple Theme Unit test.

The third skill is wireframing which we'll explain in detail shortly.

The best freelancer platforms allow you to chat with prospective freelancers before hiring them, which is a great opportunity to question their skillsets. On Freelancer.com you can send a direct message to any web designer that bids on your posted project.

How to work with a Wordpress template designer

So you've finally selected a highly skilled web designer to create your Wordpress template, and all you have left to do is to send them a description of your design requirements.

Pretty easy right?

No, actually it's not. 

The seemingly clear details of a design quite often get tangled up into a messy noodle soup of instructions when they transition from your mind to a text field.

Luckily, there's a better way of communicating web design requirements. Why describe pictures with words when you can describe pictures with...pictures?

This method of communication with web designers is highly efficient and will, therefore, result in the speedy overall completion of your project.

Web design specs (and also Wordpress template design specs) should be represented through a series of wireframes. There are two different styles of wireframes, low-fidelity and high-fidelity.

Low-fidelity wireframes simply indicate the position of all elements on a page relative to each other. The purpose of this wireframe design is to solely communicate the placement of all page elements without the distraction of detailed aesthetics.

Here is an example of a low-fidelity wireframe design.

low fidelity wireframe design

As you can see, every element on the page is represented by simple icons. Your initial Wordpress template design should look something like this. If you need inspiration for the placement of your website elements, research a few website designs you admire and then represent your preferred placement of elements in such a wireframe design.

Read this post to learn more about wireframing.

Once your web designer has a firm grasp of the structure of your proposed Wordpress template, they can then proceed to create a high-fidelity design which is a high definition exact replica of your final Wordpress template.

Here's an example of a high-fidelity wireframe design.

high fidelity wireframe designSource: Freelancer.com 

After you approve your web designer's high-fidelity design, they can then get to work coding it into a stunning Wordpress template.

Taking your Wordpress website to an expert level

A web designer can build you a Wordpress template that'll outshine the designs of your competitors, but why stop there? You can harness a spectrum of talents from multiple freelancers to create a Wordpress website that will completely blow your competitors out of the water. 

And unlike the logistical nightmare of working with multiple businesses, you can manage your numerous projects and their associated payments under the one convenient platform, Freelancer.com

Here's are some ways uniquely skilled freelancers can help you:

A web developer can ensure all of your web functions are operating correctly so that your website is making you money as it should be. They can also implement custom functions specific to your personal requirements.

A content writer can write content that explodes the pragmatic objections of your visitors, replacing them with an irresistible urge to plunge through your sales funnel.

An SEO expert will ensure your website is optimized to rank in Google search results and also craft an ongoing content strategy to keep climbing the Google ranks for hundreds and even thousands of keyword searches.

An SEM expert will create highly efficient paid advertising campaigns that will instantly drive traffic to your website while keeping your ROI margins nice and plump.

A social media marketing expert can create entertaining social posts that will incentify engagement and drive traffic to your Wordpress website.

Bleiben Sie auf dem Laufenden

Abonnieren Sie unseren Newsletter, um über wichtige Themen auf dem Laufenden zu bleiben.
Danke fürs Abonnieren! Behalten Sie Ihren Posteingang für unser nächstes Update im Auge.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Empfohlene Artikel nur für Sie
Struggling to come up with the best idea? Our exhaustive guide runs through the idea generation process to help you tap into your inner Steve Jobs.
10 MIN READ
Not all investors are created equal. We break down the top 5 scenarios a founder should reject funding.
6 MIN READ
Got a great idea for an app? Need a new way to grow your business? We tell you everything you need to know about building a mobile app in 2020.
16 MIN READ
If you're a developer with itchy coding fingers, but not sure which type of software you should develop, this post will give you some direction.
5 MIN READ