getButterfly Logo getButterfly

If you are not using our Noir UI theme, you can easily create a notifications section for any theme.

If you want to create a separate page for the notifications, use the [notifications] shortcode. If you want to create a dynamic menu item, use the ip_notifications_menu_item() template function.

If you are using a custom menu in your theme, use the following code:

<?php if(is_user_logged_in()) { ?>
    <div class="bell-pepper"><?php echo ip_notifications_menu_item(); ?></div>
<?php } ?>

You can style the notifications number and the bell as you see fit. Here’s some CSS help:

.notifications-bell {
    padding: 0 12px;
    font-size: 20px;
}

.bell-pepper {
    display: inline-block;
    position: relative;
}

.bell-pepper .notifications-container {
    right: 0;
}

.notifications-bell:hover {
    color: #E58652;
    background: none;
    box-shadow: none;
}

.notifications-bell:hover i {
    color: #E58652;
}

.notifications-bell:hover sup {
    background-color: #ffffff;
    color: #E58652;
}

.notifications-container a {
    color: #E58652;
    background: none;
}

.notifications-container a:hover {
    color: #ffffff;
    background: none;
}

The example above is taken from the Noir UI theme.


Subscribe to getButterfly Blog

Once a week or so we send an email with our best content. We never bug you, we just send you our latest piece of content.



If you found any value in this post, agree, disagree, or have anything to add - please do. I use comments as my #1 signal for what to write about. Read our comment policy before commenting! Comments such as "Thank you!", "Awesome!", "You're the man!" are either marked as spam or stripped from URL.

Leave a reply