TheDock offers a unique way of crafting fully bespoke WordPress themes without writing a single line of code. From vision to completion, even the smallest details are carefully considered. It ships with suggested styles and layouts based on real world experience and in-depth knowledge and integrates tightly with native WordPress features such as the new Block Editor (known as Gutenberg). TheDock aims to be the only resource you need to create virtually any website within the WordPress ecosystem.

The key concept behind TheDock is to offer a workflow that mimics the way a web studio would tackle building a website in WordPress. It has been created to be your own in-house team, from designer to developer, depending on your needs;

For the designer, our layout and theme features provide a visual tool that lets you easily turn your ideas into a functional theme.

For the developer, our design features will guide you to a functional and aesthetically pleasing appearance, without limiting you from adding your own custom features where you see fit.

Developed in close collaboration with experienced and respected designers and front-end developers, TheDock offers a system for applying your aesthetics to a Theme by working with key design aspects such as Typography, Color and Spacing. We believe that good design pays careful attention to these aspects and we offer a range of pre-defined options that follow best practices for each of them. If you have very specific needs, TheDock also lets you extend your Theme with your own code for unlimited creative freedom through our Custom CSS panel.

In modern web development terms, TheDock works a lot like a Pattern Library. Your Design is controlled through one library, which makes editing your Design easy. All changes to the pattern are instantly applied to your Layout preview (while you need to Export your Theme in order for the changes to manifest in your site).

For those who prefer a helping hand, through our Design Presets, TheDock ships with a multitude of stylistic presets.

TheDock’s approach to typography is to provide a rich set of stylistic options while assisting you in making sure your type is both always legible and scaled according to your aesthetic choices. Visual hierarchy is key in any typographic system, and TheDock therefore provides a rich set of typographic rules for you to control for each of the five type sizes from WordPress’ Block Editor. These sizes can then be applied to any heading or text.

TheDock uses a palette of up to five colours that are applied throughout your theme and to all preset layouts and sections. To ensure accessibility, TheDock calculates contrast between the colours of the palette and sets text colour for optimal legibility.

TheDock uses a flexible system to create your layout, but to help you remain consistent and stringent in your design, a set of options for width and spacing are used in tandem with a 12 column grid.

TheDock’s Layout Builder is where the design experience really reaches new heights. Starting from one of our presets or starting fresh, you create your own set of Templates to be used in your Theme. Your Templates can be used for one or more of your theme’s Content Types, ensuring a good balance between flexibility and usability.

The structure of Templates are made up of three main levels; Sections, Areas and Blocks.

The topmost level in our Templates are Sections. In Sections you control things like background color, minimum height and which type of layout to be used in that Section. A Section can be either a regular grid (giving you intuitive control of how to lay out Areas), an automatic Masonry grid (intelligently stacking Areas to fill the space as tight as possible) or a Carousel (automatically fitting your Areas into slides in a slideshow).

Every Section contains Areas. These are all laid out on a Grid. The Grid has a number of settings that you can change, some of which are the same as for Sections, such as width and background color. Nesting the Grid within a Section gives you great level control of your layout.

The Areas created on the Grid are the heart of your layout. They hold the Blocks that make up your content, such as texts and images, and they control the positioning on the Grid itself. Each Area has settings for width, background color etc, again adding a great level of control. The main difference to Sections and Grids is that you can have more than one Area in each Grid. In contrast to the Section and the Grid, the Areas are also responsive to the width of the visitor’s screen, making your layout responsive.

Another key feature of Areas is the ability to repeat them in a Loop. This means that whenever you want to list eg. Posts, you only need to define the layout for one Area, and then set the number of times that same Area is repeated. TheDock will automatically generate the correct content for the Blocks in each Area, as long as the Blocks have dynamic sources defined (read more about dynamic sources under Blocks below).

The concept of a Loop is well established in WordPress theme building and technically, a looping Area will be exported as a custom query and a loop over the results in your template.

Each Area can hold any number of Blocks. These are the same images, texts and so forth as in the WordPress Block Editor, further tying the experience of TheDock to WordPress core. In addition to styling all content, you can also tie each Block to a dynamic WordPress source, either a WordPress core data field or a custom field. Your main heading in a Template can for instance be your Post Title, but your Event Location heading can be a Custom Field.

TheDock is a brand new way of experiencing WordPress: a hybrid between a theme and a plugin. While there are many services offering designers tools to build everything from wireframes to landing pages, TheDock offers a unique experience of crafting templates intended to be used as WordPress Theme as well as tying them to your WordPress data. The heart of TheDock is the React-based plugin, TheDock Builder, in which you create your site. With all of the heavy lifting being done in the plugin rather than in the output Theme, the result is a very performant and reliable site.

Each theme created with TheDock produces a bespoke child-theme on export, avoiding the usual bloat in similar theme builders and making it the first commercial product with output that can be compared to a theme built from scratch. Since all templates are generated based on your custom Layout, the code follows WordPress codex and syntax as closely as possible. The same goes for the generated code – it is intended to be as legible as possible to developers, to ensure that it’s easy to continue to work on your Theme, when functionality that is unavailable in TheDock is needed.

The division into a Theme and an Editor plugin enables you as a website creator to simply uninstall the Editor, offering your end-user a pure WordPress theme, without the Design and Layout options of TheDock’s Editor. This way you can offer your client a professionally built WordPress theme with a custom code base, yet allowing them to only interact with their content through the regular WordPress interface.