Because the conversion from HTML to WordPress is not a black box process, there are sometimes edge cases that you will need to take into consideration upfront in order to ensure the successful conversion of your HTML template into a fully functional WordPress theme.
Theme display issues
It has come to our attention that some templates exported from Webflow use class names that are reserved by WordPress.
Sometimes, these classes are defined in the CSS exported by Webflow, but are not even used in the project templates.
While the preview in Pinegrow Theme Converter is perfect this situation can cause significant display problems on your exported WordPress theme.
Note: At the moment, we don’t know if these classes are automatically added by Webflow during the export or created by the users.
Here is a non-exhaustive list of classes that you should not use in Webflow when creating or editing a document that you plan to convert to a WordPress theme (or use with full knowledge of the situation).
.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}How-to Fix Webflow Animations?
Basically, all Webflow pages have a unique page id, this is presented on each Webflow html file like this:
<html data-wf-page="5eb266f71471ff7a36bb2084" data-wf-site="5ea1e0ec9c38e73c61dbc9ad" lang="en">So the data-wf-page number is unique to each Webflow page and the data-wf-site is the number for the entire website, so this number is the same on each page.
When you convert your Webflow page to WordPress, it only pulls in the unique page number from the index.php (the master page) into the header, but not the other page numbers from the other pages (like contact, about, etc).
That’s basically a possible reason why the javascript is not working on the other pages and thus a reason why your splendid animations created with Webflow don’t seem to work anymore in your WordPress theme created with Pinegrow.
One good solution can be to set each of your pages (which contain animations) as a master page by activating the “This is a master page with its own header & footer” option, so each page would keep its specific webflow tags. (by having a dedicated header/footer)
Read more about Page Settings: https://pinegrow.com/docs/wordpress/actions/page-settings/
How to Fix WordPress Custom Post Types related Errors during the development phase?
At some point, you may have encountered a 404 Not Found Error when trying to access a post from a Custom Post type that you have just created from Pinegrow.
It is also possible that your custom post type is not displayed correctly on the dedicated template you created in Pinegrow or that your new Custom Post type does not “work” at all.
These are well known situations when developing themes for WordPress and this is not an issue with Pinegrow.
Here is a simple fix for this kind of situation.
Login to your admin dashboard and click on Settings Tab> Permalinks and click on Save changes.
Now, go to your custom post pages now and check whether they return 404 error pages or not. The situation should be fixed.
This is not a miracle solution that works once and for all, and it is possible that if you create another Custom Post Type, you may have to proceed again to the same operation.
More documentation on this particular topic:
Reserved terms and handle slugs
There is a complete set of reserved keywords, or terms, in WordPress that should not be used in certain circumstances as they may conflict with core functionality. You should avoid using any of these terms when:
- Passing a term through a $_GET or $_POST array
- Registering a taxonomy or post type slug
- Handling query variables
Read more: https://codex.wordpress.org/Reserved_Terms
Reserved terms
- attachment
- attachment_id
- author
- author_name
- calendar
- cat
- category
- category__and
- category__in
- category__not_in
- category_name
- comments_per_page
- comments_popup
- custom
- customize_messenger_channel
- customized
- cpage
- day
- debug
- embed
- error
- exact
- feed
- fields
- hour
- link_category
- m
- minute
- monthnum
- more
- name
- nav_menu
- nonce
- nopaging
- offset
- order
- orderby
- p
- page
- page_id
- paged
- pagename
- pb
- perm
- post
- post__in
- post__not_in
- post_format
- post_mime_type
- post_status
- post_tag
- post_type
- posts
- posts_per_archive_page
- posts_per_page
- preview
- robots
- s
- search
- second
- sentence
- showposts
- static
- status
- subpost
- subpost_id
- tag
- tag__and
- tag__in
- tag__not_in
- tag_id
- tag_slug__and
- tag_slug__in
- taxonomy
- tb
- term
- terms
- theme
- title
- type
- types
- w
- withcomments
- withoutcomments
- year
Reserved handle slugs
- about
- accordion
- admin-bar
- admin-bar
- admin-comments
- admin-gallery
- admin-menu
- admin-tags
- admin-widgets
- autosave
- backbone
- buttons
- clipboard
- code-editor
- code-editor
- colorpicker
- colors
- colors-fresh
- comment
- comment-reply
- common
- common
- cropper
- csslint
- custom-background
- custom-header
- custom-html-widgets
- customize-base
- customize-controls
- customize-controls
- customize-loader
- customize-models
- customize-nav-menus
- customize-nav-menus
- customize-preview
- customize-preview
- customize-preview-nav-menus
- customize-preview-widgets
- customize-selective-refresh
- customize-views
- customize-widgets
- customize-widgets
- dashboard
- dashboard
- dashicons
- deprecated-media
- edit
- editor
- editor-buttons
- editor-expand
- esprima
- farbtastic
- farbtastic
- forms
- handle
- heartbeat
- hoverIntent
- hoverintent-js
- htmlhint
- htmlhint-kses
- image-edit
- imagesloaded
- imgareaselect
- imgareaselect
- inline-edit-post
- inline-edit-tax
- install
- iris
- jcrop
- jcrop
- jquery
- jquery-color
- jquery-core
- jquery-effects-blind
- jquery-effects-bounce
- jquery-effects-clip
- jquery-effects-core
- jquery-effects-drop
- jquery-effects-explode
- jquery-effects-fade
- jquery-effects-fold
- jquery-effects-highlight
- jquery-effects-puff
- jquery-effects-pulsate
- jquery-effects-scale
- jquery-effects-shake
- jquery-effects-size
- jquery-effects-slide
- jquery-effects-transfer
- jquery-form
- jquery-hotkeys
- jquery-masonry
- jquery-migrate
- jquery-query
- jquery-serialize-object
- jquery-table-hotkeys
- jquery-touch-punch
- jquery-ui-accordion
- jquery-ui-autocomplete
- jquery-ui-button
- jquery-ui-core
- jquery-ui-datepicker
- jquery-ui-dialog
- jquery-ui-draggable
- jquery-ui-droppable
- jquery-ui-menu
- jquery-ui-mouse
- jquery-ui-position
- jquery-ui-progressbar
- jquery-ui-resizable
- jquery-ui-selectable
- jquery-ui-selectmenu
- jquery-ui-slider
- jquery-ui-sortable
- jquery-ui-spinner
- jquery-ui-tabs
- jquery-ui-tooltip
- jquery-ui-widget
- jshint
- json2
- jsonlint
- l10n
- language-chooser
- link
- list-revisions
- list-tables
- login
- masonry
- mce-view
- media
- media
- media-audio-widget
- media-audiovideo
- media-editor
- media-gallery
- media-gallery-widget
- media-grid
- media-image-widget
- media-models
- media-upload
- media-video-widget
- media-views
- media-views
- media-widgets
- mediaelement
- mediaelement
- mediaelement-core
- mediaelement-migrate
- mediaelement-vimeo
- moxiejs
- nav-menu
- nav-menus
- open-sans
- password-strength-meter
- plugin-install
- plupload
- plupload-handlers
- post
- postbox
- privacy-tools
- prototype
- quicktags
- revisions
- revisions
- sack
- schedule
- scriptaculous
- scriptaculous-builder
- scriptaculous-controls
- scriptaculous-dragdrop
- scriptaculous-effects
- scriptaculous-root
- scriptaculous-slider
- scriptaculous-sound
- set-post-thumbnail
- shortcode
- site-health
- site-health
- site-icon
- suggest
- svg-painter
- swfobject
- swfupload
- swfupload-all
- swfupload-handlers
- tags-box
- tags-suggest
- text-widgets
- theme
- themes
- thickbox
- thickbox
- underscore
- updates
- user-profile
- user-suggest
- utils
- widgets
- word-count
- wp-admin
- wp-ajax-response
- wp-api
- wp-api-request
- wp-auth-check
- wp-auth-check
- wp-backbone
- wp-block-library-theme
- wp-codemirror
- wp-codemirror
- wp-color-picker
- wp-color-picker
- wp-custom-header
- wp-edit-blocks
- wp-editor-font
- wp-embed
- wp-embed-template-ie
- wp-jquery-ui-dialog
- wp-lists
- wp-mediaelement
- wp-mediaelement
- wp-playlist
- wp-plupload
- wp-pointer
- wp-pointer
- wp-polyfill
- wp-sanitize
- wp-theme-plugin-editor
- wp-tinymce
- wp-tinymce
- wp-tinymce-lists
- wp-tinymce-root
- wp-util
- wpdialogs
- wplink
- xfn
- zxcvbn-async