I have coded a working Bootstrap carousel, it needs to be converted to WP. It's a small chunk of the site, but as a Wordpress newbie, am stuck in understanding the technical issue. So here's what I am trying to do: To show all those posts that have a featured image uploaded to show as a part of the Bootstrap carousel, then to limit the posts per page as needed. As a first step, I thought to not use WP_Query …

I'm building a WordPress theme and I've used the code from https://codeinhouse.com/how-to-create-custom-post-type-slider-in-wordpress-without-plugin/ to build my slider I've also used https://github.com/wp-bootstrap/wp-bootstrap-navwalker I have both jquery and bootstrap both linked to the site they appear in inspect element however they do not seem to be running as my drop down navigation does not work on mobile size and the slider doesn't slide function wpbootstrap_enqueue_styles() { wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.css' ); wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/style.css'); wp_enqueue_script('bootstrap-js', get_template_directory_uri() . '/js/bootstrap.js', array('jquery'), NULL, …

so im building a custom theme and ive got stuck on the navigation if i use wp_head(); it loads bootstrap and my custom style sheet but not the navigation if i use get_header(); it loads the navigation but not bootstrap or my custom style sheet here is my functions.php function register_navwalker(){ require_once get_template_directory() . '/inc/class-wp-bootstrap-navwalker.php'; } add_action( 'after_setup_theme', 'register_navwalker' ); function wpbootstrap_enqueue_styles() { wp_enqueue_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css' ); wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css'); wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js', array('jquery'), NULL, true); } add_action('wp_enqueue_scripts', 'wpbootstrap_enqueue_styles'); …

I am trying to show some Bootstrap tab contents within a WordPress loop. The tabs are not being clicked. Here are the bootstrap codes: <ul class="citenav nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab1" aria-selected="true">tab18</a> </li> <li class="nav-item"> <a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab2" aria-selected="false">tab2</a> </li> <li class="nav-item"> <a class="nav-link" id="tab3-tab" data-toggle="tab" href="#tab3-<?php echo get_the_ID(); ?>" role="tab" aria-controls="tab3" aria-selected="false">tab3</a> </li> <li class="nav-item"> <a class="nav-link" id="tab4-tab" data-toggle="tab" href="#tab4-<?php …

custom bread crumb not working with multiple categories assigned to a single product, we do not have the categories page, so don't want to show categories in the URL, but need to show the categories navigation on the breadcrumb . <?php function bootstrap_breadcrumb($custom_home_icon = false, $custom_post_types = false) { wp_reset_query(); global $post; $is_custom_post = $custom_post_types ? is_singular($custom_post_types) : false; $post_type = get_post_type(get_the_ID()); if (!is_front_page() && !is_home()) { echo '<ol class="d-flex breadcrumb-wrapper">'; echo '<li><a href="'; echo get_option('home'); echo '">'; if ($custom_home_icon) …

I have a very simple WordPress plugin that shows a menu/admin page. The page contains Glyphicons - Font Awesome. These glyphicons are never showing. I cannot figure out why because I know the font-awesome css file is being loaded correctly and I know that the admin pages HTML works fine outside of a wordpress plugin and shows the Glyphs. What could possibly be going wrong? <?php /** * Plugin Name: TEST Use FA Icons * Plugin URI: * Description: Test …

I found this answer on Stack Overflow, answer this exact question. I've modified it slightly, because I'm using a button and not an anchor: jQuery( ".modal" ).on( "show.bs.modal", function ( e ) { var target = jQuery( e.relatedTarget ).attr( "data-target" ).replace( "#", "" ); var modal_ids = [ "modal-request-estimate", "modal-schedule-appointment", "modal-rate-review" ]; if ( modal_ids.indexOf( target ) == - 1 ) { return false; } jQuery( this ).find( ".modal-body" ).load( location.href + "?modal=" + target ); } ); If then …

I have a html bootstrap slider which works fine with captions and everything.I would like to integrate it into my Wp theme (my forst one, so total newbie).I found a code, which seems to helo, but it only shows the three pictures and nothing slides...if I hard code the slider, it works.I understand I can just leave it hard coded, but then it's not really WP ;) THANKS. Here is the code: functions.php - now complete file. function load_stylesheets() { …

I am trying to develop a bootstrap 5 theme for the latest WordPress. I am using Navwalker from here: https://github.com/wp-bootstrap/wp-bootstrap-navwalker. My bootstrap Navbar does not dropdown on smaller screens. Is it not working because I am using Bootstrap 5 and not bootstrap 4? Here is my code from my header.php file: <nav class="navbar navbar-expand-md navbar-dark bg-dark" role="navigation"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="<?php esc_attr_e( 'Toggle …

I have a CPT with a Custom Taxonomy and a I need to show this content in the Bootstrap 4 Accordion. So far, i have this: <?php $terms = get_terms( array( 'taxonomy' => 'ano' )); foreach($terms as $term) { ?> <div id="accordion" role="tablist"> <div class="card"> <div class="card-header" role="tab" id="heading-<?php the_ID(); ?>"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapse-<?php the_ID(); ?>" aria-expanded="true" aria-controls="collapse-<?php the_ID(); ?>"> <?php echo $term->name; ?> </a> </h5> </div> <div id="collapse-<?php the_ID(); ?>" class="collapse<?php echo ($the_query->current_post == 0 ? ' …

I need to use Bootstrap CSS for better UI in wp-admin but if I enqueue the bootstrap.css, it's affecting the admin default UI by changing background colors, etc. How can I use bootstrap.css inside wp-admin?

I'm trying to use the Bootstrap collapse component and just can't get it to work. I believe the HTML is proper, but whenever I click on the element that should trigger the collapse, I get an Uncaught ReferenceError: $ is not defined error in the console, pointing to the custom.js file which contains the $('.collapse').collapse() function. I assumed that I'm just enqueueing the scripts in the wrong order, but everything seems okay to me: function my_scripts() { wp_enqueue_script( 'bootstrap-jquery','https://code.jquery.com/jquery-3.6.0.min.js', '', …

I'm building a site using bootstrap and converting to WordPress. I have some hero images on pages where a user won't need to change them. However, I have a custom post type that I really want the same style of hero image, but for it to be changeable within the post type edit screen. My current hero images on other pages are referenced in my CSS, I tried using a full width container as a feature image but then my …

<div class="col-lg-4 col-md-4 col-sm-6 exhibitors-child"> <div class="exhibitors-border"> <?php the_post_thumbnail(); ?> <div class="find"> <a href="" data-toggle="modal" data-target="#exhibitors-child"><small>FIND OUT MORE</small></a> </div> </div> </div> <?php endwhile; endif; wp_reset_query(); ?> <!-- Modal --> <div class="modal fade" id="exhibitors-child" tabindex="-1" role="dialog" aria-labelledby="exhibitors-childLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <?php the_post_thumbnail(); ?> <h2><?php echo get_field('name') ;?></h2> <p><?php echo get_field('exhibitors_single_description') ;?></p> </div> </div> </div> </div>

I want to use in Guttenberg block some of tools used in react-bootstrap but something not work in my code property. First I npm install react-bootstrap [email protected] the newest version, and this is register in package.json as well. Then in edit.js I try to import all dependencies: import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; import Card from 'react-bootstrap/Card'; import React, { Component } from "react"; import { IWPGBlock } from 'react-gutenberg/' import * as React from 'react' and for sure …

I'd like to use WordPress with Bootstrap but WordPress does not load jQuery properly so I get this error message: Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript. This is from my functions.php: function add_theme_scripts() { wp_enqueue_style('bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'); wp_enqueue_style('style', get_theme_file_path() . '/style.css'); wp_enqueue_script('jquery'); wp_enqueue_script('Popper', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js', array('jquery'), null, true); wp_enqueue_script('Bootstrap', 'https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js', array('jquery', "Popper"), null, true); wp_enqueue_script('script', get_theme_file_path() . '/assets/js/script.js', array('jquery', 'Popper', 'Bootstrap'), null, true); } add_action('wp_enqueue_scripts', 'add_theme_scripts'); Could you please help me with this issue? Thanks …

Here is my code. <?php wp_nav_menu(array('theme_location => 'primary',)); ?> How to format the code in my header.php using the bootstrap navbar? I am using bootstrap 4.3x. I am new to bootstrap and wordpress and I would appreciate any help..

I made a grid with bootstrap where i want to show 5 differents posts but for some reason it duplicates the grids and shows one post per grid. First image shows how it starts to duplicate the grids 5 times instead of just showing 5 posts in those columns. Second picture shows how i would like to work. <?php get_header(); ?> <main> <div class="container"> <div class="row"> <?php $args = array( <?php 'post_type' =>post_type' => 'post, 'posts_per_page' => 5, ); $blogposts …

here i use code shortcode of woo commerce and whenever i reload page pagination showed up then hide i used this code [products limit="12" columns="5" paginate="true" visibility="featured" ] and when i check with inspect tool the css have element.style { opacity: 1; display: none; } this code but when i uncheck diplay pagination showed up and i found a this line in content product archive do_action( 'woocommerce_no_products_found' ); ?> <div class="shop-loop-after clearfix" style="none"> </div> <?php nothing happen if i change …

I want to create a background image effect that will change the image when the user scroll. I'm facing a problem with the images urls, how i can fix this? How I can link an image url in jquery from a wordpress page? Here is the code. The url is not correct and I can't figure how to link it correctly from the js script. $(window).scroll(function(e){ e.preventDefault(); var scrollPos = $(window).scrollTop(); if(scrollPos >= 100){ $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'}); } else if(scrollPos >= 120){ …