Adding a Sidebar to the Ultimate Member profile when you don’t use the Ultimate Member Theme

If you use the membership plugin Ultimate Member, but don't use their paid theme (which includes a profile sidebar), here's how to add a sidebar next to the profile content on desktop.

...
0
(0)

Ultimate Member is one of the most-used membership plugins (alongside BuddyPress, PeepSo and a few others), and is the one I’m currently using on all of my sites. It’s theme comes with a built-in sidebar for the profile, but if — like me — you’re not using their theme, you’ll have to create your own template. Here’s how to add an Ultimate Member sidebar to the profile (at least here’s how I did it).

Can’t you just add a sidebar to the page?

I’m using the GeneratePress theme here. It has the easy ability to just add a sidebar to all pages, or just individual pages. But then the sidebar sits alongside the entire profile like this:

Part of the profile on this site when it was in development. The sidebar was added easily but covers the entire right part of the page.

That’s not the look I wanted. I wanted the cover image, profile stuff, menu bar to be full width across the screen and then the profile information and sidebar to sit side by side on desktop, not on mobile, of course.

So here’s what I did:

How to add an Ultimate Member profile sidebar.

Register a new sidebar

First off, I didn’t want to show what was on the default right sidebar in the member profile sidebar. Time to create a new sidebar! In this case, I used the strategy I explain in this post about registering a custom sidebar, but called the sidebar Ultimate Member sidebar and used the slug um-sidebar.

Here’s what I used, and put in the functions.php of my child theme. I suppose you could use the Code Snippets plugin but I prefer to just put snippets in my child theme’s functions.php file using an FTP client like FileZilla:

/*create the ultimate member sidebar*/
add_action( 'widgets_init', 'my_theme_slug_widgets_init' );
function my_theme_slug_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Ultimate Member Sidebar', 'generatepress' ),
        'id' => 'ultimate-member-sidebar',
        'description' => __( 'This sidebar displays on the Ultimate Member profile when using the custom template.', 'generatepress' ),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
    'after_widget'  => '</li>',
    'before_title'  => '<h2 class="widgettitle">',
    'after_title'   => '</h2>',
    ) );
}

Note that, here, generatepress is my primary theme name, not the child theme name, and you’ll have to replace it with yours.

Create an Ultimate Member template directory in your child theme.

Using something to manage your files — either something like WP File Manager or an FTP program (again, I use FileZilla and recommend it) add a directory called ultimate-member inside your child theme directory and then a directory called templates inside of that. So you now have a directory that’s something like /wp-content/themes/my-child-theme/ultimate-member/templates. Then either go to your templated directory in the Ultimate Member plugin file, download the default template and then upload it back into this new directory and then rename it, or create a new file (I created one here called profile with sidebar.php) and copy and paste the body of the default UM template into this file.

Here’s how that looks in FileZilla for this site:

My ultimate member templates directory in file zilla how to add an ultimate member sidebar

Then add this to the top of the new file, changing “Profile With Sidebar” to whatever you want. This will “tell” Ultimate Member what this new profile is called.

<?php /* Template: Profile With Sidebar */ ?>

If you’ve done this, you should now be able to go into your Ultimate Member profile form and find your new profile in the Template dropdown on the right.

You can see Profile With Sidebar selected on the right.

Add the sidebar to the profile

So, we now have a new template, but it STILL doesn’t have a sidebar.

To call the sidebar I created earlier, I add this to the template.

<?php dynamic_sidebar( 'ultimate-member-sidebar' ); ?>

But to get the sidebar to show on the right side of the profile I need to add some extra classes to the template. You’ll note that the default Ultimate Member profile template has a couple of times it uses the .um-profile-body class – once when the profile is in edit mode and once when it is not. In the example I’ll give below, I only added the sidebar when the profile was NOT in edit mode as I preferred to have edit mode be the full width.

I’ll explain what I did, but then just give the entire template that I used and then the css.

After the closing <div> for the profile body, I added the sidebar wrapped in a div class like this:

<div class="um-profile-sidebar"><?php dynamic_sidebar( 'ultimate-member-sidebar' ); ?></div>

I then wrapped the whole profile body and sidebar area with another div class of .my-um-profile-body, making sure to add a closing </div> tag after the area and wrapped the sidebar with another class of .um-profile-sidebar.

Now, that section of the file looks like this:

<div class="my-um-profile-body">

				<div class="um-profile-body <?php echo esc_attr( $nav . ' ' . $nav . '-' . $subnav ); ?>">

					<?php
					// Custom hook to display tabbed content
					/**
					 * UM hook
					 *
					 * @type action
					 * @title um_profile_content_{$nav}
					 * @description Custom hook to display tabbed content
					 * @input_vars
					 * [{"var":"$args","type":"array","desc":"Profile form shortcode arguments"}]
					 * @change_log
					 * ["Since: 2.0"]
					 * @usage add_action( 'um_profile_content_{$nav}', 'function_name', 10, 1 );
					 * @example
					 * <?php
					 * add_action( 'um_profile_content_{$nav}', 'my_profile_content', 10, 1 );
					 * function my_profile_content( $args ) {
					 *     // your code here
					 * }
					 * ?>
					 */
					do_action("um_profile_content_{$nav}", $args);

					/**
					 * UM hook
					 *
					 * @type action
					 * @title um_profile_content_{$nav}_{$subnav}
					 * @description Custom hook to display tabbed content
					 * @input_vars
					 * [{"var":"$args","type":"array","desc":"Profile form shortcode arguments"}]
					 * @change_log
					 * ["Since: 2.0"]
					 * @usage add_action( 'um_profile_content_{$nav}_{$subnav}', 'function_name', 10, 1 );
					 * @example
					 * <?php
					 * add_action( 'um_profile_content_{$nav}_{$subnav}', 'my_profile_content', 10, 1 );
					 * function my_profile_content( $args ) {
					 *     // your code here
					 * }
					 * ?>
					 */
					do_action( "um_profile_content_{$nav}_{$subnav}", $args ); ?>


					<div class="clear"></div>
				</div>
<div class="um-profile-sidebar"><?php dynamic_sidebar( 'ultimate-member-sidebar' ); ?></div></div>

You might note, when you look at the entire default template file, that something like this happens twice (sorry for my lack of technical terminology here). Once when the profile is in edit mode, and once when it is not. I only set things up so it showed the sidebar when the profile is NOT in edit mode. If you wanted it in both, you’d have to repeat this for the other section of the profile template.

But, anyway, here’s my entire Ultimate Member profile-with-sidebar.php file, for what it’s worth:

The CSS

To get the sidebar to show on the side rather than underneath the content we have to add some CSS, of course. I prefer to just add custom CSS in the Additional CSS area in the customizer.

What worked for me to get that sidebar on the right on desktop was using flex for the container for the sidebar and profile, here, and then adding some margins for spacing along with an @media query to only apply the CSS on screens over 800px wide.

Here’s the CSS:

/*um profile sidebar*/
@media screen and (min-width: 800px){
.my-um-profile-body { 
display:flex;  
  margin-right: 30px; margin-left: 30px;
}
.um-profile-body { 
 flex:3; margin-right: 20px !important;}
.um-profile-sidebar .sidebar { 
	flex:1;}}

The website I’m working on in the customizer with the CSS applied. Sidebar is on right!

Well, hope that helped. It’s what worked for me, and it took me some time to figure it out, so I’m posting it in case it helps someone else in the future.

How many hot cups of coffee does this post deserve?

Click on a mug to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Consider passing it along by sharing it on social media.

We're sorry you didn't like this post.

Let us know why.

Leave us feedback. You can also leave a comment in the comment form below.

Subscribe

Want to get notified on what I'm publishing here? If you sign up for one of the options below, I'll automatically send updates to your inbox. But know that I tend to post all kinds of stuff on this website. If you'd like to subscribe, but only to occasional emails in specific content areas, click here, and subscribe on the newsletters page.







Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments