Importing Wordpress blog posts to framer (step by step guide)

In this guide we will be walking through a sample wordpress project which will have x amount of blog posts (though same concept can be applied to any cms where you want to export your data from) and will be exporting them to framer cms, in the end we should have blog posts available inside framer and ready to be viewed by users.

by Anas Niazi

Step 1 (read framer documentation)

Make sure to read framer documentation on what type of content is importable and what is not, scroll down on documentation page and look at ‘What content is imported’?

This is important and need to take framers limitations in account before you decide to move your blog to framer.

This will help us in preparing our export csv file from wordpress.

Framer documentation of what can be imported and what can not

Step 2 (create collection in cms)

Create collection inside your framer project, for this specific task we can create a collection name ‘blog’ since we are creating this collection for blog posts.

If you don’t know how to create a collection, there is a tutorial from framer which you can follow for same.

After creating collection make sure to add all the specific fields you like to have in your blog post like (featured image, thumbnail , author, slug, content, title, date) etc

The most important aspect of data we have here is ‘content’ which will contain all the text,images etc you have in your blog post.

Step 3 (export your posts from wordpress site)

After creating cms collection in framer, its time to head to the wordpress project to start exporting our posts.

For this purpose we will install a specific wordpress plugin which can do this task easily and for free, download the plugin Wp-all-export and install it in your wordpress website.

Now you can start the export process by selecting posts or any other specific type in export option then customize it as per the fields you like to export, make sure the field name matches with the cms collection we created in step #2.

After customising the fields, click export button and download the csv file.

Exporting wordpress blog posts via WP All Export plugin

You can rename the column titles from the export wizard of All WP Export by clicking on the item you want to rename

Step 4 (cleanup the csv)

After downloading the csv file, its time to clean the csv so there are no blockers for us to import this csv to the framer blog collection.

If you remember step #1, framer cms import doesn’t supports embeds such as instagram feed code, shortcodes, youtube videos, broken images etc more you can read in framer documentation , so we need to cleanup the csv before we can import.

This is very important if there is a broken image found in your csv row, then the whole post will not be imported so we need to fix this first so we don’t get in trouble when importing into framer. for this purpose you can try any online tool to look up if your blog/website have any broken images and then document it and either replace it with correct image before exporting csv or remove those images in the cleanup phase.

For this purpose I have uploaded the csv we got in step #3 to google sheets and used google Appscript function to clean the csv file.

And the specific Appscript function is generated with help from chatgpt, where I ask what data I don’t want in the content column, such as instagram feed, malformed image tags , and after running the function the google sheet is cleaned as per framer liking and now we can import the csv into our cms blog collection.

here is the code I have used in appscript generated via chatgpt, where I asked it to remove any malformed image tags and only give me standalone image tags, remove shortcodes etc, you can tweak it with your own prompt

function extractImages() {
  // Get the active sheet
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Cleaned data'); // Change 'HTML' to the name of your sheet
  
  // Get the range of data in column B
  var range = sheet.getRange('C:C');
  
  // Get the values in column B
  var values = range.getValues();
  
  // Loop through each cell in column B
  for (var i = 0; i < values.length; i++) {
    var sampleText = values[i][0];
    
    // Remove div and figure tags
    var modifiedHtml = sampleText.replace(/<\/?div[^>]*>|<\/?figure[^>]*>/g, '');
        
    // Remove data attributes and srcset from img tags
    modifiedHtml = modifiedHtml.replace(/<img([^>]*)src="([^"]*)"([^>]*)>/g, '<img src="$2">');
    
    // Remove shortcodes
    modifiedHtml = modifiedHtml.replace(/\[([^\]]+)\]/g, '');
    
    // Remove empty lines preceded by shortcodes
    modifiedHtml = modifiedHtml.replace(/\[([^\]]+)\]\s*[\r\n]/g, ''); // Remove shortcode and any following newline
        
    // Update the value in the cell
    range.offset(i, 0, 1, 1).setValue(modifiedHtml);
  }
}

Conclusion

After saving and running this function/macro in your google sheet, your data should be cleaned now and ready to imported in your framer cms collection.

Liked this tutorial? You can show Support by giving onetime payment on patreon