Loading dynamic CSS on WordPress frontend only

I am facing an issue with the dynamic css file in my WordPress theme that is loaded using Ajax. The problem is that it also loads this dynamic css file for the backend. Can someone help me modify my code so that it only loads the dynamic css file for the frontend, not the backend? Here's the code I am currently using:

wp_enqueue_style('dynamic-css',
admin_url('admin-ajax.php?action=dynamic_css'));

function dynaminc_css() {
    require(get_template_directory().'/dynamic-css.php');
    exit;
}

add_action( 'wp_ajax_dynamic_css', 'dynaminc_css' );
add_action( 'wp_ajax_nopriv_dynamic_css', 'dynaminc_css' );

}

cssajaxwordpressdynamic

Answer №1

Here is an example demonstrating Dynamic CSS using Ajax:

<?php
/*
Plugin Name: Custom CSS Loader via Ajax
Plugin URI: https://github.com/soderlind/
Description:
Author: Per Soderlind
Version: 0.1.0
Author URI: http://soderlind.no
*/
if ( !defined( 'ABSPATH' ) ) {
    die( 'Unauthorized access' );
}
define( 'DYNAMICCSS_VERSION', '0.1.0' );

function dynamic_css_enqueue() {
    wp_enqueue_style( 'dynamic-flags', admin_url( 'admin-ajax.php' ).'?action=dynamic_css&_wpnonce=' . wp_create_nonce( 'dynamic-css-nonce' ), false,  DYNAMICCSS_VERSION );
}

function dynamic_css() { 
    $nonce = $_REQUEST['_wpnonce'];
    if ( ! wp_verify_nonce( $nonce, 'dynamic-css-nonce' ) ) {
        die( 'Invalid nonce' );
    } else {
        require dirname( __FILE__ ) . '/css.php'; 
    }
    exit;
}

add_action( 'wp_ajax_dynamic_css', 'dynamic_css' );
add_action( 'wp_ajax_nopriv_dynamic_css', 'dynamic_css' );
add_action( 'wp_enqueue_scripts', 'dynamic_css_enqueue' );

Answer №2

If you're searching for the is_admin() function, look no further.

if(!is_admin()){
    wp_enqueue_style('dynamic-css',
    admin_url('admin-ajax.php?action=dynamic_css'));

    function load_dynamic_css() {
        require(get_template_directory().'/dynamic-css.php');
        exit;
    }

    add_action( 'wp_ajax_dynamic_css', 'load_dynamic_css' );
    add_action( 'wp_ajax_nopriv_dynamic_css', 'load_dynamic_css' );
}

Any code within this block will only run outside of the WordPress administration panel.

http://codex.wordpress.org/Function_Reference/is_admin

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When an input field is added to an HTML form, all elements positioned below it automatically inherit its attributes

I have a unique combination of HTML and CSS code that creates an impressive login form: <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Prepare to be amazed...</title> <l ...

htmlcssnode.jsejs

To create a distinctive design, the HTML5 wrapper will specifically enclose the Header element

After using a border, I discovered that my wrapper is only wrapping the header and not extending down to the footer. Can anyone offer some guidance on how to wrap the entire content from the header to the footer? I've come across suggestions to speci ...

htmlcsswrapper

Encountering a Bad Request Response When Trying to Access WCF Service via Jquery Ajax

Encountered an issue when trying to call a WCF web service using jQuery Ajax, resulting in a bad request error without clear insight into the root cause. The service is not triggering any methods - neither success nor failure. Both the web service and the ...

javascriptjqueryajaxwcfiis

Adjusting the Transparency of the Background in a Pop-Up

I am experiencing an issue with my popup where I want the background to be transparent. However, when I set the opacity in CSS to 0.5 or less, the text also becomes transparent and very dark. How can I achieve a background with 50% opacity while keeping th ...

javascripthtmlcsspopup

Tips on emphasizing all div elements and incorporating navigation to each of them

I am seeking a method to enhance a div with highlighting when there is a click or mouseover event. For instance, changing or adding a border color using JavaScript on click or mouseover is straightforward. Recently, I have been contemplating the idea of a ...

javascriptjquerycsshtml

Shift the content downwards within an 'a' snippet located in the sidebar when it reaches the edge of the right border

I'm having an issue with my style.css file. As a beginner in programming, I am trying to position text next to an image attached in the sidebar. However, the text is overflowing past the border. Here's the HTML code: Please see this first to ide ...

javascripthtmlcssbootstrap-4

Using CSS3 to Enhance the Look of Multiple Background Images

While I've come across similar inquiries, I haven't found a satisfactory explanation yet. My aim is to grasp the best CSS practices for implementing multiple repeating backgrounds. Essentially, I want a background image to repeat across the entir ...

htmlcss

Is the Ajax response value consistently 1?

I am facing an issue where a JavaScript in an HTML page is sending two variables to a PHP script, which then echoes one of the variables at the end. However, the response value always remains 1. Despite trying methods like alerting, console.log, and puttin ...

javascriptphpajax

Tips for making a horizontal grid layout with three items in each row

I have a scenario where I need to render a group of Player components using map() loop, and I want them to be displayed horizontally side by side using a Grid component from material-ui. Currently, the components are rendering in a vertical layout: https ...

javascriptcssreactjsgridmaterial-ui

Eliminating the default inline style automatically

My goal is to hide a table row until a radio button is clicked. I attempted using display:none;, but it did not work. Upon inspecting the code in my developer tools, I noticed that the specific table row has a style attribute style="display: table-row; whi ...

jqueryhtmlcssinline-styles

How to Stop Element Flickering While Hovering in Selenium IE Webdriver

My code is functioning perfectly in Firefox, but when I try it on Internet Explorer, there is flickering. Here is my code: WebElement mouseOver= driver.findElement(By.linkText("abc")); //I'm locating the element by link text. Selenium finds the ...

javascriptjqueryhtmlcssselenium

Widget function discrepancy

Here is the code for registering a widget in the sidebar: // Sidebar Register add_action('widgets_init', 'comet_sidebar'); function comet_sidebar() { register_sidebar(array( 'name' => __('Right ...

phpwordpresswidgetrequireconflicting-libraries

Retrieve, process HTML table information using Ajax from an external server or website domain

In order to demonstrate: :the html table data source = "example.com/html_page_source" (tableid="source") :an xml file created from the specified table data = "pretendco.com/xml_built_from_html_table I am seeking guidance on how to build an xml file from ...

jqueryhtmlxmlajaxjson

Achieve hover overflow effect in HTML and CSS without altering element positions

Hey there, I could really use some help with a CSS and HTML issue I'm having. Take a look at the code snippet below: Here's what I'm trying to achieve: 1. Keep the boxes (.box) with images fixed in place 2. Make the hidden description (. ...

htmlcss

Transmit an echo using AJAX

Apologies if this question has already been asked, I tried searching but couldn't find any answers (OR didn't understand the answer). I have a hyperlink and would like to retrieve the value using AJAX. Here is an example with PHP: HOME <a h ...

phpjqueryajax

position text to the right side of a slider gallery created with JavaScript

I'm currently utilizing a WordPress plugin known as Slideshow Gallery and I want to position the text below it to float next to the gallery on the right side. I've attempted the following: .bioText{ font-size: 14px; font-size: 1.428571429rem; ...

javascriptjquerywordpressslidercss-float

Send the ID through an Html.ActionLink using ajax to retrieve a specific partial view

I am facing an issue with my MVC View page. It is strongly-typed to a list of products, each with a unique id. I have implemented an Html.ActionLink for each product item on the page, and I want to use jQuery's $.ajax function to load a partial view o ...

c#ajaxasp.net-mvcjquery

"What is the significance of the .default property in scss modules when used with typescript

When dealing with scss modules in a TypeScript environment, my modules are saved within a property named default. Button-styles.scss .button { background-color: black; } index.tsx import * as React from 'react'; import * as styles from ' ...

cssreactjstypescriptsassstorybook

transition effect of appearing and disappearing div

Having trouble creating a fade out followed by a fade in effect on a div element. The fade out happens too quickly and the fade in interrupts it abruptly. Here is the JavaScript code: $('#fillBg').stop(true,false).fadeTo(3000, 0); $("#fillBg"). ...

javascriptjqueryhtmlcss

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

cssangularangular2-bootstrapping