So I want to add placeholder text to the Username and Password fields on the standard wp-login.php page - I don't want to edit the actual wp-login.php page because every time WordPress is updated my amends will just be wiped.
So! In functions.php I've added a simple function to add a .js file (and some css files but I don't think that's important for this) to the wp-login.php page where I have this code - here is my function in functions.php
function my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="/shared-assets/css/main-screen-styles.css" />';
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/css/campsite-finder-screen-styles.css" />';
echo '<script type="text/javascript" href="/shared-assets/js/test.js">
</script>';
}
add_action('login_head', 'my_custom_login');
And here is my js file
jQuery(document).ready(function(){
jQuery('#user_login').attr('placeholder', 'Name');
jQuery('#user_email').attr('placeholder', 'Email');
jQuery('#user_pass').attr('placeholder', 'Password');
});
And this is where I get stuck .. in my mind that should work, I've checked the IDs and they all seem to line up but I'm clearly doing something wrong, you can see the page here http://www.camp-site-finder.com/wp-login.php
If you view the source you can see the link to my .js file and I'm referencing jQuery so errmm, have I done something stupid along the way or is there a better way of doing this?
If anyone can point me in the right direction on this one I'd be very grateful
N
you didn't include .JS file in <script src="something.js"> . you have included it in <link rel=stylesheet > tag that's the problem i have found in your page
Related
How do I create an external file for my side menu?
<a class="active" href="C.html" style="font-size: 1.1em;font-weight: 900;">C Programming</a>
C++
C#
Go
Java
JavaScript
PHP
Python
Ruby
Swift
Currently I have these kind of links in every file and the code is just getting too much. Is there a way to create an external file for the menu items?
I tried this but the problem is class="active". I want to highlight a menu item when my menu item is in index.php
I Know how to achieve this when my menu is in each individual HTML file but how do I do that when it's in external PHP file ?
Index.php
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/Tags.css">
<link rel="stylesheet" type="text/css" href="CSS/Nav.css">
<link rel="stylesheet" type="text/css" href="CSS/Card.css">
<link rel="stylesheet" type="text/css" href="CSS/Buttons.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="sidenav">
<h1> Others</h1>
MS Excel
MS PowerPoint
MS Word
WordPress
</div>
</body>
</html>
Main file
<?php include('index.html'); ?>
You should NOT use javascript to include your menu .
you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
or you can use pre processors like Gulp :
##include('./template/header.html')
var fileinclude = require('gulp-file-include'),
gulp = require('gulp');
gulp.task('fileinclude', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
prefix: '##',
basepath: '#file'
}))
.pipe(gulp.dest('./'));
});
or Pug or Grunt and ......
About your problem in comments . lets say you are in your main folder and you have this 3 files :
index.php
header.html
homepage.html
footer.html
index.php should be like this :
<?php
include('header.html');
include('hompage.html');
include('footer.html');
?>
and then in your browsers you should open index.php .
** don't use index.html and index.php in the same time .
if it didn't work . you should get error in your index.php file .
when your code works . i suggest you to use readfile() instead of include . if your another files are just html and not have any php codes in it .
As pointed out by Abolfazl Ghaemi :
You should NOT use javascript to include your menu . you can use PHP to simply include your menu ( but i sugget header ) file to your page :
<?php include('/template/header.html'); ?>
The Gulp/Grunt solution is fine but I'll stick with the <?php include(); ?> solution for your problem.
Does the hosting machine speak PHP ?
If browsers can read HTML just fine to give you a webpage, they can't read PHP. Instead, PHP need to be executed by something on the hosting machine and you will need a PHP interpreter for that like Apache.
If you didn't already, I strongly recommend you to install it or even a full AMP stack.
PHP in HTML files won't work
You need to make sure your file using PHP instructions are .php files. Otherwise, the code in your <?php ?> tag (the PHP code) won't be interpreted at all.
Make sure your main file is a .php file.
Are you calling the correct file ?
Also, you need to be sure the file name you are including is correct. The content as shown in your question is
Main file
<?php include('index.html'); ?>
but your file is actually index.php not index.html.
HTML is prettier with CSS
If you want to "highlight" the item with active class, you will need CSS. You can quickly add CSS in your file with a <style> tag. See the example below.
<ul>
<li>Not highlighted</li>
<li>Still not highlighted</li>
<li class="active">Highlighted ! Spotlight's on me baby !</li>
<li>Not highlighted</li>
</ul>
<style>
.active {
color: red;
font-weight: bold;
}
</style>
I want my users to be able to click a button on the front-end of my website, and be redirected to my page-login.php.
I'm pretty much doing it, but I'm missing some things, because it doesn't load my CSS or JS files. Even though if I set that page into my main page, it will load everything alright.
This is the error message:
GET http://localhost/projeto/index.php/favicon.ico 404 (Not Found).
This happens to CSS, JS files, images, etc.
First of all:
I think that I need to insert my controller and view on the routes page, am I right? If so, how?
The way I call my Controller is messing up the way the page appears. What's the right way?
This is my code:
Main page HTML:
href="index.php/login_controller"
login_controller:
public function index (){
$this->load->view('Main/page_login');
}
So, what am I missing? Is anything that I said true?
Find the config.php file in the /application/config folder. Edit this file and find:
$config['base_url'] =
You should add here correct path. In your current situation you have to add: http://localhost/projeto/
so this line must be:
$config['base_url'] = 'http://localhost/projeto/';
You should include the URL helper into your autoload configuration. /application/config/autoload.php add 'url' into $autoload['helper'] array:
$autoload['helper'] = array( 'url');
after that you can refer your CSS, img, JS and other files with base_url() function. For example:
<link rel="shortcut icon" type="image/png" href="<?php echo base_url();?>/favicon.png"/>
or
<link rel="stylesheet" href="<?php echo base_url('favicon.png');?>" type="text/css" />
redirect(base_url() . 'login_controller/index', 'refresh');
I have a small problem with importing links. Once I started using pretty URL directories stops working. What can I do ?
Screenshots:
Before
After
Make your css and js links dynamic.
For example:
<?php define( 'SCRIPT_ROOT', 'http://'.$_SERVER['HTTP_HOST'].'/' );?>
<link href="<?php echo SCRIPT_ROOT ?>site/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" media="all">
After this doesnt matter your directory structure.
I made a web application which allow the user to create an image dynamically in JavaScript.
It use jQuery to allow the user to place div, resize them and drag them into a <div> Container.
When the user finished to place all div, he can press the "Generate" button which send the <div> Container outerHTML code into a local database.
Then the user can use another script, in php, and past in parameter the id in the database of which render he want to display, then the php script create a page using the code in the database.
My problem is now I want to take the code of this generated html page, then convert it into a png image.
I looked at some other posts and found something interesting : Phantom.js
But what I tried doesn't seem to work. Here is my code :
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<script>
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
</script>
</body>
</html>
So we have the database with the div outerHTML code contained at the id '0'.
"affichage.php" take in parameter a variable "afficheur" then it ask the database to get the code from this variable. For example, afficheur=0 will return the div code contained in the database at the id=0.
When I go to "http://10.237.35.10/maxime/affichage.php?afficheur=0" I have a html page with the render I want. But when I try to run the script I'd posted higher, I haven't any "affichageTest.png" rendered in my folder.
What do I have to do? Do I have to import anything else to run Phantom.js? Or maybe I need to add something to my code?
PhantomJS is a binary not a javascript librarie (it is actually a headless webkit), I can not test it here atm, but here the main idea :
First download the PhantomJS binary, upload it somewhere and make it executable (chmod +x).
Create a file named test.js with this code below :
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
Create a file named display.php with this code below :
<?php
$file_path = exec('/path/to/phantomjs test.js');
?>
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<img src="<?php $file_path ?>" alt="test">
</body>
</html>
Visit the display.php page to see the screen capture
If you need a full script solution, as you have said in comments, your only hope is Image Magic php extension. This in conjunction with HTML2PDF can be used to device html to image conversion for non-complex markup.
The trick is to create a pdf out of html first:
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');
Now you can get this pdf file and convert it image using Image Magic
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();
Installation of Image Magic extensions and support libraries could be painstaking. Please read the installation notes carefully.
The complexity of the html markup which could be converted is limited. You can do a fairly good job. But you can't call it a day if you need to convert ANY html.
I wanna start by saying that I have absolutely NO knowledge in JS ( which I think I'm gonna learn because I'm over-heating like never before ).
I'm making a website for a friend , and I wanted to add a little more stylish that just plain CSS3 & HTML, So I went on Google and did a little research and I downloaded a free usable jQuery plugin called "Simple Modal".
I want to display a PHP variables inside that Modal.
Here's a screenshot of it:
And here is the minimum required to make the plugin work properly on any page:
> <link rel="stylesheet" href="simplemodal.css" type="text/css"
> media="screen" title="no title" charset="utf-8">
> <script src="assets/javascript/mootools-more-1.3.1.1.js" type="text/javascript charset="utf-8"></script>
> <script src="/js/simple-modal.js" type="text/javascript" charset="utf-8"></script>
> <script src="assets/javascript/demo.js" type="text/javascript" charset="utf-8"> </script>
Now here comes the problem. The content of the Modal is in -> simple-modal.js in the following form:
$("modal").addEvent("click", function(e){
e.stop();
var SM = new SimpleModal({"btn_ok":"Confirm button"});
// Confirm Button
SM.addButton("Confirm", "btn primary", function(){
alert("Action confirm modal");
this.hide();
});
// Cancel button
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal",
"title":"Modal Window Title",
"contents":"<p >Hey , how you doing? Nice weather today!</p>"
});
})
In order to edit the content that is displayed , i need to edit the "contents".
I tried to put my PHP variable in it .. It didn't worked .. Googled it... And I found a solution. Which is putting a JS variable and then, PHP one on the main page.
<?php $content = $user['username']; ?>
<script type="text/javascript"> var name = "<?= $content ?>"; </script>
So after my new found , I tried to do this:
"contents":"<p>Hey" + name + ", how you doing? Nice weather today!</p>"
Didn't work. I then, tried (To see , maybe the variable was the problem ):
"contents": name
And this time it worked. It seems , for an unknown reason to me, that I can't 'combine' 2 things(? if that's a proper way to name them all).
I even tried things such as "Good" + "Morning" but I got the same result.
I'm very confused on why is that.
So, if anybody could be of any help by explaining me why this is happening, how to fix it or at least give a precise path for researches, I would be very graceful.
Thank you.
<?php $content = $user['username']; ?>
<script type="text/javascript">
var name = "<?= $content ?>";
var fullcontent = "<p>Hey" + name + ", how you doing? Nice weather today!</p>";
</script>
and here it will be
"contents":fullcontent
Where as for the modal you can try EXTJS its quite efficient and easy to use.