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.
Related
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
I am trying to create a simple cms, with the ability to allow users to change the body background colour when a img is clicked, however I am unable to get the background colour to change? I am using php and GET variables to pass colour id info and sessions to save user input. I keep getting this error: "Warning: session_start(): Cannot send session cookie - headers already sent by (output started at /Applications/MAMP/htdocs/CMS/index.php:1) in /Applications/MAMP/htdocs/CMS/header.php on line 2" yet nothing is sent before session start? And how can I make my css body background colour change depending on which image is clicked? Can someone please shed some wisdom?
thanks in advance
The code:
<?php
session_start();
if(isset($_GET['colour'])) {
$colour = $_GET['colour'];
$_SESSION['colour'] = $colour;
}
$colour_session = $_SESSION['colour'];
echo "bgcolour = $colour_session";
?>
<!DOCTYPE html>
<html>
<head>
<title>CMS</title>
<meta charset="UTF-8">
<link type='text/css' rel='stylesheet' href='css/bootstrap.min.css'/>
<link type='text/css' rel='stylesheet' href='css/main.css'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1, user- scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#navbar-collapse" 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"><span class="glyphicon glyphicon-home"></span> CMS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Login <span class="caret"></span>
<ul class="dropdown-menu">
<li><i class="fa fa-user"></i> User</li>
<li role="separator" class="divider"></li>
<li><i class="fa fa-user-plus"></i> Admin </li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="conatiner-fluid">
<div class="col-md-12">
<div class="col-md-4 col-md-offset-4 text-center bgColour">
<p>Choose Background Colour:</p>
<img src="images/grey.jpg">
<img src="images/white.jpg">
<img src="images/pink.jpg">
<img src="images/blue.jpg">
<img src="images/purple.jpg">
<img src="images/green.jpg">
<img src="images/yellow.jpg">
<img src="images/orange.jpg">
<img src="images/red.jpg">
</div>
</div>
</div>
**body and html tags are closed by 'require 'footer.php'
<body bgcolor='<?php echo $colour_session; ?>'>
just add this in your code to set the bgcolor of body
<?php
echo <<< END
<!DOCTYPE html>
<!--
-->
<html>
<head>
<title>Nav</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="M.html">Clarity</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
_END;
?>
I am trying to include a navbar at the top of every page within my web application. I have created this file in order to include other pages to display the navbar. This doesn't work however, as I continue to get the following error:
Parse error: syntax error, unexpected end of file, expecting variable
(T_VARIABLE) or heredoc end (T_END_HEREDOC) or ${
(T_DOLLAR_OPEN_CURLY_BRACES) or {$ (T_CURLY_OPEN)
Looking at the following resource: What is <<<_END?
The starting line
echo <<< END
<!DOCTYPE html>
<!--
Should be:
echo <<< _END
<!DOCTYPE html>
<!--
remove underscore and You probably have spaces after the terminator.
END;[space]
hit enter after END;
EDIT:
It is very important to note that the line with the closing identifier must contain no other characters, except a semicolon (;). That means especially that the identifier may not be indented, and there may not be any spaces or tabs before or after the semicolon.
check here for more
http://php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc
In my opinion a better way of doing this is like this:
<?php
// Some PHP code here
?>
<!DOCTYPE html>
<!--
-->
<html>
<head>
<title>Nav</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<a class="navbar-brand" href="M.html">Clarity</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<?php
// Continuing with PHP code
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>