Using Foundation 5 in WordPress Administration Area

Question

I am attempting to implement Zurb's Foundation 5 in a development to enable me to utilize its 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 &lsaquo; Career Women &#8212; 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&#038;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&#038;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&#038;subset=latin%2Clatin-ext&#038;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&#038;_wpnonce=d64cc433d5">Log Out</a>
                    </div>

            <div id='querylist'>

    <div id="debug-bar-actions">
        <span class="maximize">+</span>
        <span class="restore">&ndash;</span>
        <span class="close">&times;</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 functionality is not working, which leads me to believe there is a JS conflict.

Any help would be appreciated!

first, jQuery is already in noConflict, so the first line of your load.js is unnecessary. are you getting any javascript errors in the console? — Milo, Commented Jun 26, 2014 at 4:22
@Milo Thanks for your assistance. Fortunately, and unfortunately, there are no console errors whatsoever. — the Freelancer, Commented Jun 26, 2014 at 13:30

kaiser · Accepted Answer · 2014-06-26 01:22:13Z

2

Sometimes the best recommendation is to abandon an idea. And this is my recommendation: Do not try to push Interface elements from interface A into interface B.

Imagine that you bought yourself a Porsche. And then imagine you get into your new car, which comes with a set of expectations that you have, and suddenly you are looking at the dashboard of a Jaguar or a Nissan.

The discussion about custom UIs happened years ago. And at some point people got around the fact that plugins and themes should blend in to deliver a seamless experience. You don't want to force your users to learn a visually and technically different interface that only applies to 5% of the admin area, right?

answered Jun 26, 2014 at 1:22

kaiser

50.8k27 gold badges150 silver badges244 bronze badges

Actually there will be nothing more to learn for my users. But thanks for the opinion.
– the Freelancer
Commented Jun 26, 2014 at 2:28
@theFreelancer You should ask another question about that on User Experience SE.
– kaiser
Commented Jun 26, 2014 at 8:39

Add a comment |

Stack Exchange Network

Using Foundation 5 in WordPress Administration Area

1 Answer 1

Your Answer

Not the answer you're looking for? Browse other questions tagged
jquery
wp-admin
javascript
or ask your own question.

Hot Network Questions

Using Foundation 5 in WordPress Administration Area

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged jquerywp-adminjavascript or ask your own question.

Related

Hot Network Questions

Not the answer you're looking for? Browse other questions tagged
jquery
wp-admin
javascript
or ask your own question.