9 Helpful Things Designers Can Do in WordPress, No Problem

As a designer—particularly in a small company where roles tend to blur a little bit—my job definitely does not end with handing over a design to be developed.

There are many things I can set up within WordPress (our content management system of choice over at Wanderoak) that are very much connected to design and the usability, design, and content thinking I’ve been doing throughout the project. In many cases, I am in the optimal position to do these types of things.

Without further ado, here’s a list of those things. This is written for anyone who works on design, usability, and content-related things, but doesn’t have their hands in any code.

1. Create and Add Favicons / Site Icons

The favicon (AKA Site Icon in WordPress) is the little image that appears in your browser tab, before the page title. They’re very small, but they are super helpful when navigating to the correct tab. (Especially when we have a million tabs open, amirite?)

Favicon Specs (when uploading to WordPress)

  1. Square shape
  2. Image file (PNG or JPG)
  3. Minimum 512×512 pixels

With favicons, simpler is better. It’s such a small space that if you start getting too complicated with the icon you choose, it’ll look messy and indistinguishable. If you have a complex logo, don’t try and use it; instead choose a representative piece of your logo, or some other symbol or image that is associated with your brand.

How To Add Your Favicon in WordPress

  1. Once logged in, head to Appearance > Customize in the WordPress menu
  2. Click on Site Identity
  3. There will be a Site Icon section — upload your favicon there 

* There’s even a life-size preview so you can make sure it looks good before you hit Publish at the top.

2. Set Up, Arrange, and Customize Navigation

Navigation is one of those all-important things on a website. You may have already thought about the order of the navigation items, along with the particular wording that should be used, and you can absolutely make your planning a reality. Of course, being able to set it up also means you can go through your own testing, and make quick changes if necessary. Efficiency FTW!

The one thing you definitely need is for your developer to have already registered menu locations in the code (and to have styled the front end). Once this is done, you can go into WordPress and add everything as you like.

How to Check If You Have Menu Locations Registered

  1. Go to Appearance > Menus in your site admin
  2. Click the Manage Locations tab at the top
  3. You’ll see a list of the registered locations. You can then choose which menus you’ve already created to assign to those locations, or create new menus for those locations.

WordPress Menu Editing Basics

In the Edit Menus tab, you’ll see a dropdown at the top that allows you to select which menu you’d like to edit. (Remember to hit Select after you choose your menu from the dropdown. To this day I sometimes forget, and it can totally cause brief confusion.)

On the left you’ll find pages, posts, custom links (etc) that you can add to your menu. Once they’re added, you can rearrange them—and create submenus—by clicking and dragging.

Some Random Helpful Info

  • The name of the linked text in the menu doesn’t have to be the exact title of the page or post. You can change it for the menu! To do so, click the little arrow on the right side of the menu item, and update the Navigation Label. Changing this does not change the actual title of the page, it only changes the name within the menu. 
  • Clicking the Remove link at the bottom of an open menu item does not delete the page from your site; it simply removes the link to that page from the menu you’re currently editing. Similarly, deleting a menu does not delete the pages within the menu, only the menu itself (and not the location of the menu. If you delete a menu, the location stays and you can always create a new menu to assign to that location.)
  • Don’t forget to save your menu when you’re done editing it!
  • If you’d like to immediately preview your changes before making them live, you can edit your menu through Appearance > Customize > Menus instead (so much can be done inside Customize; you should check it out especially if you are a visual person).

3. Add Widgets to Widget Areas

A widget area is an area on a website (lets use a sidebar as example) that you can add blocks of content (called widgets, luckily for us) to. A widget can be almost anything, from a photograph to a email signup to a list of popular posts to a text area where you can write anything your heart desires. 

You can almost always find good examples of widget areas on recipe/lifestyle blogs. Take minimalistbaker.com (one of my favourite food blogs), for example. Here’s a photo with part of the current sidebar:

Image showing the Minimalist Baker sidebar widget area

The sidebar widget area contains a bunch of different widgets:

  1. Bio area — with a photo, some text, and a link to read more
  2. Social media icon links
  3. Email sign up call to action
  4. Free ebook call to action
  5. Short, visual list of the most popular recipes (not shown in photo)

These widgets can all be managed through the WordPress admin, without knowledge of coding. That includes editing them, rearranging them, deleting them, and even adding new ones.

How To Manage Widget Areas in WordPress

You can find out what widget areas you have available within your theme—and edit them—by going to Appearance > Widgets

On the left you’ll see a list of available widgets. Some of these are baked into WordPress, some are added through theme code, and some are added by plugins that have been installed. 

On the right you’ll see sections for each available widget area. They should have descriptive names like Sidebar and Footer. If you’re lucky, they’ll even have descriptions that explain where they are located, exactly. 

To add a widget to an area, drag it over to the area you want to add it to. Just like with the menus, you can drag and drop to arrange the widgets, and click on the little arrow to the right of a widget name to open it up and edit the available contents (which will vary depending on the exact widget you’re editing). 

Always remember to hit Save within a widget after you’ve made changes to it!

4: Set Up Nicely Designed Pages With Appropriate Headings

If you’re working on a site that uses an open content area, ever, you have the ability to make sure the content has all-important headings. If you do content-focused design, the design has been made for the content, you’ve hopefully set up heading styles and thought about how the content will be organized on the page. 

Well, you can absolutely go into WordPress and add in the headings where they are needed, and set up those complex pages that require a bit of design (even after the site is developed). 

This means choosing and adding headings, editing and adding in graphics and/or images, and making any necessary edits to the content organization to make sure the content hierarchy is maintained and there is an awesome reader experience.

Use all the tools you have been given within the code (at Wanderoak we build websites using components, which leaves ample room for designing pages within the theme) to make the pages look and act the way you’d like.

(Read through the SEO section below to make sure your headings and images are on point!)

5: Work On Search Engine Optimization

There’s much more to SEO than code-related things. In fact, a majority of SEO work has nothing to do with code at all.

Content Headings and SEO

Having headings to break up your content is really good — especially when those headings are descriptive. Try to avoid super long chunks of text. 

Important note: In the editor, WordPress allows you to select a Heading 1 and place it anywhere. Avoid this. There should only ever be one Heading 1 on a page, and it should be the page or post title (and if you’re using a WordPress theme, you can’t edit the appearance of these from within the editor). The developer would (or should) have made the page/post titles Heading 1 already, and you don’t want to add more of them to the mix. Keep the hierarchy.

Images and SEO

Images are relevant to SEO mainly because of speed. You need to compress and properly size images before uploading them to the server. It’s as easy as CCRRA. 😉 That stands for choose the best file type, compress, resize, rename, and add alt text — I wrote all the details in another article here on WSWG. Please go read it.

Optimize Your WordPress Posts

There are plugins you can use to help make sure your posts are optimized. Our plugin of choice is Yoast SEO — it adds a section in the editor for each post that helps you optimize that post for a specific keyword, edit the meta information (the title and description that show up on search engines), and edit how a post shows up when it’s shared on social media.

6: Set Up Google Analytics

There are a few different ways to set up Google Analytics. Our current favourite over at Wanderoak is by using the MonsterInsights plugin. You don’t have to mess with any code—you just install the plugin and connect it to your analytics account. 

MonsterInsights makes it easy to control some of your GA tracking settings as well, such as IP address anonymization and demographics.  

If you’ve never installed a plugin on WordPress before, it’s really easy:

How To Install a WordPress Plugin

  1. Go to Plugins > Add New in the WordPress menu
  2. Search for your plugin (in this case, search MonsterInsights)
  3. Click Install Now in your desired plugin’s info box
  4. Once it’s installed, the button will become blue and say Activate. Click that. 

Most plugins add something somewhere in your WordPress menu. MonsterInsights adds an option to the main menu (called Insights). Other plugins may add options to Appearance, Tools, or Settings (most commonly). 

To deactivate, delete, or update a plugin, just click Plugins. You’ll see a list of all the plugins currently installed on your website, and options of actions to take.

7: Optimize Your Images

I mentioned this in the SEO section, but it’s so important that I’m mentioning it again. Optimized images can mean the difference between a super fast website, and a super slow one. It’s a difference anyone can notice, not just those of use who do this kind of thing for a living. 

Not to mention, you want your website to be accessible to those on a poor internet connection, and you definitely want it accessible to those using a screen reader. 

So please, go read this post in full.

8: Configure Some WordPress Settings

There can be a lot going on in WordPress, but you happen to have a lot of control over some things you might not realize. A really good thing to do is familiarize yourself with the Settings section in the WordPress menu. Go check it out and see all the things you have control over. Some of them are self explanatory, but some could do with a little explanation/advice: 

Time Zone (General) — important especially for scheduling posts, as well as having the accurate meta date/time. When you schedule a post, it is based on the time zone here in your settings. If your timezone is off, your post will not be posted at the time you expect.

Your Homepage Displays (Reading) — either your latest posts or a static page. If you choose a static page, you then have the option of choosing which page, and then choosing which page will show your latest blog posts. This is entirely up to you, and depends on how you and your developer want to set the website up. 

Default Article Settings (Discussion) — this is where you control your default commenting ability. If you usually want comments off, make sure the allow comments checkbox is unchecked. You can override this default per post, but setting the default correctly will save you time headache later on. Note: this will only impact future posts, no posts you have already published. Turn turn off commenting on those, you’ll need to edit them (either individually, or by using the bulk edit field). 

Permalinks — yes, you have control over the URL structure your website uses. At Wanderoak, our recommendation most often is to use the Post name option, which looks like this: https://westartwithgood.co/post-name/. This makes your page and post URLs (permalinks) easy to type and easy to remember. Tip: avoid adding categories into your permalinks; if you change around your categories, your links will all be off and you’ll have to have redirects left, right, and centre.

9: Create Forms

You’ll likely want a form or two on your site. Depending on what you and your developer use to create forms, you’ll likely be able to do this all on your own. It’s another opportunity to control the experience, from field wording to confirmation pages to notification emails. 

If you have a bit of a budget, check out Gravity Forms. The functionality it has is huge, and it makes creating complex forms easy, even when payment is involved. I am always amazed at the complex-seeming things I can easily do with the help of Gravity Forms.