17

How to prevent the WordPress admin bar from overlapping with your Twitter Bootstrap navigation bar. In response to: WordPress admin bar overlapping twitter bootstrap navigation Asked by: @TheWebs If you are using Twitter Bootstrap with WordPress and have an issue with the WordPress admin bar overlapping with your navigation bar, you're probably pretty ...


14

After taking a deeper look in to this, I realised that the responses that are displayed are produced via the Contact Form 7 AJAX. So, following the Contact Form 7 documentation on DOM Events, I was able to get this working how I wanted with the following JS code: /* Validation Events for changing response CSS classes */ document.addEventListener( '...


10

I just ran into this issue as well, the cause of this is that at 600 pixels wide the admin bar goes from being position:fixed to position:absolute; When fixed, it is locked to the top of the screen (top:0) When absolute it is locked to the top of the closest container that contains it. This is the html element by default, but if a parent is defined to have ...


10

You can add bootstrap in WordPress by following function in functions.php You can change url as you need if you have cdn. <?php /** * Enqueue scripts and styles */ function your_theme_enqueue_scripts() { // all styles wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 ); ...


9

The best way to include bootstrap in your theme is to enqueue bootstrap CSS and JS in your functions.php file. This is how you can enqueue bootstrap CSS and JS from CDN hosted version. function my_scripts_enqueue() { wp_register_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js', array('jquery'), NULL, true ); ...


8

PHP way: Add the following to your functions.php file. Filter nav_menu_link_attributes: add_filter( 'nav_menu_link_attributes', 'my_menu_atts', 10, 3 ); function my_menu_atts( $atts, $item, $args ) { // Provide the id of the targeted menu item $menu_target = 123; // inspect $item if ($item->ID == $menu_target) { // original post used a ...


7

I know this question is quite old but since there is no answer yet an there are many similar questions on the WordPress support forums, I'll better share my findings and maybe help someone. The issue of disappearing menu may be caused by code in plugin or theme incorrectly modifying global $wp_query object using pre_get_posts filter hook. I discovered that ...


7

You can use action hook and enqueue script and style to the site. function my_scripts() { wp_enqueue_style('bootstrap4', 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'); wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array( 'jquery' ),'',true ); wp_enqueue_script( 'boot2','https://cdnjs....


6

Here you go.. function xobamax_resources() { wp_enqueue_style('bootstrap', get_template_directory_uri() . 'css/bootstrap.min.css'); wp_enqueue_style('style', get_stylesheet_uri()); wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js', array('jquery'), '3.3.4', true ); } add_action('...


5

Your theme should not depends on any external link library. There is no guarantee when that library can be taken down. That's the reason all of your theme assets should be package with theme, to prevent the future risk.


5

Mostly the parent theme might be enqueing the child theme's style.css, if so you can dequeue it by using handle and then enqueue with proper dependency. If the child theme's handle is child-theme-style, then dequeue it using wp_dequeue_style('child-theme-style') then enqueue it as needed like so. wp_enqueue_style('child-theme-dep',get_stylesheet_uri(),...


4

You can do it in two ways.... Solution One: <?php add_action( 'wp_head', 'myscript' ); function myscript(){ echo '<!--[if lt IE 9]><script src="your_js_file_path"></script><![endif]-->'; }; ?> Solution Two: <?php global $wp_scripts; wp_register_script( 'jsFileIdentifier', 'YourJsFilePath', array(), '3.6.2' ); $...


4

The proper way to add a style, as in a template or in a theme, is to use the wp_enqueue_style function. See https://developer.wordpress.org/reference/functions/wp_enqueue_style/ . One of the parameters in the function is a version number, which you can change if you make changes to the CSS in the file. That will force WP into loading the new version, and ...


4

Here some thing interesting for you STEP 1 add a script to header like below ( it's always better go for the enqueue method . i need some one to help me with properly adding the below script in WordPress way .jquery should run before the second script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"&...


4

After some digging and trial/error I have came up with a couple solutions. I was looking for a "Gutenberg" solution so I could avoid using str_replace. First, we need to enqueue our JS and include the wp.blocks package // Add to functions.php function gutenberg_enqueue() { wp_enqueue_script( 'myguten-script', // ...


4

Use the render_block filter hook: add_filter( 'render_block', 'wrap_my_gallery_block', 10, 2 ); function wrap_my_gallery_block( $block_content, $block ) { if ( 'core/gallery' !== $block['blockName'] ) { return $block_content; } $return = 'my-gallery-block<div class="my-gallery-block">'; $return .= $block_content; ...


3

Your options are the following: Extend the walker and change the output (override start_el function) Here is an example of the Walker, assuming you are using this bootstrap walker. Usage: 'walker' => new se150102_bootstrap_walker() Walker: class se150102_bootstrap_walker extends wp_bootstrap_navwalker { /** * This walker is identical to the ...


3

The above looks correct, however, you need to specify your script to enqueue after bootstrap by adding the bootstrap-min handle to the third, dependencies parameter. function register_css() { wp_register_style( 'bootstrap-min', get_template_directory_uri() . '/css/bootstrap.min.css' ); wp_register_style( 'custom-css', get_template_directory_uri() . '...


3

As mentioned on the wp_register_script() codex page the handle: Should be unique as it is used as a handle for later use with wp_enqueue_script(). You are using the same handle for all your scripts, which won't work. Besides that, if those scripts are depending on bootstrap, you have to at least register bootstrap before and add it as dependency to ...


3

You can add custom class to post thumbnails. the_post_thumbnail accepts array of attribute $attr where you can specify image class. So your code will be. <div class="home-featured-img"> <?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. the_post_thumbnail( 'full', array( 'class' =&...


3

You can make use of featured images as suggested by @gmazzap in comments. This featured image will not be included in post content. However, if you already have your images included in post content, then you need to strip the post content down in two parts, as you've said in your question. I have two functions, one that returns all the images (or any html ...


3

Ideally, using WP methods to enqueue bootstrap JS dependencies you can just set jQuery as a requirement and WordPress will take care of the rest. <?php wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); ?>


3

I solved this problem. follow these instructions..... Add script (function($){ $(document).ready(function(){ $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); ...


3

Good news. This is an easy fix. WordPress allows you to declare dependencies when registering scripts and stylesheets. Simply list the assets you wish to load earlier as dependencies for the later assets. https://codex.wordpress.org/Function_Reference/wp_register_style This works for both scripts and styles and is the recommended way to control load ...


3

You could add a filter on post_type_link, which allows modification of custom post type permalinks before they are output. The filter passes the custom post object as the 2nd argument, so we can use that to get the ID and form the new permalink: function wpd_list_pages_permalink_filter( $permalink, $page ){ return '#' . $page->ID; } Then you can ...


3

Adding the dependency should work. You are not calling your theme styles file correctly though. You need to move your theme-style.css file down to the root folder of the theme itself and name it style.css. So your function should look as follows: function my_enqueues() { wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/...


3

How about to save a bandwidth and possibly increase a page loading speed using MaxCDN and NetDNA. Add this two functions to your functions.php function pwwp_enqueue_my_scripts() { // jQuery is stated as a dependancy of bootstrap-js - it will be loaded by WordPress before the BS scripts wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/...


3

You have to edit the files in: wordpress/wp-content/themes/twentyseventeen/template-parts/navigation/navigation-top.php and then create a custom walker, try to take a look here. Try in this way: <?php /** * Displays top navigation * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.2 */ ?> <div class="...


3

The following answer is a solution for Bootstrap 4 and centering images in a <figure> tag. WordPress generated default: <figure class="wp-block-image"> <img src="http://localhost:8888/time.png" alt="alt text" class="wp-image-1391"/> <figcaption>This is an image test.</figcaption> </figure> Using the preg_replace(...


2

Fix for Bootstrap 2 & 3 navbar-fixed-top to prevent overlapping of site menu with WordPress admin menu .admin-bar .navbar-fixed-top { top:46px; @media screen and (min-width:782px) { top:32px; } } Fix for Bootstrap 4 fixed-top to prevent overlapping of site menu with WordPress admin menu .admin-bar .fixed-top { top:46px; @media screen and ...


Only top voted, non community-wiki answers of a minimum length are eligible