Tutorial, How to use Azurecurve Snippet plugin as a page builder for your ClassicPress site.

Disclaimer:

This is an advanced tutorial. You will need to have a knowledge in HTML, CSS, JS and ClassicPress to follow it.

I will describe the steps to use the Snippets plugin by Azurecurve combined with Twenty8teen theme by Joy Reynolds and Insert Script In Headers And Footers plugin by Geek Code Lab as a complete site builder. Please note that this is not an HTML, CSS and JS tutorial.

Here are the steps:

  • Install all the plugins and the theme to ClassicPress (ClassicPress being a fork of WordPress, plugins and themes installation is just the same)
  • Using Visual Studio Code or another Code Editor of your choice prepare the HTML, CSS and eventually JS for your section; make the code responsive using CSS media queries and check it on a browser to be sure it is just as you want it. If the code runs smoothly on a browser as an static webpage it will render beautifully on your site. Save the files to your computer. For this website I coded the hero section, the services section and the skills section for the home page and the portfolio page.
  • Once the code is ready, visit Appearance>Customize and play around with Twenty8teen settings, once you are satified save and exit. I have to add a little note here: the theme is fully widgetized and allows you to build the entire site by means of widgets if you want to achieve something simple in a very smooth and easy way. It is a full site builder on its own. By adding to the mix a plugin to embed widgets in pages and posts you can combine the full widgetized areas with the features offered by the snippets plugin, making it even more powerful, but more on that later. The theme also allows you to add classes and save presets styles in case you want to spice it up even further.
  • Visit Snippets>Add New to add a new snippet, start with the HTML code. You do not need the full code with the head section, you just need a portion of code enclosed in the section tag. Your site already has the templates for the header and footer sections and will render the HTML in the content area as if it was static. Do not forget to select HTML from the dropdown under the editor area to make sure the snippet is saved as HTML

  • Repeat the process and publish the CSS snippet and select Internal CSS from the dropdown (if you select CSS Stylesheet it is going to work as an addition to your own theme’s stylesheet). You can have multiple HTML smippets and just one CSS snippet with all the customizations for all your HTML snippets.
  • Keep in mind that if you need to use external libraries like FontAwesome now it’s the time to include the JS. Do not include it in the HTML because this can cause issues. Visit Settings>Insert Script In Headers and Footers, here you will find three sections where you can paste your JS (Header, Body, Footer). I used Ionicons in my HTML for icons and their JS goes at the end of body as per their instructions so I pasted it in the Body section. Now it’s also the time to paste the JS code you might have written where it needs to be loaded. Save all the changes before the next step

  • Now that the code is saved, visit Snippets>Snippets and click on the Screen Options panel at the very top right of the screen, select to include snippets IDs in the list view.

  • To embed the snippets you just need to paste the shortcode to the post or page you need it to appear and save the page. Once the post or page is saved, you will see your beautifully coded section appear on page. You can see below how it is done (as you can see I pasted the shortcodes in the text editor section because they are code)

This shown in the screenshot is my Home Page, that is all coded with three shortcodes that are then placed inside the page, you can mix shortcodes with notmal WYSIWYG text or, as I explain below, with the theme widgets, or have a mix of the three because why not.

  • Install the plugin I mentioned above, or another one suitable to embed widgets in pages and posts of your own choice
  • You can now embed in any page or post the powerfull and extended widgets that the theme makes available and the HTML snippets at the same time, so you could build an home page with snippet sections and widgets to show latests post, category feeds, custom post types and so on.

Why I totally recommend this way of building your site: you have total control on every aspect of design in a very easy way. No complex page builder to learn, just simple code.

 

Leave a Reply

Your email address will not be published. Required fields are marked *