LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Customize the LearnDash Notifications Subscription Page

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

If you’re using the LearnDash Notifications add-on, you may have noticed the message at the bottom of all notification emails that reads, “Don’t want to receive this email anymore? Click here to manage your notification emails subscription.”ย Click here links to a dynamically-generated page on your site.

The title on this page reads “LearnDash Notifications Subscription” and the URL is /learndash-notifications-subscription/. Neither of these is ideal. This article will explain how to customize them.

There’s also some CSS you can write to improve the design, and possibly bring it more inline with your overall site layout & design. Buckle up… there’s a lot of code involved in this one ๐Ÿ‘ฉโ€๐Ÿ’ป.

I’ve broken things up into 6 sections in order to explain what you need to change, however, you really should use the entire block of code that I’ve posted here. View/Copy code โ†’

This code covers items 1-5 below, and should be placed in either a custom plugin or a snippet using the Code Snippets plugin. We recommend the Code Snippets plugin.

  1. Text at the bottom of the email
  2. The URL
  3. The page title (and HTML output, if you want to get real fancy ๐Ÿ’)
  4. The document title (aka: SEO <title>)
  5. Updating database when options are selected
  6. CSS / Page design

Here’s an example of my customizations on ldx.training.

LearnDash email notifications page example

 

โ— Warning

Some of this code is quite technical. Please be careful when making your changes. If you’re not comfortable, please enlist the help of a WordPress developer.

LDX Design can’t provide assistance with this code (1-5), but we can try to help out with the CSS code in section 6.

Tip

For the URL change, you can do a find & replace for course-email-notifications. Replace all instances in the code. You’ll still need to update the email text, page title & document title parts, but all the instances of the URL will be good to go.

0. Removing LearnDash actions & filters

This code is essential for the rest of the code to work. It’s included at the top of the example file. There’s an opening line, then 5 lines of important code, and then a closing line. It looks like this:

add_action( 'plugins_loaded', function() {
	remove_filter( 'learndash_notifications_email_content', [ 'LD_Notifications_Subscription_Manager', 'subscription_notice' ], 99 );
	remove_action( 'template_redirect', [ 'LD_Notifications_Subscription_Manager', 'redirect_to_login_page' ], 10 );
	remove_action( 'template_include', [ 'LD_Notifications_Subscription_Manager', 'subscription_page' ], 10 );
	remove_filter( 'document_title_parts', [ 'LD_Notifications_Subscription_Manager', 'subscription_page_title' ], 10 );
	remove_action( 'init', [ 'LD_Notifications_Subscription_Manager', 'save_subscriptions' ], 10 );
} );

There are 5 things that this code is removing. These are the same 5 things that we’ll be adding back in (only, customized) in steps 1-5, later in the code.

โŒ Don’t make any changes to this code. Leave it exactly as is.

1. Text at the Bottom of the Email

There are a few parts to this code that you might want to update. Here’s the code and then I’ll explain below.

add_filter( 'learndash_notifications_email_content', function( $content, $notification_id ) {

	$content .= '<p class="subscription-manager-notice" style="font-size:12px;">';
	$content .= sprintf( __( 'Don\'t want to receive this email anymore? <a href="%s">Manage Your Notification Settings โ†’</a>', 'learndash-notifications' ), home_url( '/course-email-notifications/' ) );
	$content .= '</p>';

	return $content;
}, 99, 2 );

The second reference to $content has a <p> tag that contains some inline styles. I removed the italics in this example, and changed the font-size from 12px to 14px. You can add other CSS styles in here as well, but keep it simple.

The third reference to $content has the actual text that shows up at the bottom of LearnDash notification emails. It also contains the URL to the page that it links to. Both of these can be updated.

You’ll see I changed the link from “Click Here” to “Manage Your Notification Settings โ†’.”

I also changed the URL of the page to /course-email-notifications/. Remember this URL because there are several other places you’ll need to change it.

The opening link tag looks like this: <a href="%s">. The %s is replaced with the URL you placed after home_url. So leave this <a> tag untouched.

2. The URL

You’ll want to use the same URL you used in step 1. There are 2 places to update it.

add_action( 'template_redirect', function() {
	$query_vars = LD_Notifications_Subscription_Manager::get_query_vars();

	if ( ! is_user_logged_in() && array_search( 'course-email-notifications', $query_vars, true ) !== false ) {

		$login_page = wp_login_url( home_url( '/course-email-notifications/' ) );

		wp_safe_redirect( $login_page );
		exit();
	}
} );
  • Enter it in between the single quotes after array_search. Don’t include the forward-slashes (/).
  • Enter it in between the single quotes after home_url, on the $login_page line.

3. The page title

This section is really long so I’m not going to include the entire thing here. There’s two pieces of code you need to update.

if ( is_user_logged_in() && array_search( 'course-email-notifications', $query_vars, true ) !== false ) {
  • Change course-email-notifications to your new URL, without the slashes
<h1><?php _e( 'Course Email Notifications', 'learndash-notifications' ) ?></h1>
  • Change Course Email Notifications to whatever you want your page title to be. This shows up before all the options, near the top of the page.

4. The document title

This part of the code will update the <title> tag. This is show in the user’s browser tab, as well as on search result pages like google.com. It’s sometimes referred to as the SEO title.

add_filter( 'document_title_parts', function( $title ) {
	$query_vars = LD_Notifications_Subscription_Manager::get_query_vars();

	if ( array_search( 'course-email-notifications', $query_vars, true ) !== false ) {
		$title['title'] = __( 'Course Email Notifications' );
	}

	return $title;
} );
  • Change course-email-notifications to your new URL, without the slashes
  • Change Course Email Notifications to whatever you want your <title> tag to display

5. Updating database when options are selected

This last piece of code only needs 2 updates, again, just to update the new URL. The full code is much longer but both updates will be made in this part of the code, near the bottom:

if ( $update ) {
		$redirect_url = add_query_arg( [ 'message' => 'success' ], home_url( 'course-email-notifications/' ) );
	} else {
		$redirect_url = add_query_arg( [ 'message' => 'fail' ], home_url( 'course-email-notifications/' ) );
	}
  • Change both instances of course-email-notifications to your new URL

Two other small notes about the sample code we provided at the top:

  • We updated the language of the success message to say, “Your notification settings have been saved.”
  • We changed “Triggers” to “Emails,” as we felt this makes more sense to the user

6. CSS

This section is all about your design. It’s much easier to understand, I promise ๐Ÿ˜‰.

All of the following code should be placed either in a child theme CSS file, or in the Additional CSS area of the WordPress Customizer (Appearance > Customize).

Main Container

There’s a container surrounding all the content on this page. Let’s do the following:

  • Add some padding around the edges of the content
  • Give it a background color
  • Add a border
  • Adjust the border radius (rounded corners)
  • Add a box shadow
.learndash-notifications.primary {
	padding: 2em;
	background: #fff;
	border-radius: 8px;
	border: 1px solid #eee;
	box-shadow: 0 3px 13px #f7f7f7;
}

You could also add a color: #000; line to change the color of all text. This could be handy if you’re creating a dark mode style for your LearnDash notifications subscription page. Set the background to black and the color to white.

Page Title

We can’t change the wording of “LearnDash Notifications Subscription,” but we can change the style. Let’s do the following:

  • Reduce the font size
  • Change the color
.learndash-notifications.primary h1 {
	font-size: 1.75rem;
	color: #7116cb;
}

You can obviously swap out the size for another rem or em value, or a pixel value (ex: 22px). And change the color to match your theme.

Table Header Row

The top header row consists ofย Triggers andย Enabled, along with the one checkbox belowย Enabled that will select/deselect everything. Let’s add a bottom border to this row to separate it from the rest of the options.

.learndash-notifications.primary .item:first-of-type {
	border-bottom: 2px solid #ccc;
}

Another thing to try here is a background color, if you’d like. background: #f7f7f7;

Table Header Text

If you want to adjust the text styles ofย Triggers andย Enabled, use the CSS below. I wouldn’t recommend doing all of the following, but I’ll show you how to do the following things:

  • Reduce the font size
  • Convert font to uppercase
  • Change the color
  • Remove the bold style (normal font weight)
.learndash-notifications.primary .header {
	font-size: 15px;
	text-transform: uppercase;
	color: #000;
	font-weight: normal;
}

Table Rows

I think the table rows are spaced out nicely, and the default #f5f5f5 background color on every other one looks nice, in my opinion. If you’d like to change some of those things, you can.

All Rows

These styles will apply to all rows.

Tip: You can change your background value to transparent and the main container’s background color will shine through. Then you can add a bottom-border to each row to separate them that way, instead of using background colors.

.learndash-notifications.primary .item {
	background: #f4f4f4;
	border-bottom: 2px solid #eee;
}

Every Other Row

These styles will apply only to every other row.

.learndash-notifications.primary .item.alternate {
	background: #ffe4f3;
}

“Save Changes” Button

Hopefully your theme styles get applied to this button and it already matches your brand. If you’ve set global button styles in Elementor, the button should accept those as well.

If it doesn’t, and you need to apply styles to it, you can use the following CSS:

.learndash-notifications.primary .submit input[type="submit"] {
	border-radius: 5px;
	background: #000;
	color: #fff;
}

And to change the styles on hover:

.learndash-notifications.primary .submit input[type="submit"]:hover {
	background: #fff;
	color: #000;
}

I’m sure there’s a little more you could do with some clever CSS, but keep in mind, it’s a notifications settings page. You want to keep it simple so users can do what they need to do and move on. Don’t get flashy.

If you need help with any of the CSS, leave a comment with what you’re trying to achieve. I’ll see if I can help.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Learn More โ†’

Previous

Focus Mode: Only Show the Current Lesson in Navigation

Next

The Uncanny Toolkit vs. PowerPack for LearnDash

3 Comments

  1. Hey Dave,
    First of all, wanted to say, your posts are extremely hopeful! Thank you for creating this website. I refer to it often ๐Ÿ™‚

    Secondly, I noticed that when someone leaves a comment in a lesson, or topic, that their photo appears twice. As well as those who respond. Is this something that can be easily hidden with code?

    • Thanks Michael ๐Ÿ™‚.

      That sounds a bit strange. I don’t think I’ve seen that before. Can you provide a screenshot showing me what’s going on?

      It most likely can be hidden with a little custom code, but I would need to have access to the page to figure out what code to write.

    • For anyone else that might see Michael’s comment, we figured it out. He is hosting with SiteGround and using the SG Optimizer plugin. Under “Lazy Load Media,” once he disabled the “Lazy Load Gravatars” option, the issue was resolved.

      You can read more about how to set up SG Optimizer with LearnDash here โ†’

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén