I am new to wordpress development. I am learning to develop a new theme. I know for basic there are only two absolutely necessary files for a wordpress theme. For testing I created an index.php file and style.css fiel and tried to use it as a theme. But I am facing issues doing it.
The index.php file is being read and the content is being shown on the home page, but the css isn't getting loaded from the style.css file. The first comment is being read as the theme info can be seen in theme details section but the css isn't being loaded.
I am getting two kinds of error, first
"Failed to load resource: the server responded with a status of 404(Not Found)"
Refer to the image:
And,
"GET http://rockstargaming.hol.es/style.css net::ERR_ABORTED 404 (Not Found)"
At first I was trying to include the stylesheet thorugh <link> tag but after getting the error I tried another way to enqueue scripts - through funstions.php file, but then I see nothing, no error and no styling.
Nothing seems to be working, I tried doing everything multiple times.
index.php:-
<!doctype HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Gym</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Testing theme development
</div>
<div class="top-ribbon top-ribbon-left"></div>
<div class="top-ribbon top-ribbon-right"></div>
</body>
</html>
style.css
/*
Theme Name: GymTheme
Author: SamarpitShrivastava
Author URI: https://www.google.com
Version: 1.0
*/
html,body{
margin: 0;
padding: 0;
font-size: 10px;
background-color: #1f1f1f;
}
/*Upper Ribbon*/
/*Phone*/
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 81%;
height: 13em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
box-shadow: 0 0 5 5 yellow;
}
.top-ribbon-right{
border-top: 18em solid #ffb700;
width: 0;
height: 0;
border-left: 35em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -0.5em;
transform: rotateZ(6deg);
z-index: 200;
}
/*Phone*/
/*Tablet*/
#media only screen and (min-width: 800px){
/* For Tablets: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 17em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 25em solid #ffb700;
width: 0;
height: 0;
border-left: 49em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: -1em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Tablet*/
/*Desktop*/
#media only screen and (min-width: 1300px) {
/* For desktop: */
.top-ribbon-left{
background-image: linear-gradient(45deg, #ffd900, #ffb700);
width: 80%;
height: 20em;
float: left;
position: absolute;
margin-left: -3em;
transform: rotateZ(-10deg);
z-index: 1;
}
.top-ribbon-right{
border-top: 30em solid #ffb700;
width: 0;
height: 0;
border-left: 60em solid transparent;
float: right;
position: absolute;
right: 1em;
margin-right: -3em;
margin-top: 0em;
transform: rotateZ(6deg);
z-index: 200;
}
}
/*Desktop*/
/*Upper Ribbon*/
functions.php
<?php
function includeResources(){
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'includeResources');
?>
This is how it should be actually looking:
the problem is that you are adding the style path to the header incorrectly.
Example: bluebezer.com.br/style.css
you should be pointing to the folder where your css is which is within the themes and not at the root of the site.
Example: bluebezer.com/wp-content/themes/your-name/style.css
to get the path of your theme use the function get_template_directory_uri()
<html <?php language_attributes(); ?>>
<head>
<!-- ... other codes ...-->
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri() . '/style.css'; ?>" />
<!-- This wp_head function must be present in all wordpress headers. -->
<?php wp_head(); ?>
</head>
but the correct way to add a wordpress style is by creating a function in functions.php and adding code similar to the one below:
add_action( 'wp_enqueue_scripts', 'wpsites_new_style_sheet' );
function wpsites_new_style_sheet() {
//registering a new style in wordpress
wp_register_style( 'new-style', get_template_directory_uri() .'css/new-style.css', array(), '1.0');
//stating that the new style should be displayed in wordpress
wp_enqueue_style( 'new-style' );
}
It is important to note that this function will automatically call the style of your site header via the wp_head(); function; which should be present in all wordpress theme headers.
The wp_head(); function is responsible for displaying titles, scripts, styles, goals and other information that comes from plugins, actions, and wordpress panel settings automatically. Then it must be present in all wordpress headers or you will have various errors and difficulties during development.
Another important thing is the function: wp_footer();
It is responsible for calling extra information like scripts and other settings similar to wp_head(); and she must always be present in the example's footer:
<!-- ... other codes ...-->
<?php wp_footer(); ?>
</body>
</html>
Your stylesheet isn't located in the root directory of your WordPress installation (/style.css) but in your theme directory. This is why you should not use the HTML link attribute but rather the wp_enqueue_style function in the wp_enqueue_scripts action. You could use the official WordPress guide for this.
Furthermore, your functions.php is not valid, as style.css is not declared as a string. A PHP error should be thrown.
Change this wp_enqueue_style('style', style.css, false); to wp_enqueue_style('style', get_stylesheet_uri());.
Moreover, the function you want to include does not exist because of a typo. Rename the function to includeResources instead of inculdeResources (switch u and l).
Related
everything was working fine then randomly any CSS I add to my Message-inbox.CSS or any other CSS file in my project none of the added CSS gets applied I'm using a required once to link the header and footer and a html link for the pages own CSS. below is the links and my CSS code. I have tried clearing my browser cache and other data and also tried the link with the echo to stop storing cache but no results.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
.secondarynavigation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
You have to options.
Check whether your CSS can be accesed from the URL that you provide. Just open up source code in Chrome (Ctrl+U) and try clicking on your linked CSS file and check whether browser opens it, and it is the correct file.
In order to avoid cache just add version to your css file in the section in HTML where you refer to it, not the of the file itself in the storage, smth like "style.css?v=1". Any new parameter will be considered as new file by browsers and they will redownload that. And it won't affect your code.
To clarify, do smth like this:
<link href="/css/stylesnew.css?v=1.1" rel="stylesheet">
I have used PHP require function to link my header and footer style.css to all my other pages however the other pages also have their own specific CSS files but when I make a change to them it doesn't have an effect but I know that the style on the pages is being provided because they are the only pages with that specific style and it only deletes it if I remove the CSS link to them. Any suggestions as to why this is? I want to add CSS to these pages but its not being affected.
<?php
require_once "../addons/header.php";
?>
<link rel="stylesheet" href="Messages-inbox.css" type="text/css"/>
I used require for the header CSS and then the html link for the pages own unique CSS but I noticed the changes I make to each of the CSS files only happens if I rename the file after each change not sure why its like this
.secondarynavi
gation-messages a:hover {
color: #fd886b;
border: 1px solid #fd886b;
font-weight: bold;
}
.secondarynavigation-messages a:hover::before {
width: 100%;
}
.secondarynav-messages ::after {
content: "";
display: table;
clear: both;
}
.secondarynavigation-messages a::before {
content: "";
display: block;
height: 5px;
background-color: #fd886b;
position: relative;
top: 40px;
width: 0%;
transition: all ease-in-out 250ms;
}
.messages-nav-line {
width: 100%;
background-color: #e6e6e1;
padding: 1px 0px;
position: relative;
z-index: -1;
top: 10px;
}
this is the CSS for the page I'm working on and if I delete this CSS from the page it doesn't do anything to the webpage the effect only takes place when I remove the link to this CSS but this is the only page with this specific CSS
As an option you can prevent your css files from being cached by adding a query string with a random number.
Try somehting like this where you call your css file
<link rel="stylesheet" href="Messages-inbox.css?ver=<?php echo(mt_rand(1,500));?>" />
I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.
.frontpage_tile {
width: 270px;
float: left;
min-height: 1px;
margin-left: 30px;
}
.block {
display: block;
position: relative;
}
.block img {
display: block;
border: 1px solid rgba(53, 53, 53, 0.65);
box-sizing: border-box;
border-radius: 3px;
}
.block .caption {
font-size: 13px;
font-weight: normal;
line-height: 1.2em;
padding: 10px;
margin: 0px;
position: absolute;
bottom: 1px;
left: 1px;
right: 1px;
color: #FFF;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
z-index: 1;
}
The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.
<div class="frontpage_tile">
<a class="block" href="<?php echo get_permalink(); ?>" data-icon="">
<?php the_post_thumbnail('home-thumb'); ?>
<span class="caption">
<?php the_title(); ?>
</span>
</a>
</div>
I just scanned your website with wpscan for the sake of it, and here's your problem:
[+] Interesting header: CF-RAY: 15644be6d86308d8-LHR
[+] Interesting header: SERVER: cloudflare-nginx
[+] Interesting header: X-CF-POWERED-BY: WP 1.3.14
[+] Interesting header: X-POWERED-BY: PHP/5.5.14
You're using Cloudflare :) , just login into your Control Panel and enable Development mode.
I'll leave the old answer below, just in case someone finds this question and wants to know how to do a bit of troubleshooting:
If you go at the top of your stylesheet you'll see the following comments:
/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Author: the WordPress team
[...]
Version: 1.4
[...]
*/
Just change your number version and Wordpress now will serve the stylesheet with the new version number, forcing your browser to re-download it, otherwise while you're under development you can register your CSS in that way (which is really handy):
wp_enqueue_style( 'main-style', get_stylesheet_uri(), array(), time() );
This enforces to append a timestamp on the CSS as query variable, so your browser believes that's a new file and the new fresh CSS gets downloaded every time you refresh the page.
Generally the CTRL/CMD + SHIFT + R works without any problem, if you still see your old CSS even with those changes one of these is probably what is causing problems:
Your website is using Cloudflare and you forgot to enable dev mode
Your wordpress is running a caching plugin
You're uploading your file in the wrong place
Cheers
in the css addd the !important syntax after the lines like this
.some_class_to_edit{
text-decoration: none !important;
}
And also try to check that there is no another css coming after that, which can override it
I was following this tutorial to learn about the include and include_once functions in PHP.
The following files work just fine:
index.php:-
<?php
include_once 'header.php';
echo 'variable';
header.php:-
<h1>My Page's Header</h1>
But when I try to include the following .php file into my index.php, it does not produce the desired result. The header rather overlaps and thus completely hides the 'variable'
What I want is that after I include the header from an external file, My page should start underneath the header. The header included from external file should not be considered included in my page, so none of the elements are overlapped or such. How can I achieve that?
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.top-bar {
position: fixed;
width: 100%;
top: 0px;
left: 0px;
background: #000029;
padding: 5px;
}
.logo {
display: inline-block;
vertical-align: top;
color: white;
}
</style>
</head>
<body>
<div class="top-bar">
<img src="https://www.google.com.pk/images/srpr/logo11w.png" alt="Logo" class="logo" >
</div>
</body>
</html>
<?php
include_once 'header.php';
?>
<div id="parent_div" >
<script>
function getHeaderHeight() {
return document.getElementById("top-bar").height(); //top-bar is in header.php
}
document.getElementById("parent_div").style.padding-top="getHeaderHeight()";
</script>
<h1>Heading</h1>
</div>
That's because your header is set to position: fixed;. It is taken out of the document flow and will follow you as you scroll arround.
When you want it to not stick to the client top, change your css to this:
.top-bar {
position: relative;
background: #000029;
padding: 5px;
}
If you like your header to be fixed, you may also set a padding to the body of the document, that equals the height of your header.
Here you see your current problem: http://jsfiddle.net/Lc3W8/
Solution 1: http://jsfiddle.net/Lc3W8/1/
body
{
margin:0;
padding:0;
height: 3000px;
/*new:*/
padding-top: 30px;
}
.top-bar
{
position: fixed;
left:0;
right:0;
top:0;
height: 30px;
background-color: blue;
}
Solution two: http://jsfiddle.net/Lc3W8/2/
body
{
margin:0;
padding:0;
height: 3000px;
}
.top-bar
{
height: 30px;
background-color: blue;
}
I'm no .php expert, so I'm looking for a little help (or at least an explanation)
A plugin I'm using on my organization's site (called Coin Slider 4 WordPress) is slowing the site to a crawl. I ran a full page test on pingdom tools and the plugin's .php file (coin-slider-4-wp.css.php) takes more than 11 seconds to load. The .php file itself is only 1kb, and nothing else is particularly slow.
Here's a screen shot:
And here's the text of the .php file in question:
/* Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }
.cs-title { width: 920px; padding: 10px; background-color: #000000; color: #FFFFFF; }
.cs-prev, .cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
#coin-slider-coin-slider { width: 940px}
Not really sure what's going on, but any tips/advice would be great, as this is obviously making our site unusable :/
Thanks!
The coin slider 4 WP plugin hasn't been updated in 2 years. I'd recommend adopting something more stable and actively maintained such as Nivo Slider
UPDATE: You could also tell the plugin not to call that php file.
Open the Editor in WP in your Plugins sidebar. On the right you will see a drop down with the different plugins you can edit. Slect the coinslider plugin. Now below that dropdown, you will see a list of files. In your coinslider-content.php file, there is a link to your CSS file.
Remove this line:
<link rel=\"stylesheet\" href=\"".$path."css/coin-slider-4-wp.css.php\" type=\"text/css\" media=\"screen\" charset=\"utf-8\"/>
From:
function cs_head(){
$path = get_bloginfo('wpurl')."/wp-content/plugins/coin-slider-4-wp/";
$script = "
<link rel=\"stylesheet\" href=\"".$path."css/coin-slider-4-wp.css.php\" type=\"text/css\" media=\"screen\" charset=\"utf-8\"/>
<script type=\"text/javascript\" src=\"".$path."scripts/jquery-1.4.2.min.js\"></script>
<script type=\"text/javascript\" src=\"".$path."scripts/coin-slider.min.js\"></script>
";
echo $script;
}
Once you have removed that line, copy the content from your coin-slider-4-wp.css.php file. Click Editor on you Theme sidebar on the left. On the right you will see a list of files, one of them being style.css. Paste the contents of your coin-slider-wp.css.php at the bottom of your style.css (stylesheet) file.
Once you have done all this. It should remove that 11s it takes to request the file. Try it out and let me know if it works.