Unable to locate CSS in Wordpress Theme on localhost

I have been utilizing the Wordpress theme offered by , and it works flawlessly when I upload it to my online servers. However, when I try to use it locally with a Wordpress Bitnami Stack, the theme is unable to locate the CSS. In the header.php file, I have:

<!-- css + javascript -->
<?php wp_head(); ?>

Yet, upon inspecting the source code of the development site at localhost (after activating the theme), I notice that the href for the CSS files is empty:

<!-- css + javascript -->
<link rel='stylesheet' id='normalize-css'  href='' media='all' />
<link rel='stylesheet' id='html5blank-css'  href='' media='all' />

Interestingly, it doesn't seem to have trouble locating the images and icons:

<!-- icons -->
<link href="http://localhost:8080/wordpress/wp-content/themes/html5blank-master/img/icons/favicon.ico" rel="shortcut icon">
<link href="http://localhost:8080/wordpress/wp-content/themes/html5blank-master/img/icons/touch.png" rel="apple-touch-icon-precomposed">

I am running on Ubuntu 12.10. Could this be an issue specific to Bitnami, or is there a way for me to rectify this so I can work on the website locally? Notably, the default theme "twentytwelve" functions correctly in my setup.

UPDATE: After comparing and experimenting with both versions 1.2.9 and 1.4.0 (latest version) of the html5blank theme within my Bitnami Wordpress stack, I noticed that the functions.php files of both versions are identical regarding the wp_register_style() function. Surprisingly, version 1.2.9 successfully populates the CSS links while version 1.4.0 leaves them blank. It's worth mentioning that 1.4.0 operates without any issues in the Bitnami installation on Windows 7.

csshtmlwordpress-themingbitnami

Answer №1

The issue arises from a conflict between certain code in the theme design and WordPress operating on an unconventional port number.

Upon investigation, it was discovered that the function wp_kses_bad_protocol alerted WordPress's esc_url function (utilized by the style enqueuer, specifically the WP_Styles class in wp-includes/class.wp-styles.php) about an invalid protocol for the stylesheet URL. The main purpose of esc_url is to prevent any malicious content from being included in URLs; one of its checks involves identifying suspicious elements like the javascript: protocol instead of http:.

The incorrect identification of this issue appears to stem from the html5blank theme implementing a filter function called html5blank_protocol_relative for the style_loader_src filter. While generally not harmful (protocol relative essentially replaces http://whatever... with //whatever..., avoiding conflicts between https and http on the same page), running WordPress on a specific port seems to disrupt the detection of bad protocols.

In essence, it is advisable to communicate this issue to the theme developer, highlighting how running WordPress on a non-standard port (e.g., http://localhost:8080/wordpress instead of http://localhost/wordpress) causes the theme to malfunction.

For immediate resolution, temporarily deactivating these lines may help:

add_filter('script_loader_src', 'html5blank_protocol_relative'); // Protocol relative URLs for enqueued scripts
add_filter('style_loader_src' , 'html5blank_protocol_relative'); // Protocol relative URLs for enqueued styles

...in the functions.php file of the theme; this action should disable the filtering of protocol relative URLs and restore functionality locally. If your live sites use https, they should remain unaffected by this adjustment. Overall, this change should not significantly impact the performance of your themes compared to many others available.

Answer №2

If you're wondering where to find the CSS for your theme, take a peek at functions.php. Chances are, it's using enque as a way to send the CSS to wp_head. Check out this tutorial for a deeper dive:

Answer №3

When working with the Divi theme by Elegant Themes, you may run into a common problem where your design changes aren't showing up as expected in the visual builder. One simple solution to fix this issue on localhost is to install the WP File Manager plugin, navigate to wp-content, and remove the et-cache folder. It's a quick fix that can make a big difference!

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

I'm just getting started: an image carousel featuring a unique twist with random quote overlays, but there's a catch - it only activates on the very first image... what comes next?

After successfully displaying the generator over the first image, I encounter a problem with the second and third images where it seems to disappear. However, upon cycling back to the first slide, the generator reappears with a different quote. I've a ...

javascripthtmlbootstrap-5

What is the best way to transfer data from Vue.js to a PHP variable?

<section class="scans"> <h3>Scans</h3> <ul v-if="scans.length === 0"> <li class="empty">No scans yet</li> </ul> <transition-group name="scans" tag="ul"> <li v-for ...

javascriptphphtmlvue.js

Building a responsive HTML5 site optimized for various screen sizes

I'm working on a website design that includes just one <div>. I have managed to make it responsive to different screen resolutions, but when testing it on a laptop, the horizontal and vertical scrollbars are automatically appearing. Does anyone ...

csshtmltwitter-bootstrap

Tips for calculating the total of unchecked checkboxes and an array checkbox using javascript

I've been attempting to calculate the total sum of values from dynamically selected checkboxes, such as "uniform", "educfees", and schoolFees, in addition to other checkboxes stored in an array (e.g., fees). However, this task has proven challenging, ...

javascripthtmlarrays

How to apply color to text in Node.js

I am in the process of creating a web-based compiler using NodeJS. My main objective is to highlight syntax in different colors. For example, consider the following C code: int var; printf("%d",var); In this code snippet, I would like the "int" and "prin ...

javascriptcssnode.jstwitter-bootstrapexpress

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

javascriptjqueryhtml

Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for e ...

javascriptjquerycss

"Despite using the same CSS and HTML code, the fonts appear distinct from each

Feeling lost here, not understanding what's going on. I made changes in Elementor on my first PC and later noticed that the font looked a bit different. I tried to revert the changes but had no luck. I also work on my second PC where the browser showe ...

htmlcssfonts

Unusual actions from the jQuery Steps extension

I am currently utilizing the jQuery Steps plugin (FIND IT HERE). The issue I'm facing lies within an IF statement that is causing the wizard to return to the first step instead of staying on the current indexed step. While all other IF statements are ...

javascriptjqueryhtml

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

htmlcss

Eliminate HTML tags along with their content using Python

Is there a way to completely remove HTML tags along with their content? I have only come across strip tags functions that preserve the text inside the tags. I need to eliminate tags and everything within them. For example: "Teste: <b> hello&l ...

pythonhtmlregexfunctionstrip-tags

Is there a way to bring a child of an element with a lower z-index to the front, even if it is behind a child of another element with a higher

I'm facing a situation where I have the following layout: <div style="z-index: 10"> <div>Whatever</div> </div> <div style="z-index: 9"> <div><div>Haaaleluia</div></div> </div> ...

htmlcssz-index

What is the best way to ensure my images are responsive to the varying device sizes when displayed on this website?

In my endeavor to design a 2-column layout using Bootstrap, I aim for each row to consist of two columns: One column will contain text, while the other will display images that complement the textual content. Below is the Bootstrap code snippet for the n ...

htmltwitter-bootstrapcssvuejs2

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

javascripthtmlcss

Tips for wrapping text within a span element that is positioned absolutely

Need a long string for the bullet text as shown in the code, they can't be separate words. Having trouble with overflow auto, it's cutting off the bullet text. The bullet text must remain in absolute position. How can I make the text wrap to t ...

htmlcss

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names. Currently, this is how it appears: https://i.stack.imgur. ...

htmlcsstemplatessmartyprestashop

Is the navigation dropdown toggle triggered by both mouseout and when hovering off of it?

I'm looking for some assistance in modifying the code so that the dropdown menu not only hides on click, but also hides on mouseout and/or when another top-level menu button is hovered over. View jsfiddle example $(document).ready(function () { ...

javascriptjquerycss

Tips on displaying the entire text when hovering over it

I'm facing an issue with a select element that retrieves options from an API. The problem is that some options are too large for the text box and get cut off, making them hard to read for users. <div class="form-group my-4"> <lab ...

htmlangulartypescriptfor-loopmouseover

Is there a way to set the background image to scroll vertically in a looping pattern?

Is it possible to achieve this using only HTML5 and CSS3, or is JavaScript/jQuery necessary? ...

javascriptjqueryhtmlcss

Troubleshooting: Style sheets not loading on a page rendered by node

Today was my first attempt at learning Node.js and creating a basic server to display a single page with a header tag. However, I encountered an error stating that the CSS file could not be loaded. This is the code I used: const express = require('ex ...

javascripthtmlcssnode.js