In your quest to further customize your WordPress/LearnDash sites, you’ll often stumble upon code snippets that can help you achieve whatever use case you’re trying to achieve.

While code snippets can be scattered all over the internet, some places to look for LearnDash-related snippets are:

Given that LearnDash leverages core WordPress functionality, general WordPress documentation can also apply to LearnDash.

The WordPress Developer Reference and WordPress Stack Exchange are two examples of general WordPress resources.

Such resources offer a wealth of information to help customize LearnDash-related aspects of WordPress.

POP QUIZ: Can you identify the language of this snippet?

And the key word is the above headline is…the. When it comes to code snippets, there is only ONE overarching language.

As a code snippet connoisseur, you will need to become an expert on identifying this language. It can be tricky.

To demonstrate, I am giving you a pop quiz and if you fail it you will be permanently banned from LMSCoder.

Pop Quiz Time!

First, take a close look at the following code snippet:

function lmscoder_purplified_focus_mode() {
	$script = "
		const style = document.createElement( 'style' );
		const css = `
			* {
					color: purple !important;
					background-color: purple !important;
					border-color: purple !important;
					outline-color: purple !important;
			}
		`;
		
		style.appendChild( document.createTextNode( css ) );

		document.getElementsByTagName( 'head' )[0].appendChild( style );
	";
	
	echo '<script>' . $script . '</script>';
}
add_action( 'learndash-focus-template-end', 'lmscoder_purplified_focus_mode' );
Question:
What is the ONE overarching language the above code snippet written in?

Answer:
It's CSS. DUH!
Wrong! While there is some CSS involved, the snippet is ultimately wrapped in PHP.
PHP! Obviously...
Correct. Was it that obvious?!
JavaScript. ES6!
Wrong! Although you were right about ES6! This snippet is ultimately wrapped in PHP.

Stop scrolling! Spoilers below.

How to identify the language of a code snippet

The pop quiz above contains a trick question, because the snippet in question incorporates each of the following languages: PHP, JavaScript, CSS, and HTML.

However, the correct answer is PHP because that is the language it is ultimately wrapped in. Also, the ‚Äúpermanently banned from LMSCoder” bit is a joke.

The snippets you’ll find on LMSCoder, with rare exceptions, are either PHP snippets (possibly, wrapping HTML or JavaScript code) or CSS snippets

PHP Snippet Examples

function lmscoder_example_callback( $example ) {
	if ( 'Leland' === $example ) {
		$example = 'Leland the LMSCoder';
	}
	return $example;
}
add_filter( 'lmscoder_example_filter', 'lmscoder_example_callback' );

add_action( 'wp_footer', function() {
	echo "Hi I am text in the footer lol, LMSCoder is awesome btw";
} );

The references to add_action and add_filter help give these away because these are PHP functions from WordPress core.

Another giveaway is the logic.

CSS generally cannot perform logical tasks like checking to see if a variable’s value is equal to “Leland” so it can then overwrite that variable.

CSS Snippet Examples

.ld_course_grid_button > .btn {
	background: lightblue !important;
	color: red !important;
	font-size: 50px !important;
}

If the intent of the snippet is to change the appearance of something, let’s say colors or font size, then you are most likely looking at at CSS snippet.

As we saw in our “purplified” function above, CSS can be incorporated within a higher-level PHP snippet, so keep an eye out for any signs of logic.

How to add code snippets to your WordPress site

If you’re still trying to figure out the language, re-read the above sections on snippet language identification, or just ask me.

If you’ve figured out what the language is, scroll to the next section accordingly.

Adding PHP Snippets

So you have accurately identified the snippet language as PHP? Great!

Step #1: Install the Code Snippets plugin

Install Code Snippets it however you prefer to install free WordPress plugins hosted on WordPress.org.

For example, in your WordPress backend:

  • Go to Plugins → Add New
  • Search for “code snippets”
  • Click “Install” and then “Activate”
Adding the free Code Snippets plugin for WordPress.

Step #2: Add your snippet

For our example, we’ll copy our Purplified Focus Mode from the Pop Quiz above, which is a PHP snippet.

Purplified Focus Mode snippet added.

Depending on the snippet, you may need to adjust the priority. According to the WordPress documentation:

Lower numbers correspond with earlier execution, and functions with the same priority are executed in the order in which they were added to the action.

Other options should be self-explanatory. Since this is a front-end snippet, I decided to “only run on site front-end.”

It would have also worked if I had “run snippet everywhere” but not if “only run in administration area” or “only run once.”

Step #2b: Add a purposely broken snippet

While I do not advise knowingly adding broken code to your site, here is an example of how Code Snippets offers a safety valve in case a mistake is made.

Let’s rename the add_action function to lmscoder_rocks which is not an existent PHP function on our website.

“Don’t Panic” screen by Code Snippets

Just press the back button and try again or give up, with no site breakage. Pretty nifty feature!

Step #3: Behold the effect of your snippet

After activating a snippet, you should test it to see if it has the intended effect.

In my case, I would to make sure my Focus Mode is purplified, so I’ll go ahead and visit a Focus Mode page.

Purplified Focus Mode

Purplification confirmed.

Step #4: Deactivate the snippet if no longer needed

While technically you could just dump a pile of unrelated snippets into a single snippet, that’s not very organized.

I prefer to keep snippets of a specific purpose separated, so I can easily toggle them on or off if I no longer want them.

Let’s go ahead and deactivate the previous code snippet to depurplify our Focus Mode.

Deactivate PHP Snippet in “Code Snippets”

Simply click the toggle and make sure it’s gray (and not blue) to indicate deactivation.

Adding CSS Snippets

CSS snippets can come in real handy for quick stylistic changes without needing to muck around in your theme code.

Step #1: Acquire a snippet

Here’s one I just whipped up which will add a light green tint to completed items in the Focus Mode sidebar.

.learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation .ld-lesson-item.learndash-complete {
	background-color: palegreen;
}

Step #2: Navigate to an affected page

If there are a bunch of affected pages, pick one. Be sure you’re logged in as an admin.

In this case, I’ll need a Lesson in a Course with at least one completed item.

A soon-to-be-customized component.

Step #3: Open Customizer

Click the “Customize” link at the top.

The location of the “Customize” link.

Step #4: Open Additional CSS panel

Note that your Customizer panels may be different depending on your theme.

You should have Additional CSS no matter what the theme is, though, as that comes from WordPress core.

Additional CSS Customizer panel trigger.

Although it’s possible your theme moves that elsewhere, or removed it entirely, for some reason. Ask your theme provider if you don’t see it.

Step #5: Add and Publish your Custom CSS

You should see the changes nearly instantly, assuming the CSS is correct and specific enough.

Working Custom CSS through Customizer.

Once you’ve confirmed the CSS works to your liking, press Publish.

Customizing existing code snippets

So you found a code snippet that almost does what you want, and you’re wondering how you can customize it to achieve your specific use case.

Unfortunately, it is impractical to provide one-site-fits-all guidance on:

  • Modifying existing code snippets
  • Fixing broken code snippets
  • Rewriting outdated code snippets

And so on.

It involves deep knowledge of PHP, WordPress, LearnDash, CSS, JavaScript, and more…and that’s not something that can be distilled down into a blog post.

If that’s something you need, you can hire me and we can figure out how to proceed.