Tips and tools for professional WordPress website development

[sowmedia_posttemplates_heading tag=’h1′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_markup=” av_uid=’av-k7q1bh6w’ custom_class=” admin_preview_bg=”][/sowmedia_posttemplates_heading]

We see more and more often that internet businesses choose to use WordPress as standard CMS to build websites. We also come across many freelancers, just starting out, who place their focus entirely on WordPress. In this article we will make an summary of the best tools, techniques and plugins for developing WordPress websites that we have picked up over the years – and that we wish someone had shown us ten years ago when we first started working with WordPress.

Content

  1. WordPress development tools
  2. Standard plugins
  3. Developer plugins
  4. Cheatsheets
  5. Team work
  6. Stay up-to-date
  7. Finally

WordPress development tools

Over the years we’ve tested, used and thrown away lot of development tools. Which tools do we still use for developing WordPress websites?

  • Google Chrome
    Google Chrome has a powerful set of development tools that come standard. You can make CSS changes from the element-inspector, which means that you see the effect immediately before you make any changes in the css files. You can view existing JavaScript variables from the console or run new scripts. You can also view saved cookies, check the headers to see if your page is being cached and more. Mozilla Firefoxis a good alternative as well and offers many similar functions.
  • SublimeCoda
    Everyone has their own favorite text editor, but there are two that really stand out for us: Sublime and Coda. An important advantage of Sublime (Windows / Mac) is that it is that it is easy to expand, while Coda (Mac) is already very complete. In both editors it’s possible to change files directly on the server. This makes doing small, quick changes very easy.
  • FileZilla
    Maybe obvious, but maybe not at all. We use Filezilla daily for quick and secure FTP connections with our customer’s servers. Easy to use and ideal for quick changes. We do advise setting up a good version managed GIT workflow for bigger projects.
  • Browserstack
    You can use Browserstack to virtually test a website on any imaginable device. Like all desktop browsers on multiple Windows and OSX versions, but also all known Android devices, iOS devices and tablets. This is ideal for responsive tests, because simulations for mobile devices in desktop browsers tend to lack details. Browserstack also offers a Chrome extension, that you can use to simulate any website you visit on a different platform.
  • Ghost Inspector
    This fantastic Chrome extension makes it possible to record a numbers of steps on your website (for example: “visit homepage, click on ‘contact’, scroll down, fill in form”). The operations in these records are then regularly run by Ghost Inspector. If there are any abnormal results (for example a page is missing or the layout is different) you will receive a notification.
  • Photoshop
    Although you can do a lot in WordPress itself, Adobe Photoshop remains indispensable to our work. This is the favorite software package of everyone of our team members who works on design.

Standard plugins

Although every website is different, there are a few plugins that we use for every project. That is why we always install them for a new project. If we end up not using them we can always remove them:

  • Avia Framework
    This visual block builder is not available as separate plugin, but built into the Enfold theme (Dutch link). Very user friendly and makes it possible to build up content quickly.
  • Gravity Forms
    The most comprehensive form building plugin we know, with conditional logic, import/export function, various notifications etc. Many themes take this plugin into account in their styling.
  • io
    Make sure you have this plugin running before you upload your first image. That way you keep everything optimized.
  • Akismet
    Reduce spam on your website. Really a must-have.
  • Yoast SEO
    Helps you fine tune your SEO settings globally, and to easily make changes per page, to things like title and meta-description.

Developer plugins

There are many plugins for WordPress that simplify the development of your website. The most common plugins are listed here.

  • Password protected
    Protect your website with a password to prevent search engines and unwanted visitors from taking a look at your website before it’s ready.
  • Debug Bar
    Want to dig a little deeper into the code? The debug bar adds a button to your admin bar you can use to read various server variables, warnings,errorsqueries and requests. The Actions and Filters Addon makes it possible to see which hooks were triggered on your page.
  • Query monitor
    This plugin offers many of the same functionalities that the Debug Bar does, but also makes it possible to do targeted searches of the queries that were carried out, for example per plugin or kind of query, as well as sluggish performance.
  • Custom Post Types UI
    With this plugin you can easily make extra custom posts types. WordPress offers a number of posts and pages, but you may need an extra post type at times, for example ‘books’ for a kind of library. When you have set up the post type this plugin will have to remain active. To keep the number of plugins at a minimum and thus your website performance optimum we prefer adding post types via GenerateWP(see the ‘Cheatsheets’ below).
  • Advanced Custom Fields
    By default, you have a limited number of fields at your disposal in a message, page or custom post.Advanced Custom Fields (ACF) adds all sorts of extra fields; date planners, color pickers, taxonomy links, fields for extra images, you name it. ACF also works very visually and intuitively, so that you can prepare even complicated custom post constructions without using a single line of code. To then be able to use all the custom fields and show them on a page you can use short codes, or change the templates.
  • FacetWP
    This plugin allows you to create different filters to expand the search option for messages, pages and custom posts. This way your visitors are not only able to fill in key words in the search bar, but can also click on taxonomies (categories or tags) in a drop down or a selection box, to further specify the search results. Very interesting for large databases, with, for example, thousands of articles. You can put FacetWP to work, just like ACF, by using short codes and templates.
  • SearchWP
    Would you rather improve the standard search function in WordPress? Then SearchWP is our favourite This plugin indexes all of WordPress so that the results can be shown quicker. You can set the index to your own preferences. Choose, for example, which types of posts will be searched, which fields in a post are important or in fact irrelevant, whether or not to search for partial matches and much more.
  • P3 Profiler
    Is your website getting slower and slower? Use the P3 profiler to measure which plugins have the most impact on your load time. Sometimes it can help to get rid of a few plugins, to improve your website speed. Another solution is to choose super fastPremium WordPress hosting (Dutch link).
  • Broken link checker
    Before going live check to see if all the links on your website still work. Not missing anything, all external pages still available? You’ll get an e-mail if a link doesn’t work. You can even choose to have the check done regularly.
  • Redirection
    When you place your website online will you be replacing an old website?The older website has built up value in the search engines. To maintain as much of this value as possible you can redirect all the URL’s from the old website to the corresponding pages on the new website. This is a lot of work, but it is worth it. You can use the Redirection plugin, but in some cases a .htaccess file as well. Sometimes you can use one redirection rule to reroute multiple pages by using regular expressions (see the ‘Cheatsheets’ below) Dutch link.

Cheatsheets

There are many resources online dealing with developing websites, CSS procedures,  WordPress tweaks, typography etc. Below you will find a handy overview of cheatsheets we’ve saved in our favorites. Always good to have on hand.

  • Golden Ratio Typography Calculator
    Can’t figure out why your text is not very readable? Check your line spacing and font size with this tool. It will calculate the best line spacing, font size etc. based on things like the width of your content area.
  • Can I Use
    Just found a nice new CSS-feature? Want to use HTML5? Usecom to check and see which browser can/can’t use this code. Sometimes caniuse.com even gives fallback tips for older browsers. Look up ‘border-radius’ and then check the tab resources for an example.
  • comRegExr
    Website finished and you want to quickly add a few redirect rules to your htaccess file? Or are you programming and need to filter by pattern? If you are not familiar with regular expressions they can be headache inducing. txt2re.com helps by entering a string you want to match (for example an e-mail address, URL, telephone number or just a sentence). The tool generates suggestions of what a regular expression should look like. RegExr turns it around: input your regular expression and a piece of text and the tool shows you which parts of your example text match.
  • com
    A fantastically simple website that gives you the HTML code to embed things like YouTube URLs responsively. Also works for Vimeo, DailyMotion, Google Maps, Instagram, Vine, Getty Images and a normal iFrames.
  • w3.org
    Is the syntax of your website built according to the standards? The validator from W3 helps answer this question. Don’t let all the warnings scare you, a website that is 100% perfect is still just an illusion, especially when you work with themes and plugins. And yet, making fewer mistakes in your code makes your website more findable by search engines. A first tip: tick the box in WordPress ‘Automatically correct invalidly nested XHTML’ under General > Writing.
  • GenerateWP
    Need an extra custom post type for your website? Or want to add additional taxonomies to your page? GenerateWP walks you through a wizard and then gives you the code to place in the functiphp of your theme, super simple!
  • WordPress Code Reference
    The first place to go to look for hooks, functions and classes within It’s thephp.net for WordPress.
  • WordPress API’s
    A helpful overview of all API’s available for the WordPress core. Your code will be much more durable if you use these kinds of APIs. For example, by writing and and reading files via WordPress’s File system API your code will be better compatible with various server platforms.
  • io
    This website makes an attempt to inventory all the hooks for WordPress. You will also find all the actions and filters from a growing number of plugins and theme’s. This website has become a great resource for the better known plugins.
  • WcomWP Sniffer
    These two tools help you browse other peoples WordPress sites. You can see which theme is activated and what kind of plugins are running on the website. The picture it paints is not always complete, but it can help you find a underlying theme you like.
  • Google FontsAdobe Typekit
    A few years ago it wasn’t possible for all web browsers, but these days, in theory, it is possible to use almost every font on your WordPress website (which doesn’t mean that all fonts are ideal, load quickly or are readable on your website). Google fonts offers a growing selection of free fonts that you can use. If you are looking for a very specific font then Adobe Typekit may be a better option. You will pay an annual price, depending on the font. Lastly, you can turn your own fonts into web fonts. With the Webfont generator by Font Squirrel, for example.

Teamwerk

To keep the ball rolling for larger projects there is almost no escaping teamwork. The following tools really help us develop our WP websites in team.

  • Google Apps
    The complete suite of Google services is also provided for companies under the name ‘Google Apps’. E-mail, agenda’s, hangouts, analytics and contacts all run on user-friendly Google software, but under your own domain. Various extensions for Gmail (like Labelizer) make it possible to share e-mails within your team by using labels. We use this tool as task system at the moment.
  • LastPass (Enterprise)
    Indispensable when it comes to the safe keeping of your login details and those of your clients. Thanks to LastPass Enterprise we can also easily share logins within the team or change them safely. Very affordable and used by large companies like MailChimp and
  • GitLab
    To keep self-written code orderly and simple, we use GitLab as a version management system. GitLab is really a kind of open source GitHub alternative you can host yourself. By using GitLab multiple team members can work on the same project without getting in each other’s way.
  • Toggl
    A good timesheet isn’t just something your customers will appreciate; it helps you get better at estimating where the most time goes in a project. That’s why we use Toggl to track the hours we spend on a project. That way we can see, per project, if we are on schedule with our hours or if we need to make changes. Above all, customers gain insight in the time that was spent and how. Time tracking isn’t fun to do, but it is important.
  • Teamwork Projects
    For project management we used to use Basecamp Classic, a relatively old system (in internet terms). At a certain pointBasecamp Classic stopped meeting our needs because it wasn’t further developed. Teamwork Projects made it possible to transfer our entire archive from Basecamp Classic, so that we could keep all the history of our projects. Colleagues and customers can get access per project. There are to-do lists, where each task can be assigned to a colleague or customer.  You can confer with all involved parties per task. You can share files, messages and important milestones.

 

Stay informed

The WordPress landscape is constantly under development. To stay informed regarding new features, as well as upcoming changes, we recommend you put these websites in your bookmarks or subscribe to their mailinglists.

To close

Now that we have covered all kinds of tools, techniques, plugins and tips for WordPress, we would like to emphasize the most important tip we like to give WordPress professionals: keep it simple! Especially when you’re thinking of using a technically clever solution, always ask yourself: ‘is this not already lying around somewhere?’. Often the answer is yes, and your customers will be happy they don’t have to pay for re-inventing the wheel.  This will also enable you to spend more of your budget on making sure the content of the WordPress website is just right, and that is often more valuable to your client.

Do you use tools we haven’t named? Let us know in a response below!

WordPress plugins for main menus

[sowmedia_posttemplates_heading tag=’h1′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_markup=” av_uid=’av-k7q1bh6w’ custom_class=” admin_preview_bg=”][/sowmedia_posttemplates_heading]

It is incredibly important to have good navigation on your WordPress website. In this article, we’ll discuss the different types of main menus, and some navigation plugins you can use on your WordPress website.

We’ll look at the following types of navigation menus:

Some links in this article contain affiliate code.

Default menu


A default main menu on a website simply consists of a row of buttons, for example ‘Home, Services, About us, Contact’. Essentially all WordPress themes support a default WordPress menu (except for some one-page themes). So, there’s no need to install any extra plugins for this navigation menu.


An example of a default menu

Horizontal or vertical menu?

A default menu can be placed either horizontally or vertically. Horizontal main menus are very common in WordPress themes, but if you want a really nice vertical menu, check out the free WordPress theme TwentyFifteen. Do you want the option to change from a horizontal to a vertical menu and back? Then it’s best to choose another theme. Don’t want to say goodbye to your beloved theme and still want a vertical menu? The plugins below are really worth giving a try:


A submenu is a menu that unfolds when you move your mouse over, or click on a main menu item. This gives you the possibility to include secondary menu items in your navigation menu that are not visible all the time. It keeps your main menu accessible and makes your layout more flexible. Plus, with WordPress you can create submenus for you website by just dragging and dropping.

Submenus are supported by almost all themes. Does your WordPress theme not support submenu? Below we’ll discuss a few plugins that can help you out.


Megamenu


A default submenu consists of 1 column of items. A megamenu offers the possibility to divide items among several columns, sometimes even with titles over every column. Also, megamenus frequently provide additional display options for the unfolded spaces, like a piece of text, forms, images, video’s, Google Maps, etc. By using a megamenu, you’re giving visitors an attractive navigation.

Our three favorite WordPress plugins for megamenu functionalities are:

Overlay menu / Full size menu


An overlay menu is not immediately visible, but appears when you click on a menu icon. The menu then covers the entirety of the screen. In this, an overlay menu looks very much like a mobile menu (see below), but it is also meant for larger screens. An overlay menu is useful when you don’t want the menu to distract too much when looking at the website, and vice versa, when the website shouldn’t distract while selecting something from the menu. Also, at times an overlay menu is used to make sure the user experience is the same on all devices, whether you’re on a mobile phone or on a desktop computer.

The following three plugins offer overlay functionalities:

Mobile menu / Hamburger menu


Obviously, your website should also (or especially!) work on mobile devices. Luckily, WordPress themes are almost all responsive, which means the screen width determines your website’s layout. Not only your website, but also your navigation menu should, of course, work properly on a mobile device. With the plugins below, you can make a separate design for your mobile menu and for larger screens (desktops and laptops). This may help improve the user experience, because you can give your mobile visitors just the menu items they need.

Thrive Themes: conversion-focused WordPress platform

In one week, three different people enthusiastically suggested ThriveThemes to us. It was time for a review: did we miss something? (Yes, we did!)

ThriveThemes is a company that offers themes and plugins that help you achieve a higher conversion on your website: like inviting your website visitor to become a reader of your newsletter. This way, you build a relationship with your readers, which allows you to convince them to become one of your customers. This makes ThriveThemes a good provider, especially if you want online results and you’re not afraid to do a bit of marketing. Below we will briefly discuss their themes, content builder ad leads plugin. These three elements form a complete and conversion-focused WordPress platform.

Some links in this article contain affiliate code. When you are a customer of Sowmedia you can use Thrive for free. 

ThriveThemes

The themes from ThriveThemes have simple designs, and focus on conversion. If you are looking for a theme that contains the latest innovations in design, then ThriveThemes is not what you are looking for. Are you looking for a fast website, that is easily made and focusses on online results? Continue reading.

The advantages of a Thrive theme:

  • Light code and automatic image compression that allow your website to load faster. They use Kraken.io for this, which normally costs $9,- per month, but is included, so it’s a nice cost reduction and one plugin less.
  • You can indicate “targeted focus areas”. This means, elements that stand out, such as a special offer to your visitors. Or forms that generate more clicks, which you can link to your favorite mailing list.
  • The readability of the themes has been optimized with enough white space and large, clear, legible letters.
  • The themes contain a landing page in the same design style, but without any of the website items. So, the header, navigation, links, sidebars and footer widgets don’t show, to keep the visitor from being distracted.
  • Completely mobile responsive and suitable for retina. Fonts, columns and icons scale nicely when changing screen size.
  • Fast loading social sharing buttons
  • Fast loading related messages, because they don’t generate while visiting the message, but while saving the message
  • Good integration with the Thrive Content Builder.

Thrive Content Builder

The Thrive Content Builder allows you to edit your website at the front end. This means, you can see what a text is going to look like while you’re typing. So, What You See is really What You Get. At first, it takes a bit of fidgeting to get the element in the right place. But practice makes perfect. You can use the Thrive Content Builder in any theme, so also when it’s not a theme from Thrive. For people with HTML knowledge, it is possible to see the entre code in HTML. You don’t really need this, but it can give you more insight, which is nice if you know how to work with HTML. The HTML code is very clean, by the way.

The elements included in the Thrive Content Builder are:

  • Lists with bullet points in various designs
  • Columns
  • Embedding Responsive Video
  • Easily building HTML tables
  • Feature Grids (blocks with images or icons)
  • Content Tabs & Toggles
  • Option to add Google Maps code
  • Stars for reviews
  • Countdown Timers
  • Opt-in Forms
  • Automatic table of contents in a page
  • Adding your own HTML & CSS

As you can see they have again chosen to not offer every functionality imaginable. If you are looking for a content builder with more and more enhanced functionalities, we always recommend Enfold or one of the themes from Elegant Themes. Are the abovementioned elements enough to show all your content, then the Thrive Content Builder is definitely recommendable. The great advantage of the Thrive Content Builder is that you immediately see the result. So, you don’t have to switch back and forth between the front and the back end. Also, it’s nice that the Thrive Content Builder offers several landing pages. These are pages without the regular elements, that focus entirely on getting results (for example: signing up for a course, newsletter, etc.). Sadly, it is not very extensive and the design can be a bit plain. So, I particularly recommend the Thrive Content Builder to those who are now using a rather user-unfriendly theme that doesn’t offer any nice conversion-focused elements.

Below I will show a short video on how to make a new page with the Thrive Content Builder.

Thrive Leads

With Thrive Leads you can create different opt-in forms and/or special offers with a drag and drop editor. Even if you are not using a Thrive Theme or Thrive Content Builder, this can be a very nice supplement to your current WordPress website. With Thrive Leads you can generate leads more easily by using ‘forms’. There are various forms:

Popup Lightbox
tl-form-type-1

A lightbox that opens on your page

“Sticky” Ribbon
tl-form-type-2
At the top of your page a clear deal or offer.

In-Line Forms
tl-form-type-3
A form at the bottom of your page.

2 step opt-in form
tl-form-type-4

This form will show in a light box, when you click a button.

Slide-In
tl-form-type-5
This form slides into your page.

Opt-In Widget
tl-form-type-6
This way you place a form in a widget.

Targetting with Thrive Leads

targeting-3hrough targeting, you can indicate where and when you want a form to show. For example, with all messages/pages, or just with a certain message category or only with a certain message/page. This is convenient, because you can create an offer that is relevant to the content shown. In Thrive Leads, you can see which are your most important messages (the ones that create the most traffic) and for those messages you can make a specific offer (also called “content-upgrade”).

A/B testing with Thrive Leads

With the A/B testing engine you can test different forms/offers. You can test different designs & content. You can test triggers, for example a popup after 3 seconds, or when the visitor as scrolled down 50%, or when it looks like the visitor is about to leave the page. Also, you can test the results of different form types. For example, a lightbox popup vs. a Slide-in form. The great thing is, that you can configure this all at once and then Thrive Leads automatically lets you pick a winner, as soon as enough data has been collected. In the video below, Thrive Leads is explained further.

Want to try ThriveThemes?

The proof of the pudding is in the eating. Do you want to try ThriveThemes, Thrive Content Builder and/or Thrive Leads? When you are a customer of Sowmedia, you can use the whole package for free. Call us (010-4654444) or send us an e-mail. Not yet a customer? Get our premium hosting and you too will get the whole package for free. This way you save $147,- per year. Place a comment on your experience with Thrive below. We’d love to hear from you!