Problem with Child-Theme using of foundation-framework [closed]

Question

Closed. This question is off-topic. It is not currently accepting answers.

---

Want to improve this question? Update the question so it's on-topic for WordPress Development Stack Exchange.

Closed 2 years ago.

Improve this question

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?

Answer 1

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.