integrating MDB with an existing wordpress theme


Topic: integrating MDB with an existing wordpress theme

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

 

 

 


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.


Please insert min. 20 characters.

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