Migrating your Sitecore frontend to WordPress
With the key project logistics out of the way, let’s dive into the actual Sitecore to WordPress migration process.
To begin, you’ll start working on the frontend.
This process starts with evaluating the current design, assessing how it can be effectively recreated in WordPress, and identifying any opportunities for improvement along the way.
Auditing the frontend
After you’ve determined the architecture of your WordPress setup, it’s time to evaluate the frontend so it can be moved over to WordPress.
By the way, at this stage, you may also want to consider a redesign or refresh, since you’ll be recreating the frontend entirely from scratch anyway.
So let’s see you can rebuild your user-facing experiences as you move to WordPress from Sitecore.
The theme
If you want to retain your existing design, the best way to go about it is to create a custom WordPress.
In most cases, a custom WordPress theme can replicate the exact look of your existing Sitecore website’s frontend, down to the pixel.
In case you go with a redesign, again, you can create a WordPress theme from scratch.
Templates
It’s likely that you may have added or customized the existing Sitecore templates for setting up your marketing collaterals like product pages, landing pages, case studies, and more to your website.
With WordPress, you’ll need to recreate these templates using WordPress’s custom posts feature. WordPress’s support for custom posts combined with the Gutenberg editor gives you lots of design possibilities inside the CMS.
Finally, you’ve to think at the component level.
Components
In addition to templates, you’d probably also have components on your Sitecore website that would let you add quick design blocks to your blogs and pages. Think components for content like testimonials, pull quotes, FAQs, etc.
To move these design elements to WordPress, you’d have to think at the block level, components on Sitecore are blocks on WordPress.
| Side note: When you get to the actual migration stage (as we will in just a bit), you can have a frontend team dedicated to just recreating your design. This team can focus on recreating your web front while the other teams work on the rest of the migration (the backend/integrations and the content). |
In addition to these considerations:
Look at any design elements you’re currently adding to Sitecore through custom code or third-party design widgets (like sliders, timelines, pricing tables, and more). These may need custom coding on WordPress as well.
Similarly, any frontend elements rendered through third-party solutions—such as videos from Vimeo—should also be factored into the migration process.
Essentially, anything that appears on your frontend needs to be adapted for WordPress.
As you can see, this process is largely manual.
Since you’re moving to WordPress and building your website’s frontend from scratch—whether you’re redesigning or not—now’s the perfect time to think modularly about your design.
By doing this, you won’t just end up with a WordPress theme.
Instead, by recreating your design block by block, approaching your frontend with Gutenberg blocks, you create much more than a theme—you build a fully branded page builder that has all the blocks you need to create stunning pages and marketing collateral in minutes, without needing IT support.
So keep that in mind.
In fact, that’s exactly how we approach WordPress theme design: one block at a time.
Migrating the frontend from Sitecore to WordPress
Now that you have a clear picture of what you need to recreate your website (design) on Sitecore, it’s time to actually get to the work.
Set up a starter WordPress theme
Begin with a barebones theme skeleton that works your design foundation. This takes care of basic templating that you can build upon and style as you go.
Create the main navigation, header, and footer
Start by building out your WordPress site’s primary navigation menu, header, and footer. These elements give structure to your site and accelerate dev speed. Make sure the header and footer are dynamic, allowing you to adjust them easily through the WordPress customizer or within Gutenberg blocks.
Design Gutenberg blocks for core design elements
Refer back to your discovery documentation, which should detail all the Sitecore elements you’ll need to recreate. Use the Gutenberg editor to design custom blocks for all the components you documented such as headlines, copy blurbs, pull quotes, galleries, testimonials, and service sections, among others. Ensure these blocks are flexible and reusable, allowing for easy customization within the Block Editor.
Create predefined layouts with regular Gutenberg blocks
Assemble predefined layouts by combining your custom Gutenberg blocks into sections that are commonly used across your pages. This might include multi-column sections, CTAs, or image grids. These layouts streamline the page-building process, offering consistency and allowing content editors to quickly put together pages without needing design skills.
Build out your pages and page templates
With your Gutenberg blocks and layouts in place, start putting together your site’s pages. Use them to construct your new homepage, landing pages, and all the other core pages that you identified above.
Also, develop reusable page templates for the different types of pages you routinely create. This could include templates for landing pages, for example.
Integrate third-party plugins and APIs
Add any necessary third-party integrations, such as CRM forms, video hosting services, or social media platforms, that show up on the frontend. You’ll also need to style them so they align with your theme’s branding and design language.
By following these steps, you’ll effectively rebuild your Sitecore frontend in WordPress, tapping the flexibility of Gutenberg to create a dynamic and modular design that is easy to manage and scale.
Post-migration frontend considerations
We’ll dive into the details of frontend QA in a later chapter, covering essential checks to confirm that your new site is meeting your design and performance standards.
