top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to change color of active links individually in WordPress?

0 votes
486 views

I have a navigation menu I want each link within it will be a different color when active.
I do something like this:

.side_bar_nav li.current-menu-item a{
    color: #ff6633;
}

But this gives each link with the same color when active. But I want to target each link individually and give it its own color.
In below this is one of the link which I want to individual color when it active.

<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-9 current_page_item menu-item-49">
  <a href="http://fyberproperty.co.uk/">home</a>
</li>

Can anybody help me how I set its individual color when it active?

posted Jun 2, 2017 by Ranjit Bera

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Since your li elements have a unique ID, you can use the following code:

.page-id-9 #menu-item-49 a {
  color: red;
}
answer Jun 20, 2017 by Deepa
Similar Questions
0 votes

I am looking for the user to redirect to the home page when the user tries to access the video permalink. So, how to automatically remove default video links.

function wpb_imagelink_setup() {
$image_set = get_option( 'image_default_link_type' );

if ($image_set !== 'none') {
    update_option('image_default_link_type', 'none');
  }
}
add_action('admin_init', 'wpb_imagelink_setup', 10);

I tried the above code, but it doesn't work

0 votes

I am currently working on my wordpress site and have started to use a timeline. There are next/previous buttons in the post, but I want them to display the post title instead of Next/Previous. I have looked over the wordpress code for this, but the dev is using non-standard code to achieve it.

Could somebody take a look at the code and tell me what I need to change.

<div class="clearfix"></div>
            </div>
            <div class="timeline-info">
                <div class="timeline-content">
                    <?php 
                    $content =  preg_replace ('#<embed(.*?)>(.*)#is', ' ', get_the_content(),1);
                    $content =  preg_replace ('@<iframe[^>]*?>.*?</iframe>@siu', ' ', $content,1);
                    $content =  preg_replace ('/<source\s+(.+?)>/i', ' ', $content,1);
                    $content =  preg_replace ('/\<object(.*)\<\/object\>/is', ' ', $content,1);
                    $content =  preg_replace ('#\[video\s*.*?\]#s', ' ', $content,1);
                    $content =  preg_replace ('#\[audio\s*.*?\]#s', ' ', $content,1);
                    $content =  preg_replace ('#\[/audio]#s', ' ', $content,1);
                    preg_match_all('#\bhttps?://[^\s()<>]+(?:\([\w\d]+\)|([^[:punct:]\s]|/))#', $content, $match);
                    foreach ($match[0] as $amatch) {
                        if(strpos($amatch,'soundcloud.com') !== false){
                            $content = str_replace($amatch, '', $content);
                        }elseif(strpos($amatch,'youtube.com') !== false){
                            $content = str_replace($amatch, '', $content);
                        }
                    }
                    $content = preg_replace('%<object.+?</object>%is', '', $content,1);
                    echo apply_filters('the_content',$content);?>
                </div>
            </div>
            <?php 
            $we_sevent_navi = get_option('wpex_navi');
            if($we_sevent_navi!='no'){
                $wpex_navi_order = get_option('wpex_navi_order');
                $preevtrsl = get_option('wpex_text_prev')!='' ? get_option('wpex_text_prev') : esc_html__('Previous article','wp-timeline');
                $nextevtrsl = get_option('wpex_text_next')!='' ? get_option('wpex_text_next') : esc_html__('Next article','wp-timeline');
                if($wpex_navi_order!='ct_order'){ ?>
                    <div class="timeline-navigation defa">
                        <div class="next-timeline">
                            <?php next_post_link('%link', $nextevtrsl) ?>
                        </div>
                        <div class="previous-timeline">
                            <?php previous_post_link('%link', $preevtrsl) ?>
                        </div>
                    </div>
                    <?php 
                }else{
                    wpex_next_previous_timeline($preevtrsl,$nextevtrsl);
                }
            }?>
            <div class="clearfix"></div>
        </div>
  </div>
+2 votes

I have moderate level PHP programming skills. I am also interested in merging those skills inside of the WordPress app. With their advanced responsive design themes and many other functions it seems like a good idea. I have tried loading some PHP plug-ins in WP – but I don't seem to get them to do more than basics.

Can anybody help me on how I can get started working with PHP/MySQL inside of the WordPress app?

...