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.
- Text at the bottom of the email
- The URL
- The page title (and HTML output, if you want to get real fancy 💁)
- The document title (aka: SEO
<title>
) - Updating database when options are selected
- CSS / Page design
Here’s an example of my customizations on ldx.training.
❗ 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.
Remove “unsubscribe” text at bottom of email
If you just want to remove the “unsubscribe” language at the bottom of notification emails, you can simply use this code. You don’t need anything in section 0 above. Just this code will do it.
add_action( 'wp_loaded', function () {
remove_filter( 'learndash_notifications_email_content', array(
LD_Notifications_Subscription_Manager::class, 'subscription_notice',
), 99 );
remove_action( 'template_include', array( LD_Notifications_Subscription_Manager::class, 'subscription_page' ) );
} );
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.
Michael
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?
Dave Warfel
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.
Dave Warfel
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 →
Giuseppe Montagnese
Hello Dave, it is possible to translate the options on the subscrition page into Italian.
Dave Warfel
Yes, this should be possible. You need to use a WordPress translation plugin like Loco Translate. Go into the “LearnDash Notifications” plugin and look for all the options in there. If they aren’t there, you need to ask LearnDash support to make the plugin fully translatable.
Rob
Hello Dave,
Basically I just want to disable the complete line “Don’t want to receive this email anymore? Click here to manage your notification emails subscription.”
Can you help with achieving that?
Dave Warfel
Hi Rob. Sure. Just use the PHP code snippet I explained in “1. Text at the bottom of the email” above. Just replace the
$content
variable with a blank string. So you’d just have one line for the content variable, and it will be empty, like this;Your full code should look like this:
Use the Code Snippets plugin to add this as a snippet.
Rob
Thanks Dave. I added this code to functions.php but I’m in doubt if that’s where it should be because the line is still in the notification email.
Dave Warfel
It should work in the
functions.php
as well. But I just found this snippet that you should probably use instead.Rob
Ah cool, that last code did the trick. Thanks a lot 🙂
Curtis Bingham
Dave, how do you get this bit of script to incorporate the theme header and footer?
I have a basic page template I’m using for Divi, and I’d like to incorporate this generated page inside of the body of that page. This way it’ll incorporate all the conditional menus, site logos at the top, and the page footer with navigation and contact information.
Is there a way to embed this script inside a container of some sort in the Divi page?
Dave Warfel
I don’t think there is a way to do that, unfortunately.