I don't know what I'm doing wrong. When I use the following code, nothing actually gets linked to the page, except the random text at the bottom:
<?php
function salt_scripts() {
//global $wp_styles;
//wp_enqueue_style( 'stylesheet', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
//wp_enqueue_style( 'stylesheet', 'http://fonts.googleapis.com/css?family=Varela');
// Loads main stylesheet
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap-theme', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
wp_enqueue_style( 'custom-styles', get_template_directory_uri() . '/css/custom-styles.css' );
}
add_action( 'wp_enqueue_scripts', 'salt_scripts' );
?>
LKDJFLSDKJFLSDKFJSLDKFJ WORK
I'm really at a loss at what else to try. I've been to dozens of sites and have stolen code bits from the default WordPress themes.
My folder structure is like this:
salt
css
bootstrap.css
bootstrap-theme.min.css
custom-styles.css
img
js
style.css
header.php
index.php
functions.php
This is what's in my header.php:
<body data-spy="scroll" data-target="#main-nav" data-offset="120">
<!-- Begin Main Nav-->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" id="main-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="fa fa-bars"></span>
</button>
<a class="navbar-brand" href="#home"><img src="images/SaltSolutionsLogo.jpg" alt="SALT Solutions" /></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>About</li>
<li>Solutions</li>
<li>Case Studies</li>
<li>Resources</li>
<li>Calculate</li>
<li>Our Team</li>
<li>Blog</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right social-media hidden">
<li><img src="images/facebook.png" alt="Facebook" /></li>
<li><img src="images/twitter.png" alt="Twitter" /></li>
<li><img src="images/googleplus.png" alt="Google+" /></li>
<li><img src="images/linkedin.png" alt="LinkedIn" /></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!--End main-nav -->
You're missing the top of your document which is why this isn't working.
Add the following to the top of header.php:
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
Much more could / should go here but this will get you started and fix your CSS loading issue.
Close off the HTML tag in footer.php
Before </body> in footer.php add <?php wp_footer(); ?>
E.g.
<?php wp_footer(); ?>
</body>
</html>
Related
i am running a website which buy from some one. website is created on php now i am trying to modifying website header i want to set a drop down menu in my header but drop down is not working on it or may be i am programming in a wrong way.
<!-- Nav start -->
<div class="navbar navbar-default" role="navigation">
<div class="navbar-collapse collapse" id="nav-main">
<ul class="nav navbar-nav">
<li><a title="" href="<?php echo base_url(); ?>">Home</a></li>
<li class="<?=(current_url()==base_url('cms/cms_page/about-us')) ? 'active':''?>"><a title="" href="<?php echo base_url(); ?>cms/cms_page/about-us">About Us</a></li>
<li><a title="" href="<?php echo base_url() ?>training">Training</a></li>
<li><a title="" href="<?php echo base_url() ?>seeker-login">Post Resume</a></li>
<li class="<?=(current_url()==base_url('job')) ? 'active':''?>"><a title="" href="<?php echo base_url() ?>job">Government Jobs</a></li>
<li><a title="" href="<?php echo base_url() ?>contact">Contact Us</a></li>
<li class="yellow">Employer Site</li>
<li class="black">Sign In</li>
<li class="green">Register</li>
</ul>
<!-- Nav collapes end -->
</div>
<div class="clearfix"></div>
</div>
<!-- Nav end -->
Here is a code in which i want to set drop down
please any one rewrite code of "Training" with drop down for me with same css.
once i get the idea i will do it my self
It's hard to say without seeing the css and js code, but maybe the problem is that the bootstrap js script is not included in your website.
Try adding in your header the links to bootstrap:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
If it is a Wordpress website, you need to include these links via functions.php file:
function your_prefix_scripts() {
wp_enqueue_style('bootstrapcss', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css', array(), '5.0.0');
wp_enqueue_script('bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js', array(), '5.0.0', true);
}
add_action('wp_enqueue_scripts', 'your_prefix_scripts');
Hope this will solve the issue.
I am very new to wordpress development and I tried adding bootstrap through the function.php file. I get the bootstrap styles but some of the things like the dropdown and the the expanding hamburger menu are not working. Can someone explain what I am doing wrong?
This is my functions.php file:
<?php
add_action('wp_enqueue_scripts' , 'vault_files');
function vault_files(){
wp_enqueue_style('vault_main_style', get_stylesheet_uri());
wp_enqueue_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
}
?>
my header.php file looks like this:
<!doctype html>
<head>
<!--the following function lets wordpress be in control of the head section
this is prevent our theme from breaking when we add other plugins. -->
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Patua+One&display=swap" rel="stylesheet">
<!--navbar starts here-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
You can just put bootstrap link here
Header.php
<head>
<?php wp_head(); ?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
ANOTHER WAY
Functions.php
Download all CDN and put in one or make tow different folder like css & js folder after put below code in functions.php file
<?php
/**
* Enqueue scripts and styles
*/
function your_theme_enqueue_scripts() {
// all styles
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
// all scripts
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );
I figured out the problem.
The problem was that i didnt include these lines which were in my footer.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I have created a simple 4 page site using Twitter Bootstrap. Although it worked previously, but now scrollbars are appearing in different sections on the home page.
I've got a dropdown on the top menu. Whenever the "Product" menu item is clicked ( https://gyazo.com/8edfee3de1f27861dee5488da2b2a168), rather than showing a dropdown menu, it's producing a menu with a scrollbar.
Similarly, I've also created a carousel below the navigation but scrollbars are appearing on the "previous" and "next" button
The scrollbar is even appearing on the footer
When viewed on a mobile device (an emulator) the icon bars are not being displayed. (https://gyazo.com/7f78dfc4797a135cc3083fa1f6aa8bc2)
Here is the code for the index page:
<?php require_once "inc/functions.php"; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simex</title>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
</head>
<body>
<?php require "inc/navigationTop.php" ?>
<?php require "inc/slider.php"; ?>
<?php require "inc/homeTiles.php" ?>
<?php require "inc/footer.php" ?>
</body>
</html>
Here's the code for the navigation section:
<?php require_once "inc/functions.php" ?>
<nav class="navbar navTop">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php" target="_self">Simex</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav pull-right navigationList">
<li>Home</li>
<li class="dropdown">
Products <span class="caret"></span>
<ul class="dropdown-menu">
<li>Reverse Osmosis</li>
<li role="separator" class="divider"></li>
<li>Water Treatment</li>
<li role="separator" class="divider"></li>
<li>Water Bottling Plant</li>
<li role="separator" class="divider"></li>
<li>Japanese Reconditional Vehicles</li>
<li role="separator" class="divider"></li>
<li>Export & Sesame Seeds</li>
<li role="separator" class="divider"></li>
<li>Agri Farming & Equipment</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
The problem was with the attached stylesheet.
Previous css style:
* {
.
.
overflow-x:hidden;
}
I erased the overflow-x property and placed it as a property for the body, like:
body {
.
.
.
overflow-x:hidden;
}
I have a bootstrap navbar. And it is being used on many pages. So I have created one navbar.php and It contains the elements of the navbar.
I am including it on all the pages. But the dropdown part of the navbar is not functioning properly. It is not taking me to the desired page. All the links that are refering to home.php is working. The dropdown for login also works. But when I click on it it does not take me to the login.php or masterlogin.php
What could be the problem?
navbar.php
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.php"><img src="logo3.png" alt="Home"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGIN</li>
<li>MASTER LOGIN</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
home.php
<!--At the top-->
<?php
include_once "navbar.php";
?>
<!-- Followed by rest of the code for home.php-->
replace your css js
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
it's working in your code
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I am customizing an already existing theme. The theme uses a header.php and a footer.php. I noticed that the <body> and </body> tags are split between the two PHP files, respectively. If I want to make a <form> element that will not be a part of the navbar at the top nor the footer links at the bottom, should I make a separate PHP file? This might seem like common sense for most, but I am very new to web dev. I'm asking because it is also possible to put it under the navbar code in my header.php file.
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width, initial scale=1" />
<title><?php wp_title( ' | ', true, 'right' ); ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_uri(); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="wrapper" class="hfeed">
<header id="header" role="banner">
<section id="branding">
</section>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.efficientmind.org/?page_id=73&ap_page=ask">MoonLighting</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Side Job</li>
<li class="dropdown">
My Account <span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings</li>
<li>Add Funds</li>
<li role="separator" class="divider"></li>
<li>Sign Out</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.container-fluid -->
</nav>
footer.php
<div class="clear"></div>
</div>
<footer id="footer" role="contentinfo">
<div id="copyright">
<?php echo sprintf( __( '%1$s %2$s %3$s. All Rights Reserved.', 'blankslate' ), '©', date( 'Y' ), esc_html( get_bloginfo( 'name' ) ) ); echo sprintf( __( ' Theme By: %1$s.', 'blankslate' ), 'TidyThemes' ); ?>
</div>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
The general rule of thumb is that code which will be reused among multiple pages should be split off into a separate file, like header.php and footer.php. This makes a project easier to maintain. Furthermore each file should try to only accomplish one task.
Basically if not all uses of the header file will need this form, it should go into a separate file.
Assuming two things here:
The form will be on top of every page
There will be no identical form somewhere else (ie. in the contents or footer of the page)
It would definately belong in the header.
if it is a common form that you would use somewhere else (like a login form would maybe be used on top of every page and on a login page) you should add it as a function in a templates.php file, and call that function from the header.