I have this code: @font-face { font-family: 'Miller Banner Light'; src: url('fonts/Miller-Banner-Light-01.eot'); /* IE9 Compat Modes */ src: url('fonts/Miller-Banner-Light-01.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Miller-Banner-Light-01.woff') format('woff'), /* Pretty Modern Browsers */ url('fonts/Miller-Banner-Light-01.ttf') format('truetype') /* Safari, Android, iOS */ } Which in theory allows to add these fonts to my theme, unfortunately, simply creating the fonts folder and putting in the files doesn't work. I read about having to create a child-theme but is that the only way?

Is there a built-in Wordpress function that will allow you to enqueue all stylesheets for a particular theme? I have a directory structure that looks like: -my-custom-theme -css -header.css -footer.css -functions.php I want to load all CSS files found in the my-custom-theme/css folder

So I've got a bit of an issue, and not sure what the problem is. I'm trying to enqueue javascript in the footer of my Wordpress site. The footer looks like this: </footer> </div> <?php wp_footer(); ?> <script> jQuery(document).foundation(); </script> </body> </html> So the enqueued script SHOULD be put in the wp_footer call, putting the script just above where I actually call it. But looking at the source code of the file, I get this: </footer> </div> <script> jQuery(document).foundation(); </script> …

I am trying to add google fonts to a custom WordPress theme. Therefore I tried to enqueue selected three font faces at once to make it fast loading. So, I use the below codes to register and enqueue the same. wp_register_style('googlFonts', '//fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display&family=La+Belle+Aurore&display=swap'); wp_enqueue_style('googlFonts'); When I search via source code I can only see the last font. Other fonts are not loading. Even I can't see the same complete URL in the source code. Below is what I saw from the …

I have a basic bunch of CSS/Js files defined in my functions.php file. There I register and enqueue those scripts and stylesheets. But in specific situations I want to load additional scripts based on the site template which is used. I tried to register and enqueue those additional scripts in the specific Template file, but it didnt work. It does only work when included in the functions.php. What is the correct way to do this?

I have a lot of JavaScript and jQuery functions that are all working fine, but it's quite fragmented and hard to maintain as some are in Elementor HTML widgets, others in specific Pho functions annd some in an enqueued JS file. Ideally I'd like to move everything into the single JS file so it's easier to maintain, but would there be any performance implications? For example some scripts only need to run on specific pages but I assume they would …

I'm creating a theme and i want to upload it to envato. I have a javascript file that is type module and i can enqueue it and then use script_loader_tag filter to add type module to it by these lines. wp_enqueue_script( 'slider-js', get_stylesheet_directory_uri() . '/src/js/slider.js', array(), time(), true ); add_filter( 'script_loader_tag', 'add_type_attribute', 10, 3 ); function add_type_attribute( $tag, $handle, $src ) { if ( 'slider-js' !== $handle ) { return $tag; } $tag = '<script type="module" src="' . esc_url( $src …

As i understand it, admin scripts are supposed to be registered and enqueued through the admin_enqueue_scripts hook and all other scripts at wp_enqueue_scripts so i have set up the following functions to register and enqueue all my scripts in a clear and organized way. My question is, what if i need certain scripts (eg. jquery validate plugin) both in admin and on the front end? what is the recommended method for registering and enqueuing the script in this case? register …

I have this script that cuts down my menu and adds a "+" dropdown if there are too many menu items in an attempt to prettify long menus, as such: Without the script running: Which I call in functions.php with: function _s_scripts() { wp_enqueue_script( 'main', get_template_directory_uri() . '/js/main_res.js', array( 'jquery' ), '', false ); } add_action( 'wp_enqueue_scripts', '_s_scripts' ); Unfortunately, this results in late-execution and jagginess. Is there any way I can hook this script into "as soon as you're …

I'm trying to enqueue comment-reply.js script only on a certain page but something is wrong with my code. Can someone hint things here? <?php if ( is_singular('1740') && (!is_home() || !is_front_page() || !is_single()) && comments_open() && get_option('thread_comments') ) wp_enqueue_script( 'comment-reply' ); ?>

I'm new to WordPress development. I have been following a tutorial in Udemy to build my new WordPress website. As recommended by the trainer, it is useful to use npm to package the JavaScripts using "@wordpress/scripts". The npm command monitors a single index.js file, which is then compiled into WordPress friendly version. Then in functions.php I added the wp_enqueue_script() function to call the index.js from build folder. The problem: I have created multiple JavaScript files, which contain new classes with …

I am in the process of a theme, I would like to add landing pages using page-templates. I cannot find anywhere that shows how to enqueue style or js for specific page templates. Any suggestions. Ex. Landing Page 1 - landing-page-template-one.php will need very different style and js than the blog or homepage.

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() { …

When you enqueue scripts or styles with the following: function themeslug_enqueue_style() { wp_enqueue_style( 'core', '/style.css', false ); } add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' ); You get the following: <link rel='stylesheet' id='core-css' href='http://localhost:8080/wordpress/style.css?ver=4.9.4' type='text/css' media='all' /> Note that it appends the site url to the beginning, in this case http://localhost:8080. I'm trying to remove this so that it's relative to the file executing this. Usually this is done with plugins_url or get_stylesheet_uri(). However, I DO NOT want to use either of these, as …

I've enqueued all my scripts on function.php to load before the tag by passing 'true' to the fifth argument. It does works for all of them BUT jquery, any idea what I'm doing wrong? wp_enqueue_script('jquery','','','',true); wp_enqueue_script('modernizr', 'http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js', array('jquery'), false, true); wp_enqueue_script('my-javascript', get_template_directory_uri() . '/js/my-javascript.js', array('jquery', 'modernizr'), false, true); wp_enqueue_script('jquery-ui', get_template_directory_uri() . '/js/jquery-ui.min.js', array('jquery'), false, true);

So I have to implement OneTrust which requires all <script type="text/javascript"> to be converted to <script type="text/plain"> and there are various plugins that use script tags that I need to change. So let's say that Contact Form 7 has the following snippet in their plugin: $assets = wp_parse_args( $assets, array( 'src' => wpcf7_plugin_url( 'modules/recaptcha/index.js' ), 'dependencies' => array( 'google-recaptcha', 'wp-polyfill', ), 'version' => WPCF7_VERSION, 'in_footer' => true, ) ); wp_register_script( 'wpcf7-recaptcha', $assets['src'], $assets['dependencies'], $assets['version'], $assets['in_footer'] ); wp_enqueue_script( 'wpcf7-recaptcha' ); How …

I am trying to add [Flickity Carousel][1] into my Wordpress theme. I was successful yesterday. However, when I returned to my theme this morning the carousel files are not loading. I am not sure what went wrong or if I'm missing something. I am also utilizing advanced custom fields and tachyons Would really love a fresh set of eyes. Here is where I enqueue the files function flickity_scripts() { wp_enqueue_script( 'flickityjs', get_template_directory_uri() . '/js/flickity.pkgd.min.js', array( 'jquery' ), '1.9.0', true ); …

Stack Exchange long time listener, first time caller. I have found examples on the developer.wordpress site but I have been still struggling. Localizing scripts: wp_localize_script() In my theme's functions.php file, I have: function wp_my_ajax_script() { wp_localize_script( 'ajax_handle_agent_search', 'myAjax', admin_url( 'admin-ajax.php' )); wp_enqueue_script( 'ajax_handle_agent_search' ); } add_action( 'wp_enqueue_scripts', 'wp_my_ajax_script' ); And on my page, I've added a HTML code wdiget that contains: <script> jQuery(document).ready( function() { console.log("Document loaded"); jQuery("#searchButton").click( function(e) { console.log("Search button clicked"); console.log("Ajax: " . myAjax); e.preventDefault(); var zipCode …

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 have a plugin that requires scripts to load for an admin panel in the page-attributes template drop-down on page post type. However this script causes a Uncaught TypeError: on post post types which is a correct response and I understand that is not where my focus should turn. Since this script is only necessary for the page post type, I believe the best solution is to conditionally format my script so it works as such. Due diligence was taken …