I wish to create a wordpress plugin to add below script in all pages. So I need to add that script in theme footer. How can I add it in footer.php using plugin?
eg script =
script type="text/javascript" src="sample.js">
also I wish to add it in before body closing tag..
Thank you..
Use wp_enqueue_script to load the script in your themes functions.php file. Else, directly embed the script in your themes footer.php file.
for a javascript script you can just open the footer.php file and add the reference in there before the closing body tag, or use an include if it's a php script;
...
<script type="text/JavaScript" src="yourscript.js" />
<?php
include("yourscript.php");
?>
</body>
...
PS: make sure that your .js file is in the same directory as your footer.php
Related
I'm making a website with multiple pages with About info, Projects, Events etc.
My first question is, how can I include my nav bar, header and footer to be in all of the html files without copying the full code for each of them?
My second question is, how should the html structure look in the separate header/footer files so I can include them in my pages html's?
If you mention PHP as a solution, please point me to some link/tutorial for the process.
If you use php files you could do something like this:
index.php:
<?
include("header.php");
?>
//page content
<?
include("footer.php")
?>
header.php:
<head>
//head
</head>
<body>
footer.php:
<footer>
//footer
</footer>
</body>
In the header.php you could put the tags etc.
In every page you could just include these files than
You can create specific files for header and footer and require them in the pages you need them.
require 'footer.php'
require 'header.php'
First you need to make three files navbar.php, header.php and footer.php which contains their code separately.
Now in your each web pages place the below code.
include('header.php'); //Your website header code will be load from header.php
include('navbar.php'); //Your website navbar code will be load from navbar.php
include('footer.php');//Your website footer code will be load from footer.php
You can do with AngularJS. If you do not want to use server side scripting
http://www.w3schools.com/angular/
<body ng-app="">
<div ng-include="'header.htm'"></div>
Your page goes here
</body>
do not forget to add AngularJS library or you can use cdn.
I am making website and this website will have more than 20pages.
I am using my template to add a webpage. This template has header and footer, so I just add the body of new page.
But, what if I want to change navigation bar in the header, then I have to change all 20 pages that I already made to correct.
I want to know better way.
I read a book, and it says about "php include" function.
Should I use this function in the header and footer of each webpage to call header and footer file?
If I want to change the navigation bar in the header, all I can do is changing only one header file, then rest of website will be changed.
Is this correct way?
In this case, what do you do?
I am a beginner, so please advise me.
Thank you in advance.
You should build your website as following. The header.html would contain the navigation.
header.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<nav>
...
</nav>
footer.html
<footer>
...
</footer>
</body>
</html>
page.php
<?php
require_once 'header.html';
?>
Your content goes here
<?php
require_once 'footer.html';
?>
You should use require_once so the header and footer will be imported only once per script and if the header or footer cant be found, the script will throw an exception and stop the "application".
"require_once" and "require" are language constructs and not functions. Therefore they should be written without "()" brackets!
Yes this is the correct way or you could just copy your header and footer code to every .html file (if you don't like PHP)
Yes, this is the correct way. Try to think of the DRY principle - don't repeat yourself. Elements of your web page that are common across multiple pages can be coded once, then called in. If you need to update these elements, you update them once and it affects all pages.
You then "include" these elements into your page, and the elements are self contained files. As a basic example you would have header.php
<html>
<head><!-- all of your head meta tags in here--></head>
<body>
<div id="header"><!--your header elements and top menu in here --></div>
and footer.php:
<div id="footer"><!-- your footer elements in here--></div>
</body>
</html>
Don't forget in both header and footer files you can then put dynamic code if you wish. Then for each of your pages you would simply call these files in using include, include_once, require or require_once
<?php
include('header.php');
//this is where your actual page content goes
include('footer.php');
?>
A very basic example, but hopefully that makes sense to you.
Correct.
If you include another php file it will calculate/ask for input/do output (whatever you do in the file) as part of your main file.
If you include a php file that has a function you can later call this function without it showing in your main file. (Saves space in your main file)
So your 20 pages may only need a few lines of body text and the rest is header and footer. This will make changes very easy
I've finished designing my website home page and I've now moved on the some of the other pages, I want my header and footer to appear the same on every page. I've tried this basic way of linking the same stylesheet that makes up my header/footer in the second HTML file (already used in the homepage):
<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="header.css" type="text/css"/>
I now understand that this isn't going to work. Would a server-side scripting language be my best bet here? Something like PHP?
If so, would anyone be able to link me with an article on how I could do this in PHP, I presume with the
include
function?
Thanks.
You are currently only linking the css for the header and footer. If you want to include the html as the same, create two separate files header.php and footer.php, then include them into each webpage.
<?php include('path/to/header.php');?> // in the location you want the header in the page
<?php include('path/to/footer.php');?> // in the location you want the footer
Essentially, you're making partials and placing them wherever you want them
Suppose you have header that you want to include in all pages,
header.php
My header
now you can include it to other pages like this:
<?php
include "header.php";
?>
and do same for the footer!
Good luck!
Put the code for your header in a separate HTML file and then at the point in each page where you want it to appear use the following:
<?php include '../header.html'; ?>
Obviously put your own file path for the header file in there.
You have to create 2 others files : header.php & footer.php. Then you can include them in your others pages :
<?php
include "url/to/your/header.php";
include "url/to/your/footer.php";
?>
Example in a index.php :
<?php
include "views/header.php";
?>
// your content here html/php
<?php
include "views/footer.php";
?>
Create 2 files "header.html" and "footer.html" and include them at the top and the bottom of your php file.
<?php include("YourFile.html"); ?>
This would be the most basic PHP templating engine:
<?php include 'header.html'; ?>
---HTML content
<?php include 'footer.html'; ?>
Create a file called header.php and place the header content within that file. Then create another file called footer.php and place all your footer content in it.
You then include them on all your pages individually like so:
<?php include('header.php'); ?>
//content of that page here
<?php include('footer.php'); ?>
You could also use polymer. Download the polymer code (javascript) and include other files this way:
<link rel="import" href="my-custom-element.html">
https://www.polymer-project.org/platform/html-imports.html
It's the latest way to work with future web applications. No need to mess with server side language when you can just focus on the HTML alone.
I would like to reference JavaScript files from my root folder in a WordPress PHP file, however when I load the page, the JavaScript is being ignored. Is there a WordPress restriction on referencing .js files? Am I not correctly referencing JavaScript for PHP?
This is what I wrote (which does not work):
<?php wp_footer(); ?>
<script src="/files/js/jquery.js" type="text/javascript"></script>
<script src="/files/js/jquery.cycle.js" type="text/javascript"></script>
</body>
</html>
For jQuery I use this technique Loading The Latest Version of jQuery in WordPress
Basically you use wp_enqueue_script function in functions.php.
For scripts where I want to simply add them in the template files and don't want to bother with wp_enqueue_script, I put them in scripts folder that was created in the theme folder. I add All custom added .js scripts there.
Then in the template file I use the code like this:
<script type="text/javascript" src="<?=get_template_directory_uri();?>/scripts/markers.js"></script>
Wordpress has its own method to add js or css files.
<?php
function my_scripts_loader() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>
Put your files folder to your wordpress theme which you are curently useing after that just need to
include the path on header.php file like
<script src="<?php bloginfo('template_directory'); ?>/files/js/jquery-min.js" type="text/javascript"></script>
hope this will help you ....
WordPress got a various number of ways to include file, I myself have worked with WordPress in the early days, back then I had to call the path with a WordPress function.
Example: <script src="<?php echo bloginfo('template_directory'); ?>/files/js/jquery.js" type="text/javascript"></script> //add echo
You might want to var_dump the bloginfo('template_directory') and work your way from there.
I know we can get some path with <?php bloginfo('something');?> into php files, but is it some equivalent for javascript file loaded with the enqueue_script function ?
Did wordpress change some shortcode into those files ?
EDIT : I think I did not clearly express my needs. So i want to know if wordpress had some shortcode who, placed into a js file who is loaded with the enqueue method, will be replaced by the template path. Typically i need to make some ajax call form a .php file from my template and want to avoid hard linking file
No javascript files won't be parsed as php, and as such won't process any shortcodes or php.
Why not just make your links relative. Often I find subdomaining my dev copy, removes any problems when moving a site live and broken links.
You could cheat and link to a php file, which then passes header information as Javascript. Doesn't seem very elegant though. See here.
Or you could just declare the variable in a little bit of inline Javascript and pick it up in the external JS file.
<script type="text/javascript">
var siteURL= '<?php bloginfo('url');?>';
</script>
<script type="text/javascript" src="yourscript.js"></script>
Then in yourscript.js just reference the variable 'siteURL'
You have to register scripts using wp_register_script(). Then by placing wp_enqueue_script before wp_head() it will load them in for you. The idea of using wp_enqueue_script is that you don't need to enter them all in manually, and you can load other scripts depending on whether a certain script has been loaded.