LearnDash Design & Tutorials

LearnDash Design & Tutorials

How to Change the LearnDash Focus Mode Logo URL

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.

When Focus Mode first came out in LearnDash 3.0, you could add your logo to the header of Focus Mode, but it didn’t link anywhere. It was just a static image.

LearnDash Focus Mode header image example

Starting in LearnDash 3.1, the logo now automatically links back to your site’s homepage. Personally, I see this as an improvement, but… what if you want it to link somewhere else? Or remove the link entirely and go back to how it was prior to 3.1 (not recommended)?

I’ll walk you through the steps on how to change the URL of the LearnDash Focus Mode logo, as well as provide a few examples.


If you already know how to use WordPress filter hooks, and just want the code:

Using a LearnDash Filter

To change the logo URL, we’re going to use one of the built-in “filters” that LearnDash provides. In short, this allows us to modify some of LearnDash’s HTML code before it gets output onto the page. It’s a safe way to make small changes to a LearnDash-powered site.

Code Snippets Plugin

My preferred way to make changes like this is with the Code Snippets plugin. You could also add this code to the functions.php file of your child theme (if you’re using one), but I find Code Snippets to be easier to manage and less likely to bring your site down if you make a mistake.

  1. Install & activate “Code Snippets” from your WordPress plugins page
  2. Navigate to Snippets > Add New in the left sidebar
  3. Give your snippet a name
  4. Paste one of the following code snippets into the Code area
  5. Choose the Only run on site front-end option
  6. Click the Save Changes and Activate button

Link to the Course Page

This is the most common scenario I’ve seen requested so far. If you want the Focus Mode logo to link back to the course page that the student is currently in, use the following code:

add_filter( 'learndash_focus_header_logo_url', function( $header_logo_url = '', $course_id = 0, $user_id = 0 ) {
	$header_logo_url = esc_url( get_permalink( $course_id ) );

	return $header_logo_url;
}, 30, 3 );

This will automatically detect which course the lesson/topic/quiz is a part of, and use the appropriate URL for that specific course.

Use a Completely Custom URL

Perhaps you want to link the logo to the user’s profile page, a WooCommerce account page, or any other page on your WordPress site. Simply navigate to that page on the front-end of your site, copy the URL, and paste it in the code below, replacing CUSTOM_URL.

Be sure to use the full URL, including https://.

add_filter( 'learndash_focus_header_logo_url', function( $header_logo_url = '', $course_id = 0, $user_id = 0 ) {
	$header_logo_url = 'CUSTOM_URL';

	return $header_logo_url;
}, 30, 3 );

Unlike the course page option above, which changes dynamically based on which lesson/topic/quiz the student is viewing, this URL will be used for all lessons, topics & quizzes, for all courses.

While I don’t recommend this option, you might want to remove the link entirely, and just display the logo image. If this is the case, use the following code:

add_filter( 'learndash_focus_header_logo_url', function( $header_logo_url = '', $course_id = 0, $user_id = 0 ) {
	$header_logo_url = '';

	return $header_logo_url;
}, 30, 3 );

Different URLs for Different Courses

If you want to get really clever, you could technically use a different link for each course. I can’t think of too many real-world scenarios where this would be useful, but hey, prove me wrong and tell me about it in the comments 😜.

You will need to know the ID of your courses, but we have a tutorial on how to find your course ID here.

In the code below, replace 1 with the ID of one of your courses. Then replace CUSTOM_URL with the URL you want the logo to link to when viewing any lesson/topic/quiz within that course.

Do the same with the 2 below.

You can add as many of these as you’d like, but keep in mind, less code is beautiful code. Don’t overdo it.

add_filter( 'learndash_focus_header_logo_url', function( $header_logo_url = '', $course_id = 0, $user_id = 0 ) {

	if( $course_id == 1 ) {
	
		$header_logo_url = 'CUSTOM_URL';
	
	}

	if( $course_id == 2 ) {
	
		$header_logo_url = 'CUSTOM_URL';
	
	}

	return $header_logo_url;
}, 30, 3 );

That should cover most scenarios for where you might want to link your Focus Mode logo URL, but if you have any other ideas, please let me know in the comments.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers.

Get your LearnDash Mobile App →

Previous

LearnDash Content Width & Page Builders

Next

How to Programatically Number LearnDash Sections, Lessons & Topics with CSS

16 Comments

  1. Hi Dave,

    I need to remove the link from my logo and the course in the focus mode sidebar. I want to keep the links to the lessons and quizzes.

    Do you know how I can do this?

    • The code to remove the link from the site logo is in this article, under the “Remove the Link” heading.

      For the link to the course in the focus mode sidebar, this isn’t the best way to do it, but it should give you the result you’re after. Use this custom CSS:

      .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-course-navigation-heading h3 a {
          pointer-events: none;
          cursor: default;
      }

      The better thing to do is update the LearnDash template file and remove the <a> tag, but that is a more complicated method that requires some development experience and has other implications, so stick with the CSS.

  2. Felix

    Hi Dave,

    is there a way to change the logo image for different courses? We thought of providing kind of a white label solution. So when students use the focus mode they see the logo of their company.

    Cheers, Felix

    • Hi Felix,

      Yes, this is possible, but will require some custom PHP code.

      You can use the second snippet listed here. It’s the one that says “Filter LD30 Focus Mode header logo image URL.”

      Within that PHP code, you would then use WordPress conditionals to check for the post ID of all the lessons/topics/quizzes in a particular course, and set the $header_logo_url variable to a different value for each course.

      There is probably a LearnDash function you can use to get the IDs of all the steps in a course so you don’t have to list them manually, but I don’t know what it is. Finding this would make the code a lot easier.

    • Jennifer

      This is something I’ve been searching for. Thank you, Felix for asking, and thank you Dave, for the head start. Both this post regarding the URL change and this response on the separate logo question are incredibly helpful. I appreciate it!

  3. Jo

    Awesome! Thanks for this 🙂

  4. Milan

    Hi, in Focus Mode on Mobile for a user that is not logged in, there is no logo or anything and also no way to go back to home page of the site. Can we add the same view that is visible to logged in user for the logged out users also.

    • Hi Milan – For both logged in and logged out users, the logo is NOT shown in focus mode. LearnDash hides it universally for both user types.

      The 3 things shown for logged in users are:

      • hamburger menu that opens the sidebar
      • % complete and progress bar
      • avatar with dropdown nav menu

      The only thing shown to logged out users is the hamburger menu because if you’re not logged in, LearnDash doesn’t know who you are, so it can’t track your progress or display your avatar.

      If you want to show the logo in focus mode, you can use the following CSS. The first part adds the logo back to focus mode on mobile, and the second part re-hides it for logged in users.

      @media (max-width: 768px) {
      	.learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
      		display: block;
      	}
      }
      
      @media (max-width: 768px) {
      	.logged-in .learndash-wrapper .ld-focus .ld-focus-header .ld-brand-logo {
      		display: none;
      	}
      }
  5. Milan

    Thanks, Dave, for the quick reply. Your solution worked like a charm. I have one more query regarding the same thing. When I see focus mode mobile example on Learndash website it looks like this
    https://www.learndash.com/support/wp-content/uploads/2019/04/learndash-focus-mode-mobile-menu.gif
    But in my case the left side ‘Focus Mode Course Outline’ starts from the top of the screen, hiding the menu and cross sign. Is there a way to make it look like the one in the gif attached?

  6. Milan

    Hi Dave, it worked once I added the following CSS to whatever already added.
    .learndash-wrapper .ld-focus .ld-focus-sidebar {
    margin-top:100px;
    }
    Thanks for help, you guys are great. I’ll also purchase the pro version of plugin by this month end as my site goes live.

  7. Kat

    Hi Dave, I’m trying to change the logo image for different courses (just like Felix).

    When I go on the link you provided (or on the Learndash developer site), I can’t find a snippet called “Filter LD30 Focus Mode header logo image URL.”

    Does the snippet still exist? Or is there another way to replace the logo for individual courses? On the course page and in focus mode?

    I would basically like to create courses for different clients and use their logos on the courses that I host for them on my lms.

    I have the Uncanny Toolkit Pro for LearnDash plugin but don’t think I can replace the logo with it.

    Can you help? I’m using the Buddyboss platform and theme.

    Thanks,
    Kat

    • Hi Kat. Yes, the filter still exists. You can find it here.

      If you want to use it to display unique logos for each course…

      First, make sure you have uploaded a logo in the LearnDash settings. The filter won’t kick in if you don’t.

      Then, use the example code, but you’ll need to write PHP if() statements using WordPress conditionals to target the IDs of all the lessons/topics/quizzes, as I explained in my reply to Felix.

  8. Kat

    Hi Dave, thanks for the quick help. Is it possible that there’s a conflict with my theme? I can’t even get the code to link Focus Mode logo back to the course page working, using the code snippets plugin… I’m using the buddyboss platform and buddyboss theme.

    • It’s possible. If there were any theme where this code wouldn’t work, it would be the BuddyBoss platform/theme. They customize almost all aspects of LearnDash templates, so it’s possible they removed this filter, and/or created their own.

  9. Katja Sabine Maass

    Thank you, good to know.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén