Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: integrating MDB with an existing wordpress theme

Adriano22 free asked 6 years ago


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() . '/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?

 

 

 


Arkadiusz Cacko staff commented 6 years ago

To implement mdbootstrap into existing theme you need to follow the same steps as in this part of tutorial.


Adriano22 free 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 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 free commented 6 years ago

I imported the CSS files to a css folder within the theme directory...  "/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 commented 6 years ago

Do you see any errors in your console logs?


Adriano22 free commented 6 years ago

yes, I updated the original post with the errors. Thanks


Bartłomiej Malanowski staff 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 free 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 commented 6 years ago

I've just downloaded and tested your template and for me everything works fine.


Adriano22 free 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • ForumUser: 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