getButterfly Logo getButterfly

How to create a notifications section

If you are not using our Noir UI theme, you can easily create an ImagePress 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.