Many users want to get some custom features on their WordPress driven websites. IPBWI for WordPress has some nice out-of-the-box features, but this tutorial shows how to create own, unique and fully customizeable features with some snippets of code.
This article is dedicated to:
- developers who want to unleash the whole power of IPBWI for WordPress
- customers who want to see what’s possible with IPBWI for WordPress
- customers who want to get an idea for custom features which can be ordered as programming service from me.
To fully understand the content and benefit from this tutorial, there are advanced skills required in PHP, HTML, CSS and JS/AJAX (JQUERY).
Target: Creating a userbar looking and acting like the default userbar in IP.board
With IPBWI for WordPress, it’s quite easy to get that done with few lines of sourcecode.
The code snippet assumes that IP.board has been configured with search engine friendly URLs, so I’ve not implemented a detection of the friendly URL settings of the board. If you are using other settings in your IP.board, you’ll have to edit the links within this snippet.
I’ve made the userbar about 90% sync with the original one from IP.board. If you want to get a userbar being 100% sync with your IP.board’s theme, you have to customize the code snippet or just order me doing that for you.
If you want to add that userbar as top bar to your WordPress website, you’ll have to edit the header.php within your active WordPress theme only. You may want to export the CSS commands to your style.css, too.
The PHP / HTML / CSS stuff
This is just the output of the userbar. You should export the inline CSS settings into your external CSS file of your theme to make the code more tidy on a public release of your website. While developing, the inline CSS helps for faster customization of the elements.
You can insert this snippet right after your
<body>
-Tag of your header.php, but it’s up to you inserting it on any place within the body-tags.
<?php
echo '
<div style="font-family:arial,sans-serif !important;width:100%;height:25px;line-height:25px;background-image:url('.$GLOBALS["ipbwi"]->getBoardVar("url").'public/style_images/master/user_navigation.png);background-color:#323232;">
<div style="width:90%;padding:0px 5%;margin:auto;color:#FFF;">
';
// logged in
if($GLOBALS['ipbwi']->member->isLoggedIn()){
echo '<div style="width:200px;">';
// get notifications
$sql = $GLOBALS['ipbwi']->ips_wrapper->DB->query('SELECT notify_to_id FROM '.$GLOBALS['ipbwi']->getBoardVar('sql_tbl_prefix').'inline_notifications WHERE notify_read="0"');
$notifications = $GLOBALS['ipbwi']->ips_wrapper->DB->getTotalRows($sql);
// print admin link
if($GLOBALS['ipbwi']->member->isAdmin()){
echo'
<div style="float:left;margin-right:10px;">
<a style="color:#8A8A8A;" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'admin/index.php">AdminCP</a>
</div>';
}
// print supermod link
if($GLOBALS['ipbwi']->member->isSuperMod()){
echo'
<div style="float:left;">
<a style="color:#8A8A8A;" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=modcp">ModeratorCP</a>
</div>';
}
// print user actions
echo'
</div>
<div style="width:250px;margin-left:auto;text-align:right;">
<div style="position: relative;">
<div class="ipbwiLatestMessages_content" style="display:none;color:#000;position: absolute;top: 25px;left: 0px;width: 270px;z-index: 9999;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);border-radius: 0 0 6px 6px;overflow: hidden;padding: 10px;background-color:#fff;"></div>
<div class="ipbwiNotifications_content" style="display:none;color:#000;position: absolute;top: 25px;left: 0px;width: 270px;z-index: 9999;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);border-radius: 0 0 6px 6px;overflow: hidden;padding: 10px;background-color:#fff;"></div>
<div class="ipbwiMember_content" style="display:none;color:#000;position: absolute;top: 25px;left: 700px;width: 270px;z-index: 9999;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.58);border-radius: 0 0 6px 6px;overflow: hidden;padding: 10px;background-color:#fff;">
<a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'user/'.$member["member_id"].'-'.$member["members_seo_name"].'/" class="ipsUserPhotoLink left">'.$GLOBALS["ipbwi"]->member->avatar().'</a>
<div class="left">
<form id="statusForm" action="http://www.mesechantillonsgratuits.fr/forum/index.php?app=members&module=profile&section=status&do=new&k='.$form_hash.'&id='.$member["member_id"].'" method="post">
<input type="text" id="statusUpdateGlobal" name="content" class="input_text" style="width: 97%" /><br />
<input type="submit" id="statusSubmitGlobal" class="ipsButton_secondary" value="Update" />
<br />
<hr />
</form>
<ul id="links">
<li id="user_profile"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'user/'.$member["member_id"].'-'.$member["members_seo_name"].'/" title="Votre profil">My Profile</a></li>
<li id="user_ucp"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=usercp">My Settings</a></li>
<li id="user_content"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=search&do=user_activity&mid='.$member["member_id"].'">My Content</a></li>
<li id="user_likes"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=search&do=followed">Content | Follow</a></li>
<li id="user_friends"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=members&module=profile&section=friends&do=list" class="manage_friends">Manage Friends</a></li>
<li id="user_enemies"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=usercp&tab=core&area=ignoredusers" class="manage_enemies">Manage Ignore Prefs</a></li>
<li id="user_pm"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=members&module=messaging">Personal Messenger</a></li>
</ul>
</div>
<div style="float:left;margin-right:10px;background-image:url('.$GLOBALS["ipbwi"]->getBoardVar("url").'public/style_images/master/icon_inbox.png);background-repeat:no-repeat;background-position:5px -5px;">
<a class="ipbwiLatestMessages" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=members&module=messaging" style="display:block;width:30px;height:25px;line-height:25px;">'.($GLOBALS["ipbwi"]->pm->numNewPMs() ? '<span style="font-family:arial,sans-serif;background-color:#CF2020;border-radius: 2px 2px 2px 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;color: #FFFFFF !important;font-size: 10px;height: 12px;line-height: 12px;padding: 0 4px;position: relative;text-align: center;top: -8px;left: -18px;">'.$GLOBALS["ipbwi"]->pm->numNewPMs().'</span>' : '').'</a>
</div>
<div style="float:left;margin-right:10px;background-image:url('.$GLOBALS["ipbwi"]->getBoardVar("url").'public/style_images/master/icon_notify.png);background-repeat:no-repeat;background-position:5px -5px;">
<a class="ipbwiNotifications" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=usercp&area=notificationlog" style="display:block;width:30px;height:25px;line-height:25px;">'.($notifications ? '<span style="font-family:arial,sans-serif;background-color:#CF2020;border-radius: 2px 2px 2px 2px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.1) inset;color: #FFFFFF !important;font-size: 10px;height: 12px;line-height: 12px;padding: 0 4px;position: relative;text-align: center;top: -8px;left: -18px;">'.$notifications.'</span>' : '').'</a>
</div>
<div style="float:left;margin-right:10px;"><a class="ipbwiMember" style="color:#FFF;" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'user/'.$member["member_id"].'-'.$member["members_seo_name"].'/">'.$member["members_display_name"].'</a></div>
<div style="float:left;"><a style="color:#FFF;" href="'.wp_logout_url( $redirect ).'">Sign Out</a></div>
<div style="clear:both;"></div>
</div>
';
// logged out
}else{
echo'
<div style="width:170px;margin-left:auto;text-align:right;">
<div style="float:left;margin-right:10px;"><a href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=global§ion=login">Sign In</a></div>
<div style="float:left;"><a style="background-color:#7BA60D;border: 1px solid #7BA60D;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 4px rgba(0, 0, 0, 0.4);color: #FFFFFF;display: block;padding: 0px 3px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);height:21px;line-height:21px;" href="'.$GLOBALS["ipbwi"]->getBoardVar("url").'index.php?app=core&module=global§ion=register">Create Account</a></div>
<div style="clear:both;"></div>
</div>';
}
echo '</div></div>';
?>
The javascript / AJAX stuff
JQUERY is an awesome AJAX API which brings tons of great eyecandy features. Glad that JQUERY is included and loaded in WordPress by default, so we don’t need to install it. Just insert the following snippet right before the
</head>
tag within your header.php of your theme’s directory to add support of latest messages list and notification list. The lists will be viewed smooth on your wordpress site with the same content as in IP.board.
<?php
$member = $GLOBALS['ipbwi']->member->info();
$form_hash = md5($member['email'].'&'.$member['member_login_key'].'&'.$member['joined']);
?>
<script type='text/javascript'>
jQuery(document).ready(function() {
jQuery(".ipbwiLatestMessages").click(
function() {
jQuery(".ipbwiNotifications_content").hide("fast");
jQuery(".ipbwiMember_content").hide("fast");
jQuery(".ipbwiLatestMessages_content").toggle("fast");
jQuery.getJSON("<?php echo $GLOBALS["ipbwi"]->getBoardVar("url"); ?>index.php?app=members&module=ajax§ion=messenger&do=getInboxDropDown&secure_key=<?php echo $form_hash; ?>", function(json) {
jQuery(".ipbwiLatestMessages_content").html(json.html);
});
return false;
}
);
jQuery(".ipbwiNotifications").click(
function() {
jQuery(".ipbwiLatestMessages_content").hide("fast");
jQuery(".ipbwiMember_content").hide("fast");
jQuery(".ipbwiNotifications_content").toggle("fast");
jQuery.getJSON("<?php echo $GLOBALS["ipbwi"]->getBoardVar("url"); ?>index.php?app=core&module=ajax§ion=notifications&do=getlatest&secure_key=<?php echo $form_hash; ?>", function(json) {
jQuery(".ipbwiNotifications_content").html(json.html);
});
return false;
}
);
jQuery(".ipbwiMember").click(
function() {
jQuery(".ipbwiLatestMessages_content").hide("fast");
jQuery(".ipbwiNotifications_content").hide("fast");
jQuery(".ipbwiMember_content").toggle("fast");
return false;
}
);
});
</script>
Some hints
- read the sourcecode step by step and take your time to fully understand it. I’ve decided against commenting every single line of code, because it’s nothing complex, it’s just throwing some PHP vars into HTML code.
- just var_dump(); the arrays I’ve used in the PHP-code to get all fields viewed, e.g. var_dump($member);
- visit IPBWI documentation or IPBWI live examples to get more information about the IPBWI API.
- Download and read the source of the API. You can replace the encoded version of the API in /wordpress/wp-content/plugins/ipbwi/lib/ipbwi/ with the opensource GPL version for easier development and enhancing the API with custom features.
- This tutorial does not deliver an 100% integration of the userbar, but it gives you all information programming that by your own.
- Please note, that AJAX/JSON requests are normally limited to the same domain, so I recommend using that feature when IP.board and WordPress are on the same domain, too. Check the same origin policy for further information about that security feature. There may be complex workarounds possible, just contact me for getting that done for you, if your business depends on such a solution.
- You may comment, contribute and discuss here about that userbar feature. Please note that I will not give any further support for free. This tutorial is just a jumpstart to give you an idea what’s possible with IPBWI for WordPress. I’ll be glad to offer you a paid consulting service or developing service for any custom feature.
? Big thanks to the canadian guys for the jump start for IPBWI 3!
No Forum Discussion started yet.
You are a guest
Insufficient rights