-1

I have created a child theme. The parent theme uses Foundation-Framework. I also have included foundation framework to my child theme and trying to add a simple navbar with dropdown but the dropdown is not seems to be a dropdown. Here is my functions.php

<?php
add_action( 'wp_enqueue_scripts', '_my_child_theme_styles', PHP_INT_MAX );
/**
 * Enqueue parent theme styles considering styles dependencies.
 */
function _my_child_theme_styles() {
    // Parent styles that need to be loaded before the child theme styles.
    $parent_styles = array(  'parent_style_1' => 'style.css', 'parent_style_2' => 'styles/modern.css' );
    // Enqueue parent styles using the custom handles and considering styles dependencies.
    foreach( $parent_styles as $handle => $style ) {
        wp_enqueue_style( $handle, get_template_directory_uri() . '/' . $style, array( 'hrb-normalize', 'hrb-foundation' ) );
    }

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array_keys( $parent_styles )
    );


}

//=========================
//      OTHER STYLES
//=========================
function getthejobdone_styles() {
    wp_enqueue_style( 'OpenSans', 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700' ); //font-family: 'Open Sans', sans-serif;
    wp_enqueue_style( 'font-awesome', get_theme_file_uri('/css/vendor/font-awesome.min.css') );
    wp_enqueue_style( 'foundationCss', get_theme_file_uri('/css/vendor/foundation.css') );
}
add_action( 'wp_enqueue_scripts', 'getthejobdone_styles' );


//=============================
//      OTHER JAVASCRIPTS wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer )
//=============================
function getthejobdone_js() {
    wp_enqueue_script( 'waypoints', get_theme_file_uri('/js/jquery.waypoints.min.js'), array('jquery'), '', true );
    wp_enqueue_script( 'what-input-JS', get_theme_file_uri('/js/vendor/what-input.js'), NULL, NULL, true );
    wp_enqueue_script( 'foundationJS', get_theme_file_uri('/js/vendor/foundation.js'), array('jquery'), '6.4.2', true );
    wp_enqueue_script( 'AppJS', get_theme_file_uri('/js/app.js'), array('jquery'), NULL, true );
}
add_action( 'wp_enqueue_scripts', 'getthejobdone_js' );

//=====================
//      FEATURES
//=====================
function getthejobdone_features() {
    add_theme_support('title-tag'); // dynamic title for every pages
}
add_action( 'after_setup_theme', 'getthejobdone_features' );

If I cut foundation.js and paste it just before the $parent_styles then the dropdown works but there shows a lot of errors in the console. So where I am doing wrong and how to fix it?

closed as off-topic by Nathan Johnson, Jacob Peattie, Krzysiek Dróżdż, TheDeadMedic, Jack Johansson Apr 20 '18 at 19:05

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third party plugins and themes are off topic, they are better asked about at their developers' support routes." – Nathan Johnson, Jacob Peattie, Krzysiek Dróżdż, TheDeadMedic, Jack Johansson
If this question can be reworded to fit the rules in the help center, please edit the question.

  • If your parent theme already has foundation then why are you adding it again? Any scripts and styles your parent theme loads will be on the child theme as well. – ngearing Apr 14 '18 at 20:30
  • Thank you for figuring it out but without adding foundation to my child theme it's not working anymore, probably I m missing something in child theme. – shihab Apr 14 '18 at 20:34
  • Why doesn't it work? What sort of errors are you getting? Does foundation require a special class name or html structure to work correctly? – ngearing Apr 14 '18 at 20:51
  • Yes, foundation is very similar to bootstrap and I used it's classes properly from their docs but it's just not working, obviously I m doing something wrong which still I can't figure it out. Bellow is the demo navbar taken from their docs – shihab Apr 14 '18 at 20:58
  • <ul class="menu dropdown" data-dropdown-menu> <li><a href="#">One</a></li> <li> <a href="#">Two</a> <ul class="menu"> <li><a href="#">dd-1</a></li> <li><a href="#">dd-2</a></li> <li><a href="#">dd-3</a></li> </ul> </li> <li><a href="#">Three</a></li> <li><a href="#">Four</a></li> </ul> – shihab Apr 14 '18 at 21:00
2

So, after a chat discussion with the OP, I found out that the theme being used was HireBee. After some investigation it appears that HireBee only uses a very minimal version of the Foundation framework, which didn't include the Menu and Dropdown Menu components.

The answer in this case would be to dequeue the parent themes version of the Foundation framework CSS:

// Disable the HireBee Foundation framework.
wp_dequeue_style( 'hrb-foundation-css' );

and then download a custom version of the Foundation framework from https://foundation.zurb.com/sites/download.html/ including the required components - in this case the Navigation components 'Menu' and 'Dropdown Menu'

The customised version of the Foundation framework will then need to be enqueued from the Child themes functions.php file.

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