24degrees

A little note to myself, thought I might want to share it as well for future reference.

Starting from scratch

Start creating a starter theme using Underscores. Next, set up your local development environment and create an empty theme directory. Place your Underscores-files there and activate the theme. Now we can start developing.

Have a look at this site to check how to get started with the Underscores Starter Theme. Try out some CSS-changes (mind Normalise!) for example changing the background.

Next thing to do is to include the MDBootstrap Framework. We download the source files for the free edition here. Next, we only copy the src file to our theme directory. Since we will be dealing with SASS-files, open Visual Studio Code and install the extension Live Sass Compiler made by Ritwick Day. Make sure to verify the correct settings for the extension:

        {
            "format": "compressed",
            "extensionName": ".css",
            "savePath": "/css"
        }

Now rename the mdb.min.css file to yourtheme.css and compile it. It is not loaded into WordPress right now, since we still need to load our file in the functions.php file. First, in the folder inc, create a new folder front. In there we create a new file called enqueue.php.

We append functions.php with some new code to include the new file:

/*
* CUSTOM CODE FOR LEVATUS so post Underscores generated content
*/

// Includes

include( get_theme_file_path( '/inc/front/enqueue.php' ) );

Now we are going to register the styles, then we enqueue them so our enqueue.php looks like this now:

<?php

add_action( 'wp_enqueue_scripts', 'tfd_levatus_enqueue_basic_styles' );

function tfd_levatus_enqueue_basic_styles() {
  // get the theme file uri, not get_theme_file_path
  $uri    =   get_theme_file_uri();

  // STYLES
  // mdbootstrap5free based
  wp_register_style( 'levatus', $uri . '/css/levatus.css' );
  wp_enqueue_style( 'levatus' );
}

This still won’t work if you are not using a Starter Theme. Make sure to insert the following code in your index.php or better header.php exactly at the page you normally would load all the styles:

<?php wp_head(); ?>

To check if our code is working, we add following code to our index.php file :

<p class="border border-primary p-5">
  Hover the link to see the
  <a href="#" data-mdb-toggle="tooltip" title="Hi! I'm tooltip">tooltip</a>
</p>      

As for now, you will see a line of text with a blue border and a tooltip when we hover over the word tooltip. But we didn’t include the MDB JavaScript file yet.

Adding a script file is almost the same as adding a style sheet. But we want all JS-files in the footer. Therefor, just like the HEAD-function for the styles, we call a FOOTER-function for the scripts. Add this code just before the closing body-tag:

<?php wp_footer(); ?>

For now, I copied both mdb.min.js and mdb.min.js.map to the JS-folder in our theme. We’ll get back to this later. Now include the JS-file using the following code:

  // SCRIPTS
  wp_register_script( 'mdb', $uri . '/js/mdb.min.js', [], false, true );
  wp_enqueue_script( 'mdb' );

That’s it for now.

Caching

To avoid caching issues we create a global constant. Let’s also do that for the other variables we created, let’s clean this up a bit. In functions.php, we define the following:

/*
* VARIABLES FOR GLOBAL USE
*/
define( 'ARE_YOU_DEBUGGING', true );
define( 'THEME_URI', get_theme_file_uri() );
define( 'FILE_VERSION', ARE_YOU_DEBUGGING ? time() : false );

Of course we use CAPS for naming the constants. Next, we change the code in our enqueue.php to:

<?php

add_action( 'wp_enqueue_scripts', 'tfd_levatus_enqueue_basic_styles' );

function tfd_levatus_enqueue_basic_styles() {
  // get the theme file uri, not get_theme_file_path
  //$uri    =   get_theme_file_uri();

  // STYLES
  // mdbootstrap5free based
  wp_register_style( 'levatus', THEME_URI . '/css/levatus.css', [], ARE_YOU_DEBUGGING );
  wp_enqueue_style( 'levatus' );

  // SCRIPTS
  wp_enqueue_script( 'jquery' );
  wp_register_script( 'mdb', THEME_URI . '/js/mdb.min.js', [], ARE_YOU_DEBUGGING, true );
  wp_enqueue_script( 'mdb' );
}

Notice the location of the ARE_YOU_DEBUGGING constant in the register functions, both of style and script. Now, if debugging is set to true, the version number will be replaced by the current time so we never ever have to take caching into account.