Mark parent category menu active on single custom post view in WordPress

Recently I developed a theme for one of my client and I had to highlight the menu item of parent category in main menu when one of its associated single custom post is viewed. For that I had to add an action in my functions.php file for nav_menu_css_class. What is does is it returns the ‘active’ class which WordPress adds to the parent category menu item in the main menu. You can see the code at Gist here.

Displaying Titles in Multiline in WordPress

When title is written it is usually displayed in single line on front-end until it is too long to display in one line. But if you want to write title in multiline and want to line break the title after a certain word how can you do that.

It is pretty simple. Since, we know the fact that when title is displayed it is a heading which is displayed using HTML tag off course. So, taking benefit of HTML we can just insert a HTML line break element <br/> just after the word in our title where we want the line break. Like this:

“This is my title <br/> with my own line break”

multilinetitleinwordpress.png

This will be displayed in two lines when you publish the post.

Different color for each menu item

In a recent project I got a requirement that each menu item should be highlighted in different color when visited. The menu items and their required active colors were:

  • Home – Green
  • Portfolio – Blue
  • Team – Yellow
  • Contact – Red

These colors were to be applied only when that page is being visited otherwise color of menu item should be default black color.

So, if user is visiting home page then menu item should something like this

home_menu.png

And if user is visiting Portfolio page then menu should be something like this

portoflio_menu.png

Considering that this was a WordPress theme project where we were using Understrap as a base theme which is based on Twitter Bootstrap. So, when user visits, for example a home page WordPress will attach a .active CSS class to it. Taking advantage of that we added different classes for each menu item and then used following rule to make menu item colors different:

.navbar-nav > .home.active > a {
    color: green!important;
}
.navbar-nav > .portfolio.active > a {
    color: blue!important;
}
.navbar-nav > .team.active > a {
    color: yellow!important;
}
.navbar-nav > .connect.active > a {
    color: red!important;
}

CSS Class Chaining

We utilized the class chaining method here. If you note that .home.active classes are chained together without space and which means it will select an element with both these classes.
That did the trick and all menu items were in different color.

 

Rollover image – Change image on hover/mouse over

Often when designing websites static or dynamic, PHP or ASP.Net, Laravel or WordPress, you have to design in a way if user hovers an image it gets changed and an alternate image is displayed. This can be easily achieved via simple HTML events. Here is the trick:

<img src="FIRST IMAGE URL GOES HERE"
onmouseover="this.src='SECOND IMAGE URL GOES HERE'"
onmouseout="this.src='FIRST IMAGE URL GOES HERE - AGAIN'" />

It is simple as that.

Override parent shortcodes in your WordPress Child Theme

Overriding shortcode defined in WordPress parent theme is pretty easy.

Just use a after_theme_setup section in functions.php of the child theme;

example:

add_action( 'after_setup_theme', 'my_child_theme_setup' );

function my_child_theme_setup() {
   remove_shortcode( 'your_shortcode' );
   add_shortcode( 'your_shortcode', 'my_shortcode_function' );
}

function my_shortcode_function( $atts, $content = null ) {
    extract(shortcode_atts(array(
    ), $atts));
    $out = 'content">'.do_shortcode($content).'</div>';
    return $out;
}