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().
Related
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.
I am following this Link to understand the basic framework of PHP Web app but I am not able to understand how can I switch back and forth to the different layouts (Articles, Portfolio) through navigation bar?
All different layout must be like index.php.
Image you have articles.php and portfolio.php. There content would be like:
Articles.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your article content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
and portfolio.php:
<?php
// load up your config file
require_once("/path/to/resources/config.php");
require_once(TEMPLATES_PATH . "/header.php");
?>
<div id="container">
<div id="content">
<!-- Your portfolio content here!!! -->
</div>
<?php
require_once(TEMPLATES_PATH . "/rightPanel.php");
?>
</div>
<?php
require_once(TEMPLATES_PATH . "/footer.php");
?>
But everytime you add a new page, you must update your header.php:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple Site</title>
</head>
<body>
<div id="header">
<h1>Simple Site</h1>
<ul class="nav global">
<li>Home</li>
<li>Articles</li>
<li>Portfolio</li>
<li>Any other page</li>
</ul>
</div>
This is what actually I wanted to achieve
<nav>
<ul>
<li>Home</li>
<li>Projects</li>
<li>Calculator</li>
<li>Blog</li>
<li>About</li>
</ul>
</nav>
I am sending the page variable to the index and then it is rendering the layout accordingly through this way.
if (isset($_GET["page"])){
$page=$_GET["page"];
}
else {
$page = "home";
}
renderLayoutWithContentFile($page .".php", $variables);
These functions are located within my header.php and functions.php files. I am including my header.php, index.php, footer.php, and functions.php files. I believe to have zoned in on the error and it has to do with the second add_action in functions.php, along with the wp_head() and wp_footer() functions. Basically, the error(page doesn't load) does not happen when I remove either the second add action or the entire pt_theme_js function block within functions.php.
How do I fix this error and why is it occurring??
Header.php
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php wp_title(); ?></title>
</head>
<?php wp_head(); ?>
<body>
<header class="row no-max pad main">
<h1><a class='current' href="index.html">G</a></h1>
<span></span>Menu
<nav>
<h1 class="open"><a class='current' href="index.html">G</a></h1>
<ul class="no-bullet">
<li class="current parent"><a class='current' href="index.html">Portfolio</a>
<ul class="sub-menu">
<li>Portfolio Item</li>
<li>Portfolio Item</li>
<li>Portfolio Item</li>
<li>Portfolio Item</li>
</ul>
</li>
<li class="parent">Blog
<ul class="sub-menu">
<li>Single Post</li>
<li>Author Page</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
Index.php
<?php get_header(); ?>
<?php get_footer(); ?>
Footer.php
<div class="footer-clear"></div>
<footer class="row no-max pad">
<ul class="social-links no-bullet">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>Copyright <?php echo date('Y'); ?></p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
Functions.php
<?php
function wpt_theme_styles() {
wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
wp_enqueue_style('normalize_css', get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'wpt_theme_styles');
function wpt_theme_js() {
wp_enqueue_scripts('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', '', '', false);
wp_enqueue_scripts('foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '', true);
wp_enqueue_scripts('main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true);
}
add_action('wp_enqueue_scripts', 'wpt_theme_js');
?>
change
wp_enqueue_scriptS( [...]
by
wp_enqueue_script( [...]
SOLVED.
I solved it by using this walkthrough:
http://www.wpbeginner.com/wp-tutorials/how-to-properly-add-javascripts-and-styles-in-wordpress/
What I did was change the wp_enqueue_scripts dealing with JS files and first used wp_register_script before wp_enqueue_script. #rubenrp81 mentioned something like changing wp_enqueue_scripts to wp_enqueue_script, and the answer lies within the link I shared above.
Here is my resulting functions.js file:
<?php
function basic_theme_styles() {
wp_enqueue_style('foundation_css', get_template_directory_uri() . '/css/foundation.css');
wp_enqueue_style('normalize_css', get_template_directory_uri() . '/css/normalize.css');
wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'basic_theme_styles');
function basic_theme_js() {
wp_register_script('modernizr_js', get_template_directory_uri() . '/js/modernizr.js', array('jquery'), '', false);
wp_enqueue_script('modernizr_js');
wp_register_script('foundation_js', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '1.1', true);
wp_enqueue_script('foundation_js');
wp_register_script('main_js', get_template_directory_uri() . '/js/app.js', array('jquery', 'foundation_js'), '', true);
wp_enqueue_script('main_js');
}
add_action('wp_enqueue_scripts', 'basic_theme_js');
?>
Try deleting the closing '?>' at the end of the functions file.
No guarantee, but there usually isn't one.
I have been working on converting html simple template to WordPress theme so I create folder into xampp - htdocs - wp-content - themes and I create inside this folder 8 files
footer.php , functions.php , header.php , index.php , page.php
sidebar.php , single.php , style.css
In footer file i add this code:-
</div>
<?php get_sidebar();?>
<div style="clear: both;"> </div>
</div>
</div>
</div>
<!-- end #page -->
</div>
<div id="footer">
<p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by Fotogrph | Design by FreeCSSTemplates.org.</p>
</div>
<!-- end #footer -->
</body>
</html>
and in header file i add this code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title><?php bloginfo('title'); ?></title>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</div>
</div>
</div>
<!-- end #header -->
<div id="menu">
<?php wp_nav_menu(); ?>
</div>
<!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="content">
and in index file this code
<?php get_header(); ?>
test
<?php get_footer(); ?>
I go to my admin page and find this as a theme there and I active it.
But I find it very empty and I didnt know what wrong.
If you get only blank screen then in most cases there is some misconfiguration in functions.php, do you have any code in there?
I'm not sure if it will solve your problem, but try using wp_enqueue_style() function in your functions instead of echoing your styles in header.
function theme_slug_enqueue( ){
wp_enqueue_style( 'open-sans', http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' );
wp_enqueue_style( 'main-style', get_stylesheet_directory_uri() . 'style.css' );
}
Put that in your functions.php, and delete elements from your header.
bloginfo('stylesheet_url') function only gets your main directory url, you are not calling your mains style.css anywhere as I can see. If you don't want to use wordpress standard enqueue function at least try changing
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="screen" />
to:
<link href="<?php bloginfo('stylesheet_url') . 'style.css'; ?>" rel="stylesheet" type="text/css" media="screen" />
refference: https://codex.wordpress.org/Function_Reference/wp_enqueue_style
Wordpress theme required atleast two files to work so first check your theme by including only two files in your theme folder
wp-content/themes/mytheme/
style.css
index.php
add these lines in your style.css file
/*
Theme Name: My theme
Version: 1.0
*/
and add these line in your index.php file
this is theme testing
then run your wordpress website and check
Well you have to create a new folder inside the theme folder. SO it should look like this
wp-content
themes
Theme-name (lets say bruno)
header.php
footer.php
index.php
style.css
Now in style.css, its important that you add these comments.
/*
Theme Name: Bruno theme
Theme URI: Your site
Author: Your name
Author URI: http://yoursite.org/
Description: Some description
Version: 1.0
*/
These comments will tell wordpress all the information about your theme
I am working on an established website which has many problems in it. I am trying to incorporate a new navbar that will be coded in a 'header.php' file. I want to call it in the index.php and other pages using <?php include('header.php') ?> but there are differences in the pages and it needs the header.php to be dynamic. I want the header.php to have some slight changes when called by a specific page. How can I dynamically change the header.php file depending on what page called it?
This is my code:
HEADER.PHP
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/angel-header.css">
<!-- RENAME THIS CSS FILE APPROPRIATELY -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body class="m-price_update price_starway vb lang-en webp">
<header class="angelmod-site-header">
<div class="angelmod-wrapper">
<a href="#">
<img src="img/logo_sb.png" alt="Small Builders">
</a>
<nav class="angelmod-site-nav">
<ul class="angelmod-nav-list">
<li>Home
</li>
<li>Products
</li>
<li>Signup
</li>
<li>Login
</li>
</ul>
</nav>
<div class="angel-mod-navbtn">
<div class="angel-mod-navbtn-bars"></div>
<div class="angel-mod-navbtn-bars"></div>
<div class="angel-mod-navbtn-bars"></div>
</div>
</div>
<script src="js/angel-header.js"></script>
<!-- RENAME THIS JS FILE APPROPRIATELY -->
</header>
I have a products.php file that needs to change the body tag to: <body class="m-price_update price_starway vb lang-en webp"> right now the header.php only have <body>.
Please don't ask why the body differs from page to page, it's the previous dev's work and I am tasked to not change those.
Any variables defined in the file doing the including will be available in the included file. Just define a variable in the including file that identifies what needs to be done in the included file.
// products.php
$include_option = 'products';
include('header.php');
Then in the included file, refer to that variable at the appropriate place to conditionally do whatever needs to be done:
// header.php
...
<?php if ($include_option == 'products') { ?>
<body class="m-price_update price_starway vb lang-en webp">
<?php } else { ?>
<body class="something else">
<?php } ?>
...