Category order

Hello!

In various places (eg. widgets) GreatMag places very nice post excerpts with category overlay. However, if I have a post which has more than one category (eg. parent and child), they are ordered alphabetically and only first category is displayed. This ignores category order, that can be set in each post, namely marking one of the categories as “main”.

Is there a way to address this issue and make GreatMag display only main category instead first in alphabet?

Great theme, BTW! Congratulations!

Best regards
Mikolaj

Hello there,

I am sorry it isn’t supported yet. Ideally, there should be an option in each post editing screen to specify which category to display. Maybe it’ll be added in future update if our developer sees its fit. At the moment, please try doing the below steps:

  1. Add the below PHP code to your child theme’s functions.php file.

/**
 * =================================================
 * Display category custom metabox starts
 * =================================================
 */

/**
 * Adds a box to the main column on the Post edit screens.
 */

add_action( 'add_meta_boxes', 'greatmag_child_display_post_category_box' );
function greatmag_child_display_post_category_box() {

  add_meta_box(
			'greatmag_category_box',
			__( 'Display Category', 'greatmag' ),
			'greatmag_post_category_box_callback',
			'post',
      'side'
	);

}

/**
 * Create metabox content
 */

function greatmag_post_category_box_callback($post) {

  // Add an nonce field so we can check for it later.
  wp_nonce_field( 'greatmag_child_meta_box', 'greatmag_child_meta_box_nonce' );

  // Create category dropdown
  echo '<p style="display:none;"><label for="greatmag_child_post_cat">';
  _e( 'Select Category', 'greatmag' );
  echo '</label></p>';
  echo '<select name="greatmag_child_post_cat" id="greatmag_child_post_cat">';
  echo '<option value="">'.__('-- Select category --', 'greatmag').'</option>'; // Select One
  $terms = get_terms('category');
  $selected = get_post_meta( $post->ID, '_greatmag_child_post_cat', true );
  foreach ($terms as $term) {
    echo '<option value="'.$term->term_id.'" '.selected($selected, $term->term_id, false).'>'.$term->name.'</option>';
  }
  $taxonomy = get_taxonomy($field['id']);
  echo '</select>';

}

/**
 * When the post is saved, saves our custom data.
 *
 */

add_action( 'save_post', 'greatmag_child_save_meta_box_data' );
function greatmag_child_save_meta_box_data( $post_id ) {
	$post_id = get_the_ID();

  // Check if our nonce is set.
	if ( ! isset( $_POST['greatmag_child_meta_box_nonce'] ) ) {
		return;
	}

  // Verify that the nonce is valid.
	if ( ! wp_verify_nonce( $_POST['greatmag_child_meta_box_nonce'], 'greatmag_child_meta_box' ) ) {
		return;
	}

	// If this is an autosave, our form has not been submitted, so we don't want to do anything.
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

  // Check the user's permissions.
  if ( ! current_user_can( 'edit_post', $post_id ) ) {
    return;
  }

  /* OK, it's safe for us to save the data now. */

	// Make sure that it is set.
	if ( ! isset( $_POST['greatmag_child_post_cat'] ) ) {
		return;
	}

	// Sanitize user input.
	$new_address = sanitize_text_field( $_POST['greatmag_child_post_cat'] );

  // Update the meta field in the database.
	update_post_meta( $post_id, '_greatmag_child_post_cat', $new_address );

}

/**
 * =================================================
 * Display category custom metabox ends
 * =================================================
 */

Or if you don’t want to run a child theme, you can use a functionality plugin like Code Snippets.

  1. Edit the greatmag/inc/template-tags.php file and find the below code block:

/**
 * Get post categories
 */
function greatmag_get_post_cats( $first_cat = false, $featured = false ) {
	if ( 'post' === get_post_type() ) {
		$cats = get_the_category();

		if ( $first_cat == true ) {
			$cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' );
			if ( $featured != true ) {
				echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
			} else {
				echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
			}
		} else {
			foreach ( $cats as $cat ) {
				$cat_color = get_theme_mod( 'cats_color_' . $cat->term_id, '#908e8e' );
				echo '<a class="absp-cat prltv" style="background-color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat->term_id ) ) . '" title="' . esc_attr( $cat->name ) . '">' . esc_html( $cat->name ) . '</a>';
			}
		}
	}
}

then replace it with this:


/**
 * Get post categories
 */
function greatmag_get_post_cats( $first_cat = false, $featured = false ) {
	global $post;
	$post_cat = get_post_meta($post->ID, '_greatmag_child_post_cat', true);
	$cat_term = get_term($post_cat);

	if ( 'post' === get_post_type() ) {
		$cats = get_the_category();

		if ( $first_cat == true ) {
			$cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' );

				if ( $featured != true ) {

					if( !empty($post_cat)  ) {
						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cat_term->term_id ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
					} else {
						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
					}

				} else {

					if( !empty($post_cat)  ) {
						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat_term->name ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
					} else {
						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
					}

				}

		} else {
			foreach ( $cats as $cat ) {
				$cat_color = get_theme_mod( 'cats_color_' . $cat->term_id, '#908e8e' );
				echo '<a class="absp-cat prltv" style="background-color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat->term_id ) ) . '" title="' . esc_attr( $cat->name ) . '">' . esc_html( $cat->name ) . '</a>';
			}
		}
	}
}

  1. Apply the changes to your site
  2. To select a category to display, edit your post then find this box

Cloudup

Select the category of your choice and update post.

Regards,
Kharis

Wow, it works perfectly, you are the best! Thank you very much!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi There,

This solution almost worked perfectly for me too, I can now choose the category that is displayed. The one issue I have is that changing the display category does not also change the category colour. For example:

I have two categories: “Entertainment” (parent, colour red) and “Books” (child, colour blue). Before doing the change above a post tagged with both categories would display “Books” in blue because that category is alphabetically first. After the change above I can choose the category “Entertainment” to be displayed, but it shows up in blue (the “Books” colour) instead of the actual red of the “Entertainment” Category".

Do you have any solution so that the parent company selected shows up in it’s own colour?

(P.S. I noticed that you specified to let you know in a new topic about further questions, but it seemed a lit easier to explain the issue in this one.)

Thanks in advance!

Hello there,

I am sorry for the long delay. The solution for this, first, try replacing this line of code:

    /**
     * Get post categories
     */
    function greatmag_get_post_cats( $first_cat = false, $featured = false ) {
    	global $post;
    	$post_cat = get_post_meta($post->ID, '_greatmag_child_post_cat', true);
    	$cat_term = get_term($post_cat);

    	if ( 'post' === get_post_type() ) {
    		$cats = get_the_category();

    		if ( $first_cat == true ) {
    			$cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' );

    				if ( $featured != true ) {

    					if( !empty($post_cat)  ) {
    						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cat_term->term_id ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
    					} else {
    						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
    					}

    				} else {

    					if( !empty($post_cat)  ) {
    						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat_term->name ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
    					} else {
    						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
    					}

    				}

    		} else {
    			foreach ( $cats as $cat ) {
    				$cat_color = get_theme_mod( 'cats_color_' . $cat->term_id, '#908e8e' );
    				echo '<a class="absp-cat prltv" style="background-color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat->term_id ) ) . '" title="' . esc_attr( $cat->name ) . '">' . esc_html( $cat->name ) . '</a>';
    			}
    		}
    	}
    }

with:

    /**
     * Get post categories
     */
    function greatmag_get_post_cats( $first_cat = false, $featured = false ) {
    	global $post;
    	$post_cat = get_post_meta($post->ID, '_greatmag_child_post_cat', true);
    	$cat_term = get_term($post_cat);

    	if ( 'post' === get_post_type() ) {
    		$cats = get_the_category();

    		if ( $first_cat == true ) {

    			$cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' );

    				if ( $featured != true ) {

    					if( !empty($post_cat)  ) {
    						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cat_term->term_id ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
    					} else {
    						echo '<a class="absp-cat" data-color="' . $cat_color . '" style="background-color:' . $cat_color . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
    					}

    				} else {

    					if( !empty($post_cat)  ) {
    						$cat_color = get_theme_mod( 'cats_color_' . $post_cat, '#908e8e' );
    						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat_term->name ) ) . '" title="' . esc_attr( $cat_term->name ) . '">' . esc_html( $cat_term->name ) . '</a>';
    					} else {
    						echo '<a  data-color="' . esc_attr( $cat_color ) . '" style="color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cats[0]->term_id ) ) . '" title="' . esc_attr( $cats[0]->name ) . '">' . esc_html( $cats[0]->name ) . '</a>';
    					}

    				}

    		} else {
    			foreach ( $cats as $cat ) {
    				$cat_color = get_theme_mod( 'cats_color_' . $cat->term_id, '#908e8e' );
    				echo '<a class="absp-cat prltv" style="background-color:' . esc_attr( $cat_color ) . ';" href="' . esc_url( get_category_link( $cat->term_id ) ) . '" title="' . esc_attr( $cat->name ) . '">' . esc_html( $cat->name ) . '</a>';
    			}
    		}
    	}
    }

Then in the same template file, find this code block:

    /**
     * Get category color
     */
    function greatmag_get_category_color( $cat_id = false ) {
    	if ( $cat_id ) {
    		$cat = $cat_id;
    	} else {
    		$cats = get_the_category();
    		$cat = $cats[0]->term_id;
    	}
    	$color = get_theme_mod( 'cats_color_' . $cat, '#908e8e' );

    	return $color;
    }

and replace it with:

    /**
     * Get category color
     */
    function greatmag_get_category_color( $cat_id = false ) {

      global $post;

    	if ( $cat_id ) {
    		$cat = $cat_id;
    	} else {
    		$cats = get_the_category();
    		$cat = $cats[0]->term_id;
    	}
    	$color = get_theme_mod( 'cats_color_' . $cat, '#908e8e' );

    	$post_cat = get_post_meta($post->ID, '_greatmag_child_post_cat', true);
      if( !empty($post_cat)  ) {
        $color = get_theme_mod( 'cats_color_' . $post_cat, '#908e8e' );
      }  

    	return $color;
    }

Regards,
Kharis

Hey Kharis,

No worries about the long delay. I just really appreciate that you take the time to help me with his :slightly_smiling_face:

It worked perfectly for the featured posted widget, however it did not work well for other widgets. The latest post widget still shows the wrong colour (but the right category) and the multiple category posts widget has the post displayed under both categories I choose instead of just the parent.

Is there any way to fix this?

Thanks again.

Hello there,

In the greatmag_get_post_cats() function, find this line of code:

    $cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' ); 

and replace it with:

    $cat_color = get_theme_mod( 'cats_color_' . $cats[0]->term_id, '#908e8e' );
    if( $post_cat ) {
    	$cat_color = get_theme_mod( 'cats_color_' . $post_cat, '#908e8e' );
    }

I am sorry, there’s no possibility to change this because of code limitation.

Regards,
Kharis

Worked like a charm!

Thanks so much!

Awesome! You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis