I'm new at wordpress and I know that there is a lot of answer about my problem but, even I already tries a lot of them and it still doesn't work no matter what I do.
I already make my own custom wordpress themes and it works using bootstrap external link style but my own style.css doesn't apply right. just to make sure I already include it in my header.php too. I make it using this tutorial converting-html-sites-to-wordpress-sites
this is my header.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>walabi</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Niconne&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css" rel="stylesheet">
<!-- Cache Control -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="refresh" content="600">
</head>
<body>
<!-- Header Start -->
<nav id="paham-nav" class="navbar navbar-expand-lg fixed-top scrolling-navbar">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-chevron-down" style="color: aliceblue"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto nav-flex-icons">
<li class="nav-item">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="career.php">Career</a>
</li>
</ul>
</div>
</nav>
<!-- Header End -->
this is my function.php (first of all how this function.php work? when i'm not even declare it)
<?php
//Definir le répertoire du thème
define("THEME_DIR", get_template_directory_uri());
//Enlever le générateur de tags meta pour la sécurité (les gents ne peuvent pas voir quelle version WP)
remove_action('wp_head', 'wp_generator');
// ENQUEUE STYLES
function enqueue_styles() {
/* Main CSS */
wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all');
wp_enqueue_style( 'style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
?>
this is some answer that i try:
style-css-in-wordpress-doesnt-work-after-adding-header-php-file
style-css-not-loading-in-wordpress-theme
style-css-not-working-in-wordpress
Just to make sure this is my directory :
in my directory there is:
career.php
footer.php
header.php
index.php
function.php
screenshot.png
style.css
can someone help me to solve this? I still can't solve this since yesterday
Did you try to make a echo of bloginfo('stylesheet_url') ?
Maybe the function dosn't return anything or a wrong path.
For testing, you can also put the path of the css file directly on HTML.
<!-- Custom CSS -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="PATH_TO_CUSTOM_CSS/css/style.css">
Look at this line you have:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>css/style.css">
bloginfo('stylesheet_url') is already the full URL of the stylesheet itself, including the file path and name. So you don't need to append css/style.css to it! Just make that
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
And note: The stylesheet should be in the theme directory, not in a separate 'css' directory for this to work.
try this on functions.php
function enqueue_styles() {
/* Main CSS */
wp_register_style( 'style', THEME_DIR . '/style.css', array(), '1', 'all');
wp_register_style( 'bootstrap', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');
wp_register_style( 'material', 'https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.7/css/mdb.min.css');
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
wp_enqueue_style( 'style' );
}
Have you inspected the source code and seen if the stylesheet is being called on the page? If so, try clicking or pasting the link into another tab and making sure it loads, and if not, try to compare the path it's trying to load the CSS from, to what the actual path is.
You can also right click on the page and click inspect, and go to the network tab and reload that page, it should tell you if that stylesheet is being loaded or failed to load.
Let me know when you do this and I'll check back and see if you need any more help.
Related
I added wow.min.js and initializing the WOW on the end of the body and animate.css on the header. But after adding the classes to elements, animation doesn't appear.
I tried adding the CSS and js file via function.php but that didn't work too.
body:
<?php wp_footer();?>
<script src="<?php echo get_template_directory_uri() . '/js/wow.min.js' ?>"></script>
<script>
wow = new WOW();
wow.init();
</script>
</body>
header:
<head>
<meta charset="<?php bloginfo('charset');?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/header.css' ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/animate.min.css' ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<?php wp_head();?>
</head>
Good day, curlybom.
Can you please check if Jquery also attached to template?
I think wow.js and animate js need Jquery.
<script src='https://code.jquery.com/jquery-3.6.0.min.js' id='jquery-core-js'></script>
Tell please if it works...
After spending 2 days on the issue, I've found out that I should add animate__animated along with other class names to execute the animation. I don't know if this is a new update on animate.css, but tutorials never mentioned this. Embedding the scripts was all fine.
I'm trying to create my new own theme for wordpress (and the first one) and I encounter that my site isn't loading the header nor the content of index.php. It's pretty strange, I've read the WP WSoD documentation but I couldn't find anything helpful since my theme only have a couple of lines, I don't see the problem.
This is my theme structure:
And I've only edited index.php, header.php and footer.php. My functions.php seems to have something but I just added some lines to test, it's now blank again.
And this is what's inside my header.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> <?php bloginfo( 'name' ); ?> </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/assets/css/bootstrap.min.css">
<!-- Natural Stylesheet -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="<?= get_template_directory_uri(); ?>/assets/img/favicon.png"/>
</head>
<body>
This is what's inside my footer.php:
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/popper.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/bootstrap.min.js"></script>
</body>
</html>
And this is what I've inside my index.php:
<?php get_header(); ?>
<?php while( have_posts() ) the_post(); ?>
<?php get_footer(); ?>
I edited index.php and WordPress was loading front-page.php
Okay. I've been trying to link the css stylesheets to my webpages. I've been scratching my head trying to figure out what I am doing wrong. Any ideas?
functions.php
<?php
function roofers_wp_resources() {
wp_enqueue_style('normalize', get_stylesheet_uri());
wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'roofers_wp_resources');
?>
header.php
<!DOCTYPE html>
<html>
<head>
<title>R.J Roofers</title>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body>
front-page.php
<?php get_header(); ?>
<div class="main-container">
<header class="main-header">
<!-- <h1 class="logo-name"><li>R.J Roofer</li></h1>
--> <h1 class="logo-name">R.J Roofer</h1>
<nav class="main-nav">
<li class="nav-item-1">home</li>
<li>services</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
</nav>
</header>
<div class="quote-box-1">
<div class="quote-box">
<p class="quote-box-title">HOME ROOFING BRISBANE NO.1 FOR ROOF RESTORATIONS AND ROOF REPLACE</p>
<button class="quote-btn-1">BOOK A FREE QUOTE</button>
</div>
</div>
More Code..
get_stylesheet_uri() gives full url to your style.css file, so in your case it's good only if you want to enqueue the style.css file.
For the second file, you need to pass a full url including the name of the file.
Assuming your normalize file called normalize.css:
function roofers_wp_resources(){
wp_enqueue_style('my-theme-style', get_stylesheet_uri());
wp_enqueue_style('normalize', get_template_directory_uri() . '/normalize.css');
}
add_action('wp_enqueue_scripts', 'roofers_wp_resources');
Notice that if you working on a child theme, you need to change get_template_directory_uri() to get_stylesheet_directory_uri().
I have a variable called $cat(which stands for 'category') in the URL.
Depending on whether it is "a" or "b" I swap the stylesheet using a link:
<?php
if($cat == "a") { ?>
<link rel="stylesheet" href="/css/styleA.css">
<?php }
elseif($cat == "b") { ?>
<link rel="stylesheet" href="/css/styleB.css">
<?php } ?>
styleA.css makes the background-color of the header blue, and styleB.css makes it red
<div id="header" data-role="header" data-position='fixed'>...</div>
if I click on a link that looks like this:
Click for red
Click for blue
the URL actually works (content is incuded depending on $cat) and I do get the value of $cat but the stylesheet does not seem to have swapped, since the color doesn't change. But if I reload the page (with the URL given by the link before) the stylesheets swap and everything works perfectly.
I used the same method for the desktop version of the website I'm working on and everything works perfectly fine.
This issue seems to only appear if I use jquery mobile.
Does anyone see why this isn't working as it should?
EDIT (adding html):
This is pretty much it, but here's the rest of it:
headpart:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title></title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<!-- Extra Codiqa features -->
<link rel="stylesheet" href="/css/codiqa.ext.css">
<link rel="stylesheet" href="/css/style.css">
<?php if($cat == "a") { ?> <link rel="stylesheet" href="/css/styleASS.css"> <?php }
if($cat == "b") { ?> <link rel="stylesheet" href="/css/styleBB.css"> <?php }
?>
<!-- jQuery and jQuery Mobile -->
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<!-- Extra Codiqa features -->
<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
</head>
<div data-role="page" id="page">
<div id="panel_menu" data-role="panel" data-display="overlay">
<ul data-role="listview">
<li role="heading">Navigation</li>
<li>Home</li>
<li>Products</li>
<li>Service</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
<div id="header" data-role="header" data-position='fixed'>
<h1>Header</h1>
Menu
</div>
<div data-role="content">
<?php include "$menu_page_content";?>
a
b
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" class="ui-icon-nodisc">
<ul>
<li><a href="#" id='language' data-icon='custom'>Change Language</a></li>
<li><a href="#" id='category' data-icon="custom" >Change Category</a></li>
<li><a href="#" id='contact' data-icon="custom" >Contact</a></li>
</ul>
</div>
</div>
</div><!-- page -->
EDITIT:
Uploaded it to a free hoster: here
You may either click on one of the links in the content area, or on "category" in the footer area. Click & reload the page.
If most of your styles are the same with the exception of the color I would suggest putting them in a single style sheet and writing in a class to the body.
For Example
.header {
/* general header styles margins paddings and whatnot */
}
.cat-a .header {
background-color: red;
}
.cat-b .header {
background-color: blue;
}
Then variably write the class in on the body
<body class='cat-<?php echo $cat; ?>'>
It must depends on how data are cached on the browser you're using.
Several solutions are possible.
You could not swap CSS stylesheet, but add style properties using PhP or Javascript. That way you'll be 100% sure it will change. (As long as the user has javascript by the way, PhP would make it really 100% sure)
Or force the browser to reload CSS sheets everytime, but it's not a bandwidth friendly solution, I would not recommend that.
In case you want to use it to save user's choice and reload the correct background everytime, give a look at this :
http://www.dynamicdrive.com/forums/archive/index.php/t-44389.html
Didn't find any SO link though
I basically use php variables to store the value of the title and the body's ID.
This last one is a technique to have my button (pressed) in the navigation according to which section of the page the user is (in this case the user will know he is currently at "home").
Beginning of my index.php:
<?php
$title = "New Project";
$body = "home";
include("common/header.php");
?>
<div id="content">
<div class="container">
<div id="tagline">
Beginning of my header.php
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="styles/slimbox2.css" />
<link rel="stylesheet" type="text/css" href="styles/global.css" />
<link rel="stylesheet" type="text/css" href="styles/home.css" />
<link rel="stylesheet" type="text/css" href="styles/contact.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.validate.js"></script>
<script type="text/javascript" src="scripts/slimbox2.js"></script>
<script type="text/javascript" src="scripts/custom.js"></script>
</head>
</head>
<body id="<?php echo $body; ?>">
<div id="header">
<div class="container">
<div id="topbar">
<h1>wider design</h1>
<ul id="lang">
<li>English</li>
<li>Español</li>
<li>中文(繁體)</li>
<li>中文(简体)</li>
</ul>
<ul id="nav">
<li class="home">home</li>
<li class="products">products</li>
<li class="about">about</li>
<li class="contact">contact</li>
</ul>
To let the user know in which section he/she is:
#home li.home a, #products li.products a, #contact li.contact {
color: #999;
}
is there a simpler way of doing this?
Am I using unnecessary those PHP variables?
Yes, what you're doing is fine. I do something similar with a PageTemplate class. In addition to setting the title and navigation, it allows navigation links to appear based on user authentication, allows javascript and css to be added to the head section, etc.
What you're doing is very common. There are a million ways to do it, but they'll all require setting some variables.
janoChen,
I use the following method:
// get the url
$url= $_SERVER['PHP_SELF'];
// add a class on the menu item
<ul id="lang">
<li><a href="index.php" <?php if (strpos($url, "index.php")) { echo " class='active'"; } ?>>English</a></li>
//with css I set a style for the class active
li a.active {
color: #990000;
}
But you method also works.
Or else use an MVC framework like CakePHP
This works, but you should consider using a template engine such as Smarty instead.