Any tips / guide to Port a WordPress Theme to Jekyll?

Help
1

Moving away from WordPress, I have a very basic theme I would like to port: anyone has a resource or better a tutorial to do that?

2

That is fun! I do that quite often and I like it… This is roughly my process:

  1. open wordpress website
  2. copy html output
  3. save as layout in jekyll
  4. save external resources in your projectfolder /js or /css
  5. remove wordpress specific stuff
  6. replace head with https://jekyllcodex.org/without-plugin/seo/
  7. add links to local resources
  8. replace content with {{ content }}
  9. create md files with content in markdown
  10. create a _config.yml file
  11. set your new layout as default
  12. fix small things like menu, etc

Good luck!

2 Likes
3

I agree with the above approach. Some ideas as variation on that:

  • save your Wordpress homepage as html and then go through the structure to create a default layout.
  • you could move head, header (for nav and banner image) and footer to separate _includes files so the the default.html layout file is light.
  • choose pages on your wordpress site that have distinct style and you want to convert to layouts. Id expect something like this: home.html, page.html, posts.html, post.html. The posts.html one would have a for loop over posts and that logic could be used on your homepage too or instead.
  • Reference the default layout in each layout and of course use {{ content }} variable.
  • I am not familiar with other assets for Wordpress. You might find the image, css and js links copied into head work fine but are not sustainable since they are tied to Wordpress and maybe that wordpress theme or your own wordpress site. So save those as files in your assets directory and then update head links to point to new files e.g. the “/assets/js/foo.js” file, as served from _site
  • give credit to the original theme in your docs and the footer or similar.
  • Also check - there may be copyright restrictions on the wordpress theme reuse, even if it’s free but especially if it is a paid theme.
4

Please post links of your work in progress or finished work. On WP and Jekyll. Would be happy to give code review input or more specific instructions

5

thank for the tips, I will post the result for sure!

6

There is a wordpress plugin to export from Wordpress to Jekyll. Not sure if it exports themes though ? - Jekyll Exporter – WordPress plugin | WordPress.org

7

The plugin doesn’t seem to differentiate between content and theme. It just sees what is rendered on the page.

Export what your users see, not what the database stores

If the tool is able to get CSS and layouts out and saved for Jekyll, then at that point you have content and styling mixed. But you can gradually move everything that is layouts and includes and assets into a separate repo and use that as a theme, leaving behind content and config in your site repo.

1 Like