Topic: Best way to integrate mdbootstrap pro in a wordpress template wordpress

jasubal pro asked 5 years ago


Hi, I successfully followed the wordpress-mdb integration tutorial. But now i would like to go a set away and integrate mdbootstrap Pro in my new wp theme. Can you please give some advices about the best way to do it? Thanks in advance!

If you'd like to use MDB Pro with WordPress instead of MDB Free all you need to do is replace mdb.css and mdb.js (+ its minified versions) with files from your MDB Pro package. After you do that, you'll be able to enjoy features from MDB Pro

Adriano22 free commented 5 years ago

is it possible to intergrate MDB free into an existing wordpress theme or only a new one?


Dawid Adach pro commented 5 years ago

It's definitely possible, simply follow this lesson: https://mdbootstrap.com/education/wordpress/theme-3/ 


Adriano22 free commented 5 years ago

thanks dawid....yea I attempted this but it didn't work as it is for creating a new theme and not adding MDB into an existing theme. I tried importing the folders from the zip directory into my existing theme on wordpress and it failed to recognize the folders still so I'm sure I'm missing some steps. I'm concerned I will mess up the current theme if I start replacing the existing functions.php and index.php file. 

In short, what I am trying to do is add MDB datatable functionality to my wordpress website so I can read data from an API to dynamically display the data.



Hi,I have followed the tutorial on https://mdbootstrap.com/education/wordpress/theme-3/ . Everything seems to be fine until I need to use components with lightbox, or Accordion functionalities. I´m not sure on how I should include the initialize js code. Can you please advise?Cheers!Alfredo


Mateusz Łubianka staff commented 4 years ago

Hi @a.mendoza.contact@gmail.com,

Can you show me how did you try to do this now? I'll try to help you.

Best,


a.mendoza.contact@gmail.com free commented 4 years ago

Hi Mateusz,

Sorry for the delay. Is a bit hard to follow up on this platform, as I don´t receive any email or notification when you reply. I will check this daily now onwards.

I'm adding the MDB files in the functions.php

// Scripts y Styles function ablate_scripts_styles(){

wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.3.1' );
wp_enqueue_style( 'mdb', get_template_directory_uri() . '/css/mdb.min.css', array(), '4.9.0' );
wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css', array(), '1.0.0' );
wp_enqueue_style( 'twentyTwenty', get_template_directory_uri() . '/css/twentytwenty-no-compass.css', array(), '1.2.1' );


//Main Style
wp_enqueue_style( 'style', get_stylesheet_uri() , array(), '1.0.0' );


//Scripts
wp_enqueue_script( 'fontAwesome', get_template_directory_uri() . '/js/all.min.js', array(), '5.12.1', true);
wp_enqueue_script( 'jQuery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.3.1', true);
wp_enqueue_script( 'Tether', get_template_directory_uri() . '/js/popper.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'Bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'MDB', get_template_directory_uri() . '/js/mdb.min.js', array(), '4.9.0', true );
wp_enqueue_script( 'ajax', 'https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js', array(), '1.10.1', true);
wp_enqueue_script( 'jQueryEvent', get_template_directory_uri() . '/js/jquery.event.move.js', array(), '1.0.0', true);
wp_enqueue_script( 'jQueryTwenty', get_template_directory_uri() . '/js/jquery.twentytwenty.js', array(), '1.0.0', true);


wp_enqueue_script( 'scripts', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0', true);

} add_action('wp_enqueue_scripts' , 'ablate_scripts_styles');

And I'm including a scripts.js where I initialize all the componentnts of MDB as required in the documentation.

$(window).load(function(){ $(".twentytwenty-container[data-orientation!='vertical']").twentytwenty({default_offset_pct: 0.7}); $(".twentytwenty-container[data-orientation='vertical']").twentytwenty({default_offset_pct: 0.3, orientation: 'vertical'}); });

$('#play').on('click', function (e) { e.preventDefault(); $("#player")[0].src += "?autoplay=1"; $('#player').show(); $('#video-cover').hide(); }) $('#modal1').on('hidden.bs.modal', function (e) { $('#modal1 iframe').attr("src", $("#modal1 iframe").attr("src")); });

$('.carousel.carousel-multi-item.v-2 .carousel-item').each(function(){ var next = $(this).next(); if (!next.length) { next = $(this).siblings(':first'); } next.children(':first-child').clone().appendTo($(this));

for (var i=0;i<4;i++) {
  next=next.next();
  if (!next.length) {
    next=$(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
}

});

$(function () { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html");

});

$(function () { var selectedClass = ""; $(".filter").click(function () { selectedClass = $(this).attr("data-rel"); $("#gallery").fadeTo(100, 0.1); $("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation'); setTimeout(function () { $("." + selectedClass).fadeIn().addClass('animation'); $("#gallery").fadeTo(300, 1); }, 300); }); });

jarallax(document.querySelectorAll('.jarallax'), { speed: 0.08, });

The weird thing is that some components work perfectly and others just don't work (Lightbox, accordion, dropdowns in contact forms.).

Right now I sorted the issu by not using this components. I have not been able of using the maing compoents that I wanted to use with the pro version.

A bit frustrated to be honest.


Mateusz Łubianka staff commented 4 years ago

Hi, If some of the component works well, could you check path of the lightbox? '$(function () { $("#mdb-lightbox-ui").load("/mdb-addons/mdb-lightbox-ui.html");'

Best,



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: Desktop
  • Browser: Chrome
  • OS: MAC OS
  • Provided sample code: No
  • Provided link: No