Topic: Best way to integrate mdbootstrap pro in a wordpress template wordpress
jasubal pro asked 6 years ago
Bartłomiej Malanowski staff answered 6 years ago
Adriano22 free commented 6 years ago
is it possible to intergrate MDB free into an existing wordpress theme or only a new one?
Dawid Adach pro commented 6 years ago
It's definitely possible, simply follow this lesson: https://mdbootstrap.com/education/wordpress/theme-3/
Adriano22 free commented 6 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.
a.mendoza.contact@gmail.com free answered 4 years ago
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,
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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