How to add Fluid Engine to Blog Page

By default you can’t add Fluid Engine section to Blog. But we can create some pages in Not Linked, design them with Fluid Engine section, then attach them to blog post content.

The code will automatically map based on URL rules, so you won’t need to do much editing.

Follow these steps.

#1. First, find Blog Item URL

In my example, we will have:

• /527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe
• /527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b
• /527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc

#2. Next, create some pages in Not Linked

with URL like this. fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc

in my example, we have 3 blog items, so you will create 3 pages, with urls

• fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe-83lrc
• fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b-4eyxe
• fe-527blogsidebar/blog-post-title-four-lcker-9z2em-2eb2b

It’s basically the same as a blog item URL, only we add “fe-” before the URL.

#3. Next, install Section Loader Supreme Plugin

#4. Next, use this extra code under Plugin code

<script>
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  
  if (!currentPath.startsWith('/527blogsidebar/')) {
    return;
  }
  
  const contentWrappers = document.querySelectorAll('.blog-item-content-wrapper');
  
  const fePageUrl = currentPath.replace(/^\//, '/fe-');
  
  contentWrappers.forEach((contentWrapper, index) => {
    const loaderDiv = document.createElement('div');
    loaderDiv.setAttribute('data-wm-plugin', 'load');
    loaderDiv.setAttribute('data-source', fePageUrl);
    
    contentWrapper.parentNode.insertBefore(loaderDiv, contentWrapper);
    contentWrapper.remove();
  });
  
  if (window.wmSectionLoader) {
    wmSectionLoader.init();
  }
});
</script>

Remember to update Blog Page URL

#5. Result

#6. In case you want to replace whole blog content (blog title, blog post content) with Fluid Engine Page, you can use this new code.

Remember to update Blog Page URL.

<script>
document.addEventListener('DOMContentLoaded', function() {
  const currentPath = window.location.pathname;
  
  if (!currentPath.startsWith('/527blogsidebar/')) {
    return;
  }
  
  const sectionsContainer = document.querySelector('main#page > .sections');
  
  if (!sectionsContainer) {
    return;
  }
  
  const fePageUrl = currentPath.replace(/^\//, '/fe-');
  
  const loaderDiv = document.createElement('div');
  loaderDiv.setAttribute('data-wm-plugin', 'load');
  loaderDiv.setAttribute('data-source', fePageUrl);
  
  sectionsContainer.parentNode.insertBefore(loaderDiv, sectionsContainer.nextSibling);
  sectionsContainer.remove();
  
  if (window.wmSectionLoader) {
    wmSectionLoader.init();
  }
});
</script>

If Header overlaps Fluid Engine Section, you can use this extra code to Custom CSS

body[class*="type-blog"].view-item {
    header#header {
        position: static !important;
    }
}