I am attempting to implement Zurb’s Foundation 5 in a development to enable me to utilize it’s functionality to create better page UIs within the wp-admin. However, for some reason Foundation’s JS is not working.

Here is source from a custom wp-admin page:

<!DOCTYPE html>
<!--[if IE 8]>
<html xmlns="http://www.w3.org/1999/xhtml" class="ie8 wp-toolbar"  lang="en-US">
<![endif]-->
<!--[if !(IE 8) ]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar"  lang="en-US">
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Profile ‹ Career Women — WordPress</title>
<script type="text/javascript">
addLoadEvent = function(func){if(typeof jQuery!="undefined")jQuery(document).ready(func);else if(typeof wpOnload!='function'){wpOnload=func;}else{var oldonload=wpOnload;wpOnload=function(){oldonload();func();}}};
var ajaxurl = '/wp-admin/admin-ajax.php',
    pagenow = 'users_page_your-profile',
    typenow = '',
    adminpage = 'users_page_your-profile',
    thousandsSeparator = ',',
    decimalPoint = '.',
    isRtl = 0;
</script>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel='stylesheet' id='foundation-loader-php-f-foundation-css-css'  href='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/foundation/loader.php?f=foundation.css&ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='foundation-loader-php-f-normalize-css-css'  href='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/foundation/loader.php?f=normalize.css&ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='admin-admin-css-css'  href='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/admin/admin.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='admin-events-css-css'  href='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Css/admin/events.css?ver=1.0.0' type='text/css' media='all' />
<link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='dashicons-css'  href='http://careerwomen.ca/wp-includes/css/dashicons.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='admin-bar-css'  href='http://careerwomen.ca/wp-includes/css/admin-bar.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='debug-bar-css'  href='http://careerwomen.ca/wp-content/plugins/debug-bar/css/debug-bar.dev.css?ver=20111209' type='text/css' media='all' />
<link rel='stylesheet' id='wp-admin-css'  href='http://careerwomen.ca/wp-admin/css/wp-admin.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='buttons-css'  href='http://careerwomen.ca/wp-includes/css/buttons.css?ver=3.9.1' type='text/css' media='all' />
<!--[if lte IE 7]>
<link rel='stylesheet' id='ie-css'  href='http://careerwomen.ca/wp-admin/css/ie.css?ver=3.9.1' type='text/css' media='all' />
<![endif]-->
<link rel='stylesheet' id='wp-auth-check-css'  href='http://careerwomen.ca/wp-includes/css/wp-auth-check.css?ver=3.9.1' type='text/css' media='all' />
<link rel='stylesheet' id='mymail-admin-css'  href='http://careerwomen.ca/wp-content/plugins/myMail/assets/css/admin.css?ver=1.6.6.3' type='text/css' media='all' />
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/jquery/jquery.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/jquery/jquery-migrate.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var userSettings = {"url":"/","uid":"1","time":"1403717225"};
/* ]]> */
</script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/utils.js'></script>
<script type="text/javascript">
    domain = "http://careerwomen.ca/";
</script><script type="text/javascript">var _wpColorScheme = {"icons":{"base":"#999","focus":"#2ea2cc","current":"#fff"}};</script>
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
</head>
<body class="wp-admin wp-core-ui no-js  debug-bar-maximized  users_page_your-profile auto-fold admin-bar branch-3-9 version-3-9-1 admin-color-fresh locale-en-us no-customize-support no-svg">
<script type="text/javascript">
    document.body.className = document.body.className.replace('no-js','js');
</script>
    <script type="text/javascript">
        (function() {
            var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\s+)(no-)?'+cs+'(\s+|$)');
            request = true;
            b[c] = b[c].replace( rcs, ' ' );
            b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
        }());
    </script>
<div id="wpwrap">
<a tabindex="1" href="#wpbody-content" class="screen-reader-shortcut">Skip to main content</a>
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
    <ul id="adminmenu" role="navigation"></ul>
</div>
<div id="wpcontent">
        <div id="wpadminbar" class="nojq nojs" role="navigation">
            <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
            <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
                <ul id="wp-admin-bar-root-default" class="ab-top-menu"></ul>            </div>
                        <a class="screen-reader-shortcut" href="http://careerwomen.ca/wp-login.php?action=logout&_wpnonce=d64cc433d5">Log Out</a>
                    </div>
            <div id='querylist'>
    <div id="debug-bar-actions">
        <span class="maximize">+</span>
        <span class="restore">–</span>
        <span class="close">×</span>
    </div>
    <div id='debug-bar-info'>
        <div id="debug-status">
            <div id='debug-status-site' class='debug-status'>
                    <div class='debug-status-title'>ks4003078.ip-142-4-208.net</div>
                                            <div class='debug-status-data'>#1</div>
                                    </div><div id='debug-status-php' class='debug-status'>
                    <div class='debug-status-title'>PHP</div>
                                            <div class='debug-status-data'>5.3.3</div>
                                    </div><div id='debug-status-db' class='debug-status'>
                    <div class='debug-status-title'>MySQL</div>
                                            <div class='debug-status-data'>5.1.73</div>
                                    </div><div id='debug-status-memory' class='debug-status'>
                    <div class='debug-status-title'>Memory Usage</div>
                                            <div class='debug-status-data'>35,273,824 bytes</div>
                                    </div><div id='debug-status-warning' class='debug-status'>
                    <div class='debug-status-title'>Please Enable</div>
                                            <div class='debug-status-data'>WP_DEBUG</div>
                                    </div>      </div>
    </div>
    <div id='debug-bar-menu'>
        <ul id="debug-menu-links">
                <li><a
                id="debug-menu-link-Debug_Bar_Object_Cache"
                class="debug-menu-link current"
                href="#debug-menu-target-Debug_Bar_Object_Cache">
                Object Cache            </a></li>
        </ul>
    </div>
    <div id="debug-menu-targets">
        <div id="debug-menu-target-Debug_Bar_Object_Cache" class="debug-menu-target"  style="display: block">
            <div id='object-cache-stats'><p><strong>Cache Hits:</strong> 406<br /><strong>Cache Misses:</strong> 53<br /></p><ul><li><strong>Group:</strong> options - ( 94.58k )</li><li><strong>Group:</strong> default - ( 0.03k )</li><li><strong>Group:</strong> users - ( 0.38k )</li><li><strong>Group:</strong> userlogins - ( 0.03k )</li><li><strong>Group:</strong> useremail - ( 0.05k )</li><li><strong>Group:</strong> userslugs - ( 0.03k )</li><li><strong>Group:</strong> user_meta - ( 3.58k )</li><li><strong>Group:</strong> counts - ( 0.16k )</li></ul></div>     </div>
            </div>
        </div>
<div id="wpbody">
<div id="wpbody-content" aria-label="Main content" tabindex="0">
        <div id="screen-meta" class="metabox-prefs">
            <div id="contextual-help-wrap" class="hidden no-sidebar" tabindex="-1" aria-label="Contextual Help Tab">
                <div id="contextual-help-back"></div>
                <div id="contextual-help-columns">
                    <div class="contextual-help-tabs">
                        <ul>
                                                </ul>
                    </div>
                    <div class="contextual-help-tabs-wrap">
                                            </div>
                </div>
            </div>
                </div>
        <div class="wrap" id="profile-page">
    <h2>
        Edit User
        <a href="user-new.php" class="add-new-h2">Add New</a>
    </h2>
    <form id="your-profile" action="http://careerwomen.ca/wp-admin/user-edit.php" method="post">
        <div class="row">
            <div id="wpz-user-profile" class="large-9 columns"></div>
            <div id="wpz-user-profile-widgets" class="large-3 columns"></div>
        </div>
        <div class="wpz-foundation wpz-foundation-tabs">
            <ul class="tabs vertical" data-tab>
                <li class="tab-title active"><a href="#panel1a">Tab 1</a>
                </li>
                <li class="tab-title"><a href="#panel2a">Tab 2</a>
                </li>
                <li class="tab-title"><a href="#panel3a">Tab 3</a>
                </li>
                <li class="tab-title"><a href="#panel4a">Tab 4</a>
                </li>
            </ul>
            <div class="tabs-content vertical">
                <div class="content active" id="panel1a">
                    <p>Panel 1 content goes here.</p>
                </div>
                <div class="content" id="panel2a">
                    <p>Panel 2 content goes here.</p>
                </div>
                <div class="content" id="panel3a">
                    <p>Panel 3 content goes here.</p>
                </div>
                <div class="content" id="panel4a">
                    <p>Panel 4 content goes here.</p>
                </div>
            </div>
         </div>
        <p class="submit">
            <input type="submit" name="submit" id="submit" class="button button-primary" value="Update User">
        </p>
    </form>
</div>
<script type="text/javascript">
// jQuery(document).foundation();
</script>
<div class="clear"></div></div><!-- wpbody-content -->
<div class="clear"></div></div><!-- wpbody -->
<div class="clear"></div></div><!-- wpcontent -->
<div id="wpfooter">
        <p id="footer-left" class="alignleft">
        <span id="footer-thankyou">Thank you for creating with <a href="https://wordpress.org/">WordPress</a>.</span>   </p>
    <p id="footer-upgrade" class="alignright">
        Version 3.9.1   </p>
    <div class="clear"></div>
</div>
    <div id="wp-auth-check-wrap" class="hidden">
    <div id="wp-auth-check-bg"></div>
    <div id="wp-auth-check">
    <div class="wp-auth-check-close" tabindex="0" title="Close"></div>
            <div id="wp-auth-check-form" data-src="http://careerwomen.ca/wp-login.php?interim-login=1"></div>
            <div class="wp-auth-fallback">
        <p><b class="wp-auth-fallback-expired" tabindex="0">Session expired</b></p>
        <p><a href="http://careerwomen.ca/wp-login.php" target="_blank">Please log in again.</a>
        The login page will open in a new window. After logging in you can close it and return to this page.</p>
    </div>
    </div>
    </div>
    <script type='text/javascript' src='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Js/foundation/foundation.min.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-content/plugins/wordpressurize-core/Js/foundation/load.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/hoverIntent.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var commonL10n = {"warnDelete":"You are about to permanently delete the selected items.n  'Cancel' to stop, 'OK' to delete."};
/* ]]> */
</script>
<script type='text/javascript' src='http://careerwomen.ca/wp-admin/js/common.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/admin-bar.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-content/plugins/debug-bar/js/debug-bar.dev.js'></script>
<script type='text/javascript' src='http://careerwomen.ca/wp-admin/js/svg-painter.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var heartbeatSettings = {"nonce":"d62090b23b"};
/* ]]> */
</script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/heartbeat.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var authcheckL10n = {"beforeunload":"Your session has expired. You can log in again from this page or go to the login page.","interval":"180"};
/* ]]> */
</script>
<script type='text/javascript' src='http://careerwomen.ca/wp-includes/js/wp-auth-check.js'></script>
<div class="clear"></div></div><!-- wpwrap -->
<script type="text/javascript">if(typeof wpOnload=='function')wpOnload();</script>
</body>
</html>

I have removed irrelevant code, such as the wp-admin menu and admin bar.

Here is the contents of my load.js file:

jQuery.noConflict();
jQuery(document).foundation();

For some reason the Foundation tabs functioality is not working, which leas me to believe there is a JS conflict.

Any help would be appreciated!

Read more here: Using Foundation 5 in WordPress Administration Area


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.

Related Wordpress search:

, , ,

Wordpress related questions and answers: