AnsPress 2.0 – Add icon class in user nav menu
Hi,
In anspress-master\includes\user.php the user-profile page is rendered and each tab in the menu is rendered by this code:
$o .= '<li'.( $user_page == $k ? ' class="active"' : '' ).'> <a href="'. $m['link'] .'" class="ap-user-menu-'.$k.$class.'">'.$m['title'].'</a> </li>';
This is near line 604 in https://github.com/wp3/anspress/blob/master/includes/user.php.
I would like a change in this rendering because the current implementation has issues when you add a custom tab and use a font-awesome icon as tab-icon. Since the icon class is applied to the anchor tag, the font of the link text is affected by the font-awesome style. So could you please change the tab rendering to something like this:
$o .= '<li'.( $user_page == $k ? ' class="active"' : '' ).'> <a href="'. $m['link'] .'" class="ap-user-menu-'.$k.'"><i class="'.$class.'"></i>'.$m['title'].'</a> </li>';
So I added a container for the icon.
Only remaining issue with this replacement code is that it does not add a space between the icon and the link text. Though that should be handled in CSS (I think) and I’m not an expert in that area, so I leave that to people with more experience 🙂
Thanks,
Michiel
I have added a better sorting function and will use it for ordering user menu.
/**
* Sort array by order value. Group array which have same order number and then sort them.
* @param array $array
* @return array
* @since 2.0.0-alpha2
*/
function ap_sort_array_by_order($array){
$new_array = array();
if(!empty($array) && is_array($array) ){
$group = array();
foreach($array as $k => $a){
$order = $a['order'];
$group[$order][] = $a;
}
usort($group, function($a, $b) {
return key($a) - key($b);
});
foreach($group as $a){
foreach($a as $newa)
$new_array[] = $newa;
}
return $new_array;
}
}
Yeh, I will add it, do not worry. 🙂
>Yeh, I will add it, do not worry. 🙂
hehe 🙂 No, I saw the above answer about the sorting function was actually an answer to my other question (pull-request) and I thought you might have considered this question to be completed… well guess I can be confident now anyway 🙂 Thanks for all the effort!
Please do not forget the styling as proposed in the question. Thanks
As I seen my code, its already accept class arguments, so you can easily filter and pass your icon class, like: [‘class’] = ‘icon-anspress’;. If you need a detailed instruction then let me know.
I know this is possible, but the issue is that – if you use a font-awesome class, the style is also applied to the title because the style is set on the a-tag. My proposal (see question) was to inject an i-tag inside the a-tag so the icon style only applies to the icon and not to the title. With your last commit, I still get bad styling on the tab I add because of the class applied in the way you described.
And how about the change in rendering the icon? Can you apply that too? Else using font-awesome icons isn’t that awesome ;-/