Mastering the Conversion of Webflow design to WordPress Theme or Block plugins using Theme Converter

Here, it is essential to note that this workflow, encompassing the use of two applications for an optimal outcome, is somewhat unusual. Most often, the structure of an HTML document, irrespective of the tool that produced it, is not naturally well-aligned for an efficient and high-quality conversion. In this regard, the following tips will help you get a better understanding of the prerequisites needed for a quality conversion.

As a preliminary remark, it is important to specify that although Theme Converter and Pinegrow Web Builder can convert any HTML template into a WordPress theme or block plugin, it is by no means an automagic process. As is recalled in the following documentation, an overview of your service as well as a good understanding of the operation and extended functionalities of WordPress are necessary to use our applications.

1. Understanding the WordPress CMS

It may seem so obvious that it doesn’t seem necessary to mention it, but for developing the desired information architecture for your WordPress site, a thorough understanding of the WordPress CMS is essential. It’s necessary to know the different templates available as well as their role and how to use them. and how to efficiently use blocks, widgets, custom post types, custom fields, relationships, queries, taxonomies, and customizer fields, among others.

2. Creating a Design Blocks Template

From Webflow (or your favorite editor) begin with creating a unique page, suggestively named blocks.html. Contrary to a traditional template, this page will function as a blocks library, containing all potential Gutenberg blocks for your WordPress theme or plugin. It becomes a reference point when working with Theme Converter, simplifying the identification and conversion of design elements into WordPress.

3. Standardizing Class and ID Names

Maintaining clear and consistent class and ID names are of paramount importance for keeping clarity and order in your project. This practice assists in the quick location and understanding of different elements, which eventually facilitates the conversion process.

When creating your classes and IDs, give them meaningful names that reflect the function of the element if it’s assigned to an ID. For example, instead of using generic names like class1, class2 use something descriptive like navigation-menu, footer-links, blog-post.

However, be careful, a certain number of class names are reserved for the exclusive use of WordPress. Do not use them in your custom designs as this could lead to unexpected results. Read our documentation for more details.

Good Practice:

<div class="navigation-menu">
    <!-- Menu items -->
</div>
<div class="footer-links">
    <!-- Footer Links -->
</div>
<div class="blog-post">
    <!-- Blog Post contents -->
</div>

Stick to a naming convention throughout the entire project like camelCase, hyphen-separated, underscore_separated, etc. This reduces confusion and provides uniformity. So use blog-post-header not blog_post_header or blogPostHeader if you’ve chosen hyphen-separated.

Good Practice:

<!-- Right -->
<div class="blog-post-header">
 <!-- Header contents -->
</div>

Poor Practice:

<!-- Wrong -->
<div class="blog_post_header">
 <!-- Header contents -->
</div>
<div class="blogPostHeader">
 <!-- Header contents -->
</div> 

Also, avoid referring to presentation details in your class or ID names, such as red-text or center-align. It can lead to misunderstanding if the presentation needs to be changed later on.

Poor Practice:

<!-- Avoid if possible -->
 <div class="red-text">
    <!-- Contents -->
</div>
<div class="center-align">
    <!-- Contents -->
</div>

Adopting a clear and consistent naming strategy makes your classes and IDs easier to manage and can improve the effectiveness of your HTML during the conversion.

4. Semantic Approach to HTML

Semantic HTML enhances the accessibility and SEO of your pages. By defining the type of content they contain, semantic HTML tags can simplify the conversion into WordPress components. For example, use <header> for your header, <nav> for navigation links, <main> for your main content, etc.

You can use the standard HTML5 semantic elements to further distinguish content:

    <header>
        <!-- This is the header of your website, usually containing a logo, navigation, etc. -->
    </header>

    <nav>
        <!-- This tag should include the navigation links.-->
    </nav>

    <main>
        <!-- This tag should include the primary content of your webpage. -->
    </main>

    <article>
        <!-- This tag should include each individual piece of content like a blog post or a news story. -->
    </article>

    <section>
        <!-- This tag should include different sections of your primary content. -->
    </section>

    <footer>
        <!-- This is where your footer would go, usually containing copyrights, credits, social links etc. -->
    </footer>

Utilizing these semantic elements in your blocks.html page can help structure your content logically and meaningfully. For example, a blog post can be an <article> with a <header> consisting of the post’s title, a <main> section consisting of the post’s body, and a <footer> with post metadata.

Semantic HTML aids not only in improving accessibility and SEO, but it is also beneficial during the conversion process. It allows a more direct mapping from HTML elements to WordPress PHP files, making it easier to locate different parts of the website’s content.

5. Developing Flexible Shells (barebones)

To effectively integrate Gutenberg blocks into your WordPress theme, your main templates (index, custom post, page, homepage, single, singular and more… ) should serve as flexible shells (aka barebones), pulling in key structural elements, and providing a central space for different layout blocks. This aligns with the freedom to create unique layouts while maintaining your theme’s structure. We describe the process in the Simple Full Site Editing with Minimal Theme and Blocks documentation.

6. Differentiating Container and Content Blocks

Distinguishing between container type blocks and content type blocks is crucial. Container blocks serve as the key structural elements of a layout, whereas content blocks intend to populate these containers.

Theme Converter provides a feature called Block Inner Content which defines an area within the block that can contain other blocks (sub-blocks). It’s ideal for setting up well-styled containers.

7. Handling External Styles and Scripts

Ensure you handle your styles and scripts externally. Theme Converter and WordPress efficiently work with external assets and this practice can facilitate easier conversion.

In preparing your HTML for a WordPress theme conversion, handling your website’s styles and scripts is essential. Instead of keeping your styles and scripts inline within your HTML files, it’s more convenient to externalize them. Inline styles and scripts embedded directly in your HTML complicate the conversion process and might conflict with WordPress’s inherent structure and plugins.

Make use of external CSS files for your styles and JavaScript files for your scripts. You can include them via the <link> tag for CSS and the <script> tag for JavaScript:

<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js"></script>

Adopting this approach simplifies the conversion process. Not only does this organization make your styles and scripts more manageable, but it also makes your files easier to update, and aligns with WordPress’s best practices. Furthermore, external assets are perfectly compatible with Pinegrow Theme Converter and WordPress, ensuring a more effective and efficient conversion process.

8. Flexibility for Dynamic Content

When designing your blocks, it’s important to ensure they are flexible enough to accommodate dynamic content. Dynamic content refers to content that changes based on specific conditions or user interactions, such as blog posts, product listings, comments, user profiles, etc.

In WordPress, many types of content are dynamic, pulling from the database to display the latest posts, user comments, and more. As such, flexibility is a key attribute to strive for when structuring your blocks.

For example, if you are creating a blog post block, it shouldn’t be designed for a specific post with a hard-coded title, body, and other details. Instead, it should be designed as a general template that can be populated with the details of any blog post.

<div class="blog-post-block">
  <h2 class="post-title">Post Title Goes Here</h2>
  <p class="post-body">Body of the post goes here...</p>
  <div class="post-meta">
    <!-- Metadata like author, date, tags, etc -->
  </div>
</div>

In the above example, “Post Title Goes Here” and “Body of the post goes here…” are placeholders that will be replaced with the actual data when the block is used within WordPress.

By ensuring your HTML blocks are flexible and prepared for dynamic content, you can make the most of WordPress’s CMS capabilities, and make your theme more versatile and adaptable to a variety of content types.

9. Limiting Complex Interactions

Try to limit the usage of complex animations and interactions in your Webflow design. They could potentially disrupt your conversion process.

10. Conclusion

Bear in mind that despite using Theme Converter, the conversion process calls for careful planning and precise actions. A well-structured design can minimize the back-and-forth and repetitive tweaking between Webflow (or any other external editor) and Theme Converter.

Updating your WordPress theme is simplified with Theme Converter as Smart actions are stored separately and can be added back whenever the HTML is updated. Adhering to these guidelines, therefore, places you in an optimal position to achieve a smooth and efficient conversion from Webflow to WordPress.

11.One More Thing …

Some years ago, we crafted a series of videos about using Theme Converter to convert a Webflow template. While these videos predate Gutenberg blocks, they effectively explain the conversion process and are a great starting point for learning Theme Converter. We highly recommend taking a look! (we also recommend the Pinegrow Theme Converter Walktrough)