Tag: Understrap

Understrap Sub Menu Depth

Understrap supports sub menus in their navbars, however what happens if the sub menus have sub menus of their own?

Unfortunately Understrap only supports collapsable menus of depth 2 (meaning that you can’t make the sub sub-menus collapsable).

This is how to increase the depth of your menus by displaying them when the dropdown sub menu containing them is expanded.

First import the file “class-wp-bootstrap-navwalker.php” from the Understrap parent theme under “\inc\class-wp-bootstrap-navwalker.php”

Then alter this line of code within:

// If item has_children add atts to <a>.
			if ( isset( $args->has_children ) && $args->has_children && 0 === $depth && $args->depth !== 1 ) {
				$atts['href']          = '#';
				$atts['data-toggle']   = 'dropdown';
				$atts['aria-haspopup'] = 'true';
				$atts['aria-expanded'] = 'false';
				$atts['class']         = 'dropdown-toggle nav-link';
				$atts['id']            = 'menu-item-dropdown-' . $item->ID;
			} else {
				$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
				// Items in dropdowns use .dropdown-item instead of .nav-link.
				if ( $depth > 0 ) {
					$atts['class'] = 'dropdown-item';
				} else {
					$atts['class'] = 'nav-link';
				}
			}

Into this by removing ” && 0 === $depth”:

// If item has_children add atts to <a>.
			if ( isset( $args->has_children ) && $args->has_children && $args->depth !== 1 ) {
				$atts['href']          = '#';
				$atts['data-toggle']   = 'dropdown';
				$atts['aria-haspopup'] = 'true';
				$atts['aria-expanded'] = 'false';
				$atts['class']         = 'dropdown-toggle nav-link';
				$atts['id']            = 'menu-item-dropdown-' . $item->ID;
			} else {
				$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
				// Items in dropdowns use .dropdown-item instead of .nav-link.
				if ( $depth > 0 ) {
					$atts['class'] = 'dropdown-item';
				} else {
					$atts['class'] = 'nav-link';
				}
			}

Then add to your header (or wherever else your adding your navbar) a dropdown menu of depth 3:

			<div class="container">
				<?php wp_nav_menu(
	array(
		'theme_location'  => 'secondary',
		'container_class' => 'collapse navbar-collapse',
		'container_id'    => 'navbarNavDropdown',
		'menu_class'      => 'navbar-nav mx-auto',
		'fallback_cb'     => '',
		'menu_id'         => 'secondary',
		'depth'           => 3,
		'walker'          => new Understrap_WP_Bootstrap_Navwalker(),
	)
); ?>
			</div>

Then finally add the following Additional CSS:

/**
 * Forces sub-sub menu's
 * to display when sub menu
 * is displayed!
 */
ul.dropdown-menu li > ul.dropdown-menu{
    display: inline-grid;
}
ul.dropdown-menu li>ul {
    position: static!important;
}

And you should get something like this:

Filed under: WordPressTagged with: , , ,

Understrap Entry Footer Widget Area

How to add a new custom Widget Area to an Understrap Child Theme

First simply register a new widget by adding this code within “functions.php”:

/**
 * Registers the "authors" widget area.
 */
add_action( 'widgets_init', 'authors_widgets_init' );
function authors_widgets_init() {
	
	register_sidebar( array(
  'id'            => 'authors',
  'name'          => __( 'Authors', 'understrap' ),
  'description'   => __( 'Widgets in this area will be shown after posts and pages for the purpose of listing the co-authors and date of publishing.', 'understrap' ),
  'before_widget' => '<aside id="%1$s" class="widget %2$s">',
  'after_widget'  => '</aside>',
  'before_title'  => '<h3 class="widget-title">',
  'after_title'   => '</h3>',
) );
}

Heres the widget area resulting from that code:

Show widget area in entry-footer of all posts & pages

Next to make your new custom Widget Area appear in the “entry-footer”.

This means below pages, posts and even under each post in an archive of posts.

How to show widget area in entry-footer of all posts

First I imported and then altered the file “inc > template-tags.php” (which you can find and copy from the Understrap parent theme).

Before:

/**
 * Prints HTML with meta information for the categories, tags and comments.
 */
if ( ! function_exists( 'understrap_entry_footer' ) ) {
	function understrap_entry_footer() {
		// Hide category and tag text for pages.
		if ( 'post' === get_post_type() ) {
			/* translators: used between list items, there is a space after the comma */
			$categories_list = get_the_category_list( esc_html__( ', ', 'understrap' ) );
			if ( $categories_list && understrap_categorized_blog() ) {
				/* translators: %s: Categories of current post */
				printf( '<span class="cat-links">' . esc_html__( 'Posted in %s', 'understrap' ) . '</span>', $categories_list ); // WPCS: XSS OK.
			}
			/* translators: used between list items, there is a space after the comma */
			$tags_list = get_the_tag_list( '', esc_html__( ', ', 'understrap' ) );
			if ( $tags_list ) {
				/* translators: %s: Tags of current post */
				printf( '<span class="tags-links">' . esc_html__( 'Tagged %s', 'understrap' ) . '</span>', $tags_list ); // WPCS: XSS OK.
			}
		}
		if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
			echo '<span class="comments-link">';
			comments_popup_link( esc_html__( 'Leave a comment', 'understrap' ), esc_html__( '1 Comment', 'understrap' ), esc_html__( '% Comments', 'understrap' ) );
			echo '</span>';
		}
		edit_post_link(
			sprintf(
				/* translators: %s: Name of current post */
				esc_html__( 'Edit %s', 'understrap' ),
				the_title( '<span class="screen-reader-text">"', '"</span>', false )
			),
			'<span class="edit-link">',
			'</span>'
		);
	}
}

After:


/**
 * Prints HTML with meta information for the categories, tags and comments.
 */
if ( ! function_exists( 'understrap_entry_footer' ) ) {
	function understrap_entry_footer() {
		// Hide category and tag text for pages.
		if ( 'post' === get_post_type() ) {
			/* translators: used between list items, there is a space after the comma */
			$categories_list = get_the_category_list( esc_html__( ', ', 'understrap' ) );
			if ( $categories_list && understrap_categorized_blog() ) {
				/* translators: %s: Categories of current post */
				printf( '<span class="cat-links">' . esc_html__( 'Posted in %s', 'understrap' ) . '</span>', $categories_list ); // WPCS: XSS OK.
			}
			/* translators: used between list items, there is a space after the comma */
			$tags_list = get_the_tag_list( '', esc_html__( ', ', 'understrap' ) );
			if ( $tags_list ) {
				/* translators: %s: Tags of current post */
				printf( '<span class="tags-links">' . esc_html__( 'Tagged %s', 'understrap' ) . '</span>', $tags_list ); // WPCS: XSS OK.
			}
		}
		
		
		/**
		 * adds the "authors" widget area!!!
		 */
		if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('authors') )
		
		
		if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
			echo '<span class="comments-link">';
			comments_popup_link( esc_html__( 'Leave a comment', 'understrap' ), esc_html__( '1 Comment', 'understrap' ), esc_html__( '% Comments', 'understrap' ) );
			echo '</span>';
		}
		edit_post_link(
			sprintf(
				/* translators: %s: Name of current post */
				esc_html__( 'Edit %s', 'understrap' ),
				the_title( '<span class="screen-reader-text">"', '"</span>', false )
			),
			'<span class="edit-link">',
			'</span>'
		);
	}
}

How to remove entry footers from posts in post archives

Next I imported and then altered the file “loop-templates > content.php”.

Here I simply commented out this code:

<?php understrap_entry_footer(); ?>

How to show widget area in “entry-footer” of pages

Finally I imported and then altered the file “loop-templates > content-page.php”.

Before:

	<footer class="entry-footer">

		<?php edit_post_link( __( 'Edit', 'understrap' ), '<span class="edit-link">', '</span>' ); ?>

	</footer><!-- .entry-footer -->

After:

	<footer class="entry-footer">
		
		<?php
  if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('authors') )
?>

		<?php edit_post_link( __( 'Edit', 'understrap' ), '<span class="edit-link">', '</span>' ); ?>

	</footer><!-- .entry-footer -->
Filed under: WordPressTagged with: , , ,

Adding Log In/Out Links

After figuring out how to change the “site-info” in the Understrap theme I decided to add log in and log out buttons.

These visible based on if the user is already logged in or not.

It also dynamically gets the site url so that this code can be reused on sites with little changed.

To do this simply add the following code to “functions.php” of your child theme:

/**
 * Changes "site-info" to our boilerplate copyright.
 * Also adds Log In and Log Out links.
 */
function remove_parent_functions() {
    remove_action( 'understrap_site_info', 'understrap_add_site_info' );
    add_action( 'understrap_site_info', 'understrap_add_site_child_info' );
}
add_action( 'init', 'remove_parent_functions', 15 );
function understrap_add_site_child_info() {
	
	if(is_user_logged_in()) {
		?>
    <div class="wrap"><p>Site commissioned from Tees Valley Arts &nbsp; ⁄ &nbsp; Copyright ©&nbsp;2021 &nbsp; ⁄ &nbsp; <a rel="nofollow" href=<?php echo get_site_url().'/wp-login.php?action=logout&amp;_wpnonce=5969d1c9bc' ?>>Log out</a></p></div>
    <?php
	} else {
		?>

    <div class="wrap"><p>Site commissioned from Tees Valley Arts &nbsp; ⁄ &nbsp; Copyright ©&nbsp;2021 &nbsp; ⁄ &nbsp; <a rel="nofollow" href=<?php echo get_site_url().'/wp-login.php' ?>>Log in</a></p></div>
    <?php
	}
}

Filed under: WordPressTagged with: , , ,

Changing Understrap “site-info”

Now the organisation I volunteer at is moving over to a bootstrap based theme named “Understrap”.

When fiddling with the official “Understrap Child Theme” I figured out a few of my old tricks.

In order to change the annoying copyright info in “site-footer” what you’ll actually want to aim at is “site-info”.

I accomplished that by adding this code to my child themes “functions.php”:

/**
 * Changes "site-info" to our boilerplate copyright.
 * Also adds Log In and Log Out links.
 */
function remove_parent_functions() {
    remove_action( 'understrap_site_info', 'understrap_add_site_info' );
    add_action( 'understrap_site_info', 'understrap_add_site_child_info' );
}
add_action( 'init', 'remove_parent_functions', 15 );
function understrap_add_site_child_info() {
    //your new site footer here.
}

Filed under: WordPressTagged with: , , ,