Skip to main content

WordPress Integration

Deep dive into how TheDock integrates with WordPress.

Overview​

TheDock is built for WordPress from the ground up. It respects WordPress conventions while providing a modern visual building experience.

Posts and Pages​

Dynamic Content​

TheDock templates can display WordPress content dynamically:

  • Post Loops - Display lists of posts
  • Single Post Content - Show individual post/page content
  • Featured Images - Display post thumbnails
  • Post Meta - Show dates, authors, categories

Post Loop Block​

The Post Loop block displays multiple posts:

SettingDescription
Post TypePosts, pages, custom types
Posts Per PageNumber to display
Order ByDate, title, menu order, random
Categories/TagsFilter by taxonomy
LayoutGrid, list, masonry

Page Content Block​

Displays the main content of a page/post:

  • Renders WordPress editor content
  • Respects formatting and embeds
  • Includes Gutenberg blocks

WordPress Menu System​

TheDock uses native WordPress menus:

  1. Create menus in Appearance > Menus
  2. Assign locations in TheDock

Configure in C. Build > Menu Locations:

LocationTypical Use
PrimaryMain navigation
SecondaryTop bar links
FooterFooter navigation
MobileMobile-specific menu

Using Menus in Templates​

Navigation blocks reference menu locations:

  1. Add a Navigation block
  2. Select the menu location
  3. Style the navigation

TheDock supports:

  • Multi-level menus (dropdowns)
  • Custom link classes
  • Menu icons
  • Mega menus (with configuration)

Post Thumbnails​

TheDock fully supports WordPress featured images:

  • In loops - Thumbnails for post listings
  • In singles - Hero images for individual posts
  • In headers - Dynamic background images

Image Sizes​

WordPress generates multiple image sizes. TheDock uses:

SizeTypical Use
ThumbnailSmall previews
MediumInline images
LargeFull-width images
FullOriginal size
CustomTheDock-specific sizes

Responsive Images​

TheDock outputs responsive srcset attributes for optimal loading.

Widgets (Legacy)​

While TheDock provides better alternatives, WordPress widgets are supported:

Widget Areas​

Define widget areas in Theme Functions:

<?php
register_sidebar(array(
  'name' => 'Sidebar',
  'id' => 'sidebar-1',
  'before_widget' => '<div class="widget">',
  'after_widget' => '</div>',
  'before_title' => '<h3 class="widget-title">',
  'after_title' => '</h3>'
));

Using Widgets​

Add a Widget Area block in your template to display widgets.

WordPress Settings​

Reading Settings​

TheDock respects WordPress Reading settings:

  • Homepage displays - Static page vs latest posts
  • Posts per page - Default post count

TheDock templates work with any permalink structure.

Discussion Settings​

Comment templates integrate with WordPress discussion settings.

WordPress Hooks​

TheDock fires WordPress hooks appropriately:

Template Hooks​

<?php
// Header
wp_head()
wp_body_open()

// Footer
wp_footer()

Content Hooks​

<?php
// Before/after content
the_content()

Custom Hooks​

Add your own via Theme Functions:

<?php
do_action('my_custom_hook');

WordPress Conditionals​

TheDock templates can use WordPress conditionals:

Common Conditionals​

ConditionalTrue When
is_front_page()Viewing homepage
is_home()Viewing blog page
is_single()Viewing single post
is_page()Viewing a page
is_archive()Viewing archive
is_search()Viewing search results
is_404()Viewing 404 page
is_user_logged_in()User is logged in

Using in Templates​

TheDock allows conditional visibility:

  • Show/hide sections based on conditions
  • Different content for logged-in users
  • Device-specific display

Multisite Support​

TheDock works with WordPress Multisite:

Considerations​

  • Each site has its own TheDock configuration
  • Theme can be network-activated
  • Configurations are site-specific

Network Setup​

  1. Network-activate TheDock plugin
  2. Configure each site individually
  3. Or set up a "base" site and clone

WordPress REST API​

TheDock can integrate with the REST API:

Using API Data​

Custom blocks can fetch API data:

fetch('/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(posts => {
    // Render posts
  });

Custom Endpoints​

Register custom endpoints in Theme Functions:

<?php
add_action('rest_api_init', function() {
  register_rest_route('mytheme/v1', '/featured', array(
    'methods' => 'GET',
    'callback' => 'get_featured_content'
  ));
});

Gutenberg Compatibility​

Block Editor Content​

TheDock renders Gutenberg blocks correctly:

  • Block content displays in templates
  • Block styling is respected
  • Custom blocks work

TheDock vs Gutenberg​

TheDockGutenberg
Theme-level designContent-level editing
Page templatesPage/post content
Design systemIndividual blocks

They complement each other:

  • Use TheDock for templates and design
  • Use Gutenberg for content editing

Performance​

Optimization Features​

TheDock includes:

  • Minified CSS output
  • Optimized asset loading
  • Responsive image handling
  • Clean HTML structure

Pair TheDock with:

  • Caching plugins (WP Super Cache, W3TC)
  • Image optimization (ShortPixel, Imagify)
  • CDN integration (Cloudflare)

Troubleshooting​

  • Verify menu is created in WordPress
  • Check menu location assignment
  • Ensure template has navigation block
  • Verify images are set in WordPress
  • Check image size settings
  • Verify template uses featured image block

Content not displaying​

  • Check Post Content block is in template
  • Verify correct template is assigned
  • Review WordPress editor content

Hooks not firing​

  • Ensure export is complete
  • Check template structure
  • Verify functions.php isn't overriding

← Back to Documentation