𝗥𝗲𝗯𝘂𝗶𝗹𝗱𝗶𝗻𝗴 𝗮 𝗗𝗶𝘃𝗶 𝗕𝗹𝗼𝗴 𝘄𝗶𝘁𝗵 𝗖𝘂𝘀𝘁𝗼𝗺 𝗦𝗵𝗼𝗿𝘁𝗰𝗼𝗱𝗲𝘀

I recently redesigned the blog for Rev6, a fitness platform using WordPress, Divi, and Cloudways.

I did not use the standard Divi Blog module. It lacks the control needed for custom URL routing and membership features. Instead, I built a system of custom shortcodes in the child theme.

This approach keeps the logic in versioned PHP instead of hiding it inside a page builder database.

The setup uses these shortcodes:

  • [rev6_blog_sidebar] for navigation and search
  • [rev6_sort_dropdown] for sorting
  • [rev6_post_grid] for the layout
  • [rev6_author_bar] for the byline
  • [rev6_author_bio] for the author section
  • [rev6_related_posts] for more reading

Here are my technical takeaways from this build:

  1. Avoid lazy CSS grid hacks I once used "grid-row: 1 / span 999" to make a sidebar span the whole page. It created thousands of empty rows and massive whitespace. Use named grid areas instead. It is cleaner and safer.

  2. Check your data before your code I spent time debugging a "related posts" section that would not show up. The code was perfect. The problem was the data. The category only had one post. My code excluded the current post, leaving zero results. Always verify your database content before you hunt for bugs in your functions.

  3. Understand the split between files and database When I migrated from staging to live, the layout looked wrong. I tried fixing it with CSS, but that failed. The issue was that imports move templates, not database content. Things like module widths and post assignments live in the database. If the layout differs after a migration, look at the database, not the stylesheet.

  4. Never push a full database to production A full sync overwrites real user data like orders and registrations. Use targeted transfers instead of a blanket push.

  5. Cache is step zero On optimized sites, CSS optimization tools often strip out styles they think are unused. If your styles look half-applied, clear your cache and regenerate your CSS first.

The redesign is live. It features a clean editorial layout and a custom author system. The code was the easy part. The environment provided the real lessons.

Source: https://dev.to/highcenburg/rebuilding-a-divi-blog-with-custom-shortcodes-a-field-report-141g