Topic: integrating MDB with an existing wordpress theme
Hi, I understand there is a guide (found here: https://mdbootstrap.com/education/wordpress/theme-3/) to implement mdbootstrap to create a new theme but how do you implement it into an existing wordpress theme?
I have already built my website using the "twentyseventeen" theme and would like to intergrate some of the functions from mdbootstrap such as database tables onto my website.
Since the functions.php already existed in the theme directory, I added the needed functions to the bottom of the existing functions.php file:
/**
* Include CSS files
*/
function theme_enqueue_scripts() {
wp_enqueue_style( 'Font_Awesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
wp_enqueue_style( 'Bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'MDB', get_template_directory_uri() . '/css/mdb.min.css' );
wp_enqueue_style( 'Style', get_template_directory_uri() . 'https://mdbcdn.b-cdn.net/style.css' );
wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery-3.3.1.min.js', array(), '3.3.1', true );
wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array('jquery'));
wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'));
wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );
?>
The current errors I am receiving in the console are:
Failed to load resource: the server responded with a status of 404 (Not Found)
mdb.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
style.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
/database/css/addons/datatables.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
popper.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.3.1.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
mdb.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
mdb.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
datatables.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
style.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
/database/css/addons/datatables.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery-3.3.1.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
popper.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
mdb.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
datatables.min.js:1
Failed to load resource: the server responded with a status of 404 (Not Found)
(index):172 Uncaught TypeError: $ is not a function
at (index):172
mdb.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
style.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
datatables.min.css:1
Failed to load resource: the server responded with a status of 404 (Not Found)
Is there an existing wordpress function within functions.php which I need to change in order to get this working?
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.11
- Device: desktop
- Browser: Chrome
- OS: windows 10
- Provided sample code: Yes
- Provided link: No
Related topics
Arkadiusz Cacko staff pro premium priority commented 6 years ago
To implement mdbootstrap into existing theme you need to follow the same steps as in this part of tutorial.
Adriano22 commented 6 years ago
I followed the tutorial but it appears that all the libraries fail to link. For example, for each resource such as "bootstrap.min.css:1" I get Failed to load resource: the server responded with a status of 404 (Not Found). Is there a file in the wordpress theme that I need to modify to insure that it is linking correctly?
Bartłomiej Malanowski staff pro premium commented 6 years ago
Probably, the path is incorrect or you forgot to put CSS files to your project. How do you import your CSS files?
Adriano22 commented 6 years ago
I imported the CSS files to a css folder within the theme directory... "https://mdbcdn.b-cdn.net/wp-content/themes/twentyseventeen_mdb/css/" within this directory, it contains all the css files that the tutorial said to paste over.
Bartłomiej Malanowski staff pro premium commented 6 years ago
Do you see any errors in your console logs?
Adriano22 commented 6 years ago
yes, I updated the original post with the errors. Thanks
Bartłomiej Malanowski staff pro premium commented 6 years ago
Could you please share your project with us? You can put it on GitHub or somewhere else where we could see the code
Adriano22 commented 6 years ago
Sure I have added the entire theme to github below:
https://github.com/AdrianoNicolucci/MDBoostrap-intergration-with-MDB/blob/master/functions.php
Thanks for looking into this.
Arkadiusz Cacko staff pro premium priority commented 6 years ago
I've just downloaded and tested your template and for me everything works fine.
Adriano22 commented 6 years ago
were you able to successfully call any mdb functions? I was able to load the template fine but when I attempted to use the datatable fuctionality, on my html page, this is what caused the errors I mentioned above.