Wordpress Starter Theme integrated with Bootstrap 4 Framework and Webpack Encore
WordPress starter theme integrated with Bootstrap 4 Framework and Webpack Encore.
SEO friendly 😉
Markup, like _s, is a base theme to develop themes in Wordpress. It is built using namespaces, which gives us greater flexibility when developing our theme. On the other hand, Markup is already integrated with Bootstrap 4, therefore you will save the trouble of integrate Bootstrap 4 to the theme. To manage and optimize front-end dependencies, Webpack Encore is used, a Webpack wrapper created by Symfony wich simplifies the use of Webpack.
To start using Markup you must ensure that:
- php >= 7.0
- Node.js >= 14.x
Install Composer on your computer and after installing run the command
composer require codevelopers/markup in the root of your Wordpress project. Composer will automatically install Markup in the
This file takes care of including the external libraries, helpers, and hooks.
hooks folder you will find some php files. If you want to create a new hook, you can use one of the files located in the
hooks folder or create a new one. The same goes for helpers.
You should consider when you create a new helper or hook file, you must reference it in the
$hooks array respectively, defined both in the
You can find some hooks defined into the
php scripts located in the
hooks folder. As mentioned above, your own hooks can be defined in an existing hook file, or you can create new one.
Markup come with some helper functions wich help you resolve common code problems while you are developing a new theme. Helper files, wich contain helper functions, must have a unique namespace, to avoid coalitions of functions and constants with other files or libraries. Helper files are located in the
As same as hooks, a new helper function can be written in one of the exisiting helper files. If you want, you can create a new file with a unique namespace for avoid coalitions. Also you can use helper functions within hook files and as a template tag. Feel free to create helper functions that you can use in any part of your code.
Custom queries can be created inside the
query.php helper file as functions. You can call these functions in any part of your code.
Template tags can be created inside the
template_tags.php helper file, and you can call these functions in any template file.
A helper function called
get_template_part, defined in the
template_tags.php helper file, with the same parameters as the WordPress
get_template_part core function, is used to include the templates parts located into the
template-parts directory. Remember that
get_template_part helper function automatically append the
template-parts directory name to the first
$slug parameter, so you only need to pass the name of the template part.
To install front-end dependencies, you must install Yarn, and then run the following command in the theme directory:
- yarn install
Once the front-end libraries are installed, you must run the
yarn dev command in the theme directory to compile the assets. If you want, you can run
yarn watch during the development process, since webpack can watch files and recompile whenever they change. Before deploy to production environment, you must run