¶ 1. Introduction
This page is a work in progress, tests needed. Silex is free/libre software which means you need to contribute.
This tutorial is very long but it should work fine if you follow each step. If you would like us to develop a WordPress plugin that makes it a little easier, you can vote for this feature here
You may want to check this video too, it is an other attempt to document the WordPress integration
By the end of this tutorial, you will have a WordPress backend to edit your website. The frontend will be designed with Silex drag and drop interface and it will be hosted on GitLab pages for free.
Requirements: you need **a regular WordPress website. Local WordPress (development) will not work because Silex and GitLab will not be able to access it.
This guide includes all the setup necessary to make your WordPress ready for Silex. We will install a number of plugins such as SCF (ex-ACF)
Feel free to ask in the chat or forums if you need explanations about why this step or that action
¶ 2. Click "Add New Plugin"
Let's start from your WordPress admin, click on "add new plugin" from the "plugin" tab.
¶ 3. Install "Advanced Custom Fields" plugin
Fill "Secure Custom Fields."
¶ 4. Click "Install Now"
Initiate the installation process.
¶ 5. Click "Activate"
Activate the plugin.
¶ 6. Click "Add New Plugin"
Let's add another plugin.
¶ 7. Fill "WPGraphQL"
Enter "WPGraphQL" in the search field.
¶ 8. Click "Install Now"
Initiate the installation process.
¶ 9. Click "Activate"
Activate the plugin.
¶ 10. Click "Add New Plugin"
Add a new plugin.
¶ 11. Fill "WPGraphQL ACF"
Fill in the search box with "WPGraphQL ACF."
¶ 12. Click "Install Now"
Initiate the installation process.
¶ 13. Click "Activate"
Activate the plugin.
¶ 14. Click "Settings"
Access the settings.
¶ 15. Copy the value of "The endpoint" for the GraphQL
Set the GraphQL API endpoint.
¶ 16. Enable Public Introspection
Select "Enable Public Introspection."
¶ 17. Click "Save Changes"
Save the changes made.
¶ 18. Switch to "v3.silex.me"
Switch to "v3.silex.me."
¶ 19. Login with GitLab.com
Access Silex with your GitLab account.
¶ 20. Create a new site
Say hi to the dashboard, create a new empty site.
¶ 21. Open the website settings
¶ 22. In the "CMS" tab
Access the CMS settings for the website
¶ 23. Add a data source
Click on the "Add data source" button.
¶ 24. Fill here the value from before
Enter information in the field that was the value "Endpoint."
¶ 25. Click on "test connection"
Make sure that this does not display any error.
¶ 26. Click "Apply"
Apply the changes.
¶ 27. Click on "+"
Add a text to your site.
¶ 28. Use the text block
Drag a text to the canvas.
¶ 29. In the element's settings
Open the settings of the new text block.
¶ 30. In the loop section, click the "expression button"
Add an expression in the loop field.
¶ 31. Select "Pages"
When you will publish your site, it will duplicate the text field, one per page in WordPress.
The "{ }" next to "Pages" means it is an object, not an array.
¶ 32. Select "nodes"
The "[ ]" next to "nodes" means it is an array of pages. You can loop on that.
When you publish your site, it will duplicate the text field, one per page in WordPress.
¶ 33. Click on "expression" in "HTML content"
This will make the content of the text field an expression. When you publish your site, the text content will be replaced by the expression you select.
¶ 34. Select "Loop data"
Loop data is the one page that the text field represents.
¶ 35. Select "Title"
The pages have a title, so you can make the text field display the page title.
When you publish your site, the text content will be replaced by the page title.
¶ 36. Click "Publish"
Publish the changes.
¶ 37. Click "GitLab.com"
Select GitLab to publish to GitLab pages hosting (free and good quality).
¶ 38. Click "Publish"
Publish the website. Wait 30 seconds.
¶ 39. Click "Your website will soon be live here"
Access the live website link.
¶ 40. The generated website
Here is your website, with one text field for the one page that WordPress has by default.
Copy the URL of your website for later use (the address in the address bar).
¶ Next
Now you probably want to
- create one silex page per collection in WordPress: pages, posts, authors, and custom collections you create in ACF
- use a plugin for multi-lingual website - HELP WANTED TO WRITE THIS DOC
- use the faustjs plugin for headless WordPress
- set-up a web hook to rebuild and deploy the site on the push of a button in WordPress admin - HELP WANTED TO ADD TO THIS DOC