How to Integrate a Custom Design into WordPress
You have a beautiful custom design for your website. It’s branded and unique, making sure your business stands out and is remembered by customers. But now you need to get that design into WordPress so that it can be easily updated by a non-programmer.
You won’t just need a programmer for this, though, you’ll need someone who can program the backend, understands WordPress, and has an eye for design elements so they stay true to what’s been design. If you’re looking for a developer that you can just hand off the design to, contact us!
For those who want to be a little more hands-on or want to know exactly what to look for, read on for our strategies and breakdown of custom themes below.
Strategies for Integrating a Design into WordPress
Integrating a custom design with WordPress is done by creating a custom theme for the site. How you approach integrating a design into a WordPress theme is incredibly important to the success of the integration. These are the principles to keep in mind:
- The design should not be editable by the content editor except for a pre-determined narrow range of choices.
- Use the standard functionality of WordPress.
- Do not use standard functionality in a non-standard way.
- Integrate items into the obvious place they belong.
1. The design should not be editable by the content editor except for a pre-determined narrow range of choices.
A custom design is specific. It’s been branded and has the stamp of approval by the powers that be. Whomever will be editing content (adding company employees, adjusting office hours, writing blogs, editing page text/images) should not be able to change this design. This requires striking a balance between flexibility for the content and rigidity of the design. A content editor should be able to edit text and images and add new items; they should be able to edit the order on the page. They should not be able to use any colors they want or arbitrarily change font size or font family. Providing a narrow range of options within the design will keep everyone happy long-term.
2. Use the standard functionality of WordPress.
WordPress provides an extensive number of features and options. For example, the custom post types (CPT) allow you to create any number of additional sections of the site like a list of board members, projects, or testimonials. By integrating your functionality needs into WordPress correctly, you can take full advantage of the CMS’s programming. Any added-on functionality should be simpatico with the core functionality of WordPress.
3. Do not use standard functionality in a non-standard way.
Using standard functionality in a non-standard way can lead to major issues both in the ongoing maintenance of the site and in the long term requirements in the future. While WordPress is incredibly flexible, replacing a standard setup can lead to poor admin UI, difficulty updating items, and reduced flexibility. The most common example of this is using widgets to lay out a page instead of utilizing an appropriate page builder of some kind. While widgets can add additional functionality to the page (through an add-on in a page builder), creating a theme that is wholly reliable on the widgets for the layout of the page is lazy WordPress integration.
4. Integrate items into the obvious place they belong.
Integrate all designs into the area where they are expected.
Finally, you should strive to integrate all designs into the area where they are expected. If there is a menu, it should be integrated into the Appearance > Menus section. If there are page templates, support page templates in the theme. CPTs should be used for multiple items of one type that will be used in multiple places on the website. Don’t put page layouts in the widgets section; don’t put menus under a CPT; don’t put the logo for the site in a page.
Making sure you follow these four rules of integrating a custom design into a WordPress theme can keep frustration down and allow for easy expansion in the future.
The Parts of a Custom Theme
The WordPress theme controls how the front-end of the website looks to the user, while the backend will look like a standard WordPress backend (unless it is also themed!). This provides a simple structure for editing the site, while also providing the ability to completely customize the look and feel of the website for users.
WordPress Menus
There are quite a few options when it comes to integrating menus into WordPress. The most basic menus can be integrated into the Appearance> Menus section of WordPress. This provides multiple menu options (footer, header, and adding them to widgets) and the ability for the editor to drag-and-drop pages, rename, and add new ones.
But a larger menu, fly-outs, image previews, or simple image add-ons on the menu can require a different approach. Will you utilize a plugin? Or will it be built into the WordPress system completely? While using a plugin can give you more to work with, integrating it into the theme can allow for easier updates. The final system should be as simple as possible, minimizing the use of plugins while also being intuitive for the content editor.
The final system should be as simple as possible.
Widgets
Another basic part of a custom theme is utilizing Widgets. Widgets should be used sparingly and only when absolutely necessary because they don’t have the extensive functionality that other options provide. They also provide the worst usability structure within the WordPress admin system. Typically, the footer and a sidebar are most useful integrated as widgets. It could also possibly be used on a top bar of the website (above the logo and menu), but there are generally better ways to integrate this section.
Using a Page Builder or Custom Fields
For a custom design, you’ll need to use some kind of page builder or custom fields to lay out the information on a page. A page builder plugin, like Divi, Elementor, or Visual Composer, can provide a way for the content editor to use a drag-and-drop interface. In fact, a page builder will often have an option to edit the page within the actual visual page. This can be very helpful for the person keeping the website up-to-date.
However, the downsides of a page builder plugin is the amount of options it displays. It can be hard to find what you’re looking for, and difficult to customize it to match the design every time. It also requires considerably more effort to integrate a design with a page builder because it requires you to design for every option in the page builder plugin.
Alternatively, you can use a setup like Advanced Custom Fields Pro (ACF). This plugin allows you to customize the modules or rows in the design, and only provide the options and content areas that will need to be chosen/edited in the future. This setup keeps the design tightly constrained to the original, but can also be infinitely extended as needed in the future. There is no visual setup provided here, but you can add a preview image of the modules you create with a tiny bit of coding in the functions.php page.
A view of the flexible module layout in ACF Pro for the pages in the WordPress Admin, slightly customized.
Utilizing the Options Page
While integrating a design into a WordPress theme, the biggest question you’ll need to ask for each section of the design is this: is this information repeated somewhere else on the site?
Answering this question correctly can provide you with the best integration possible. If something is repeated elsewhere, you’ll need to either create a CPT, a module system that can be saved and edited in one place (ACF), or add this item to the Options page. You can easily create an options page inside of WordPress or by using the ACF Pro Plugin. You should add the logo, social media accounts, phone numbers, addresses… essentially anything that is a single piece of information repeated in multiple places.
Is this information repeated somewhere else on the site?
Extending WordPress with a Custom Post Type (CPT)
A custom post type should be used anywhere you need to group information into one type, but also have multiple pieces of information associated together. A good example of this would be creating a list of employees where each employee has a name, short paragraph about them, image, and possibly social media. You want to put these items into a CPT because it will keep the information organized and in one place. WordPress also provides an easy way for you to display this information on the page using a custom loop.
By integrating information like this, you’re fully utilizing WordPress’s built-in functionality.
What to Remember When Creating a Custom Theme
Remembering the four principles can allow you to create an easy-to-use WordPress-integrated design:
- The design should not be editable by the content editor except for a pre-determined narrow range of choices.
- Use the standard functionality of WordPress.
- Do not use standard functionality in a non-standard way.
- Integrate items into the obvious place they belong.
And lastly, integrating a custom design into WordPress requires the programmer to stay true to the design and the design structure. Always start a project with a meetup between the designer and the developer to make sure the developer knows the concepts behind the design.
Need some help making your design live? Contact us at 661-306-4443 (phone or text) or at Kim@WhiteFoxCreative.com to make your custom design become a reality online.
