Wordpress - Identifying Page Name - javascript

Have implemented a site in wordpress with 5 static pages besides the usual blog pages that are accesible through the nav menu. Now each of the page has its own jquery animations.
Since I want to write the animations code for all pages in a single file I want to get the page name in javascript and then switch to the proper animation function for that page. How to do this?

If you have access to your Wordpress template, you may output the current page's ID with the the_ID() template function: http://codex.wordpress.org/Function_Reference/the_ID
If you put this in your <head>, you could access the page ID in JavaScript afterwards:
<script>
var pageId = <?php the_ID(); ?>;
</script>
An alternative: The default theme Twenty Ten assigns a class "page-id-xx" to the <body> element by default. If your current theme does something similar, you could look for this class like this:
if ($('body').hasClass('page-id-xx')) { ... }

Use alert( document.URL ); it will tell you current url . and according to ypur requirement you can made changes.
see here

Related

Wordpress how to modify <body> tag of a page by adding extra html attributes

In wordpress is there a way to set the body tag attribute on a Page like this :
<body onBlur="window.focus()">
WP Block editor does not allow editing the page html, because it is visual editor of course.
I would use this code so I can make a popup window stay always on top.
BTW I solved the problem how to popup the window, just dont know how to make it stay on top
how to create Popup window
If there is other way let me know.
thanks #ruvee
Wrote step by step instruction here: update body tag
There is a hook you could use called wp_footer. You could add extra attributes to your body tag using pure/vanilla javascript like this:
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
Code goes into the functions.php file of your active theme.
This answer has been tested on wordpress 5.8 and works.
Running it on a specific page:
Depending on which page you would need to run it on, you could use different conditional statements. For example:
Only on archive pages:
is_archive() would be a proper conditional check
Only on the index of your blog:
is_home() would be a conditional check.
Only on front page that may or may not be your blog index:
is_front_page() would be a conditional check
etc...
UPDATE (related to the second request that was not part of the first question)
If you have a page with a slug of blah and you want to modify its body tag, you could use the following snippet:
# The following code would only get executed on yourwebsite.com/blah
add_action("wp_footer", "your_theme_adding_extra_attributes");
function your_theme_adding_extra_attributes(){
if(is_page("blah")){ ?>
<script>
let body = document.getElementsByTagName("body");
body[0].setAttribute("onBlur", "window.focus()");
</script>
<?php }
}
is_pageDocs
For people who would need to add an extra class NOT an extra attributes, there is a hook called body_class and there are too many answers already on Stackoverflow, such as:
Add a custom class name to Wordpress body tag?
body class in WooCommerce
You could hook into the body class filter and do a echo for your attribute, not how filters are meant to work but it gets the job done without js.
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
echo 'onBlur="window.focus()"';
return $classes;
}
I noticed from your comments that you would also like to limit to specific pages.
Lets say you want to to happen only on front page.
Youll need to add a if condition for front page, like this
add_filter('body_class', 'bt_add_attr_to_body');
function bt_add_attr_to_body ($classes) {
if (is_front_page()) echo 'onBlur="window.focus()"';
return $classes;
}
Based on where you want this attribute to appeare, you will need to create the appropriate condition.

I want to change the href link of logo in wordpress website

I have use roccochoco theme in wordpress and now i want to change the url of logo that other than the home page.
i tried this code but that doesn't work
$(document).ready(function(){ $("a.custom-logo-link").attr("href", "https://"); });
please help me out and thanks in advance
In Wordpress using jQuery with $ often doesn't work, because it is used internally. The console might show you a warning saying "$ is not a function". You can put it inside of a function to make it work. Your element is selected by class, so the name of the class is enough.
( function( $ ) {
$(".custom-logo-link").attr("href", "https://www.newurl.com");
}( jQuery ) );
Another way to achieve it without using Javascript would be to edit the header.php file of your theme. If you want to keep your theme updatable, you should create a child theme (it is done in one minute with creating an empty folder and putting a style.css with some info in), copy the header.php of your parent theme in the folder and delete the part in the <a> tag, looking like get_home_url() .
After the DOM is loaded, we can set the href of the anchor having custom-logo-link class to point to the URL you prefer:
jQuery(document).ready(function(){
jQuery("a.custom-logo-link").attr("href", "https://www.domainname.com");
});

How do you make a header on an HTML page based on user input from a previous page?

I am very new to HTML, css, jQuery, javascript, etc. and on a website I am making, I want to take the user's input and make that the header of another page of my website. I don't understand how to transfer that information from one HTML page to another.
Use local storage .
To set:
var UserInput=$('#txtBoxID').val();
localStorage.setItem(yourkey,UserInput);
To get the value on other page:
var header = localStorage.getItem(yourkey);
$('#YourHeaderHtmlID').val(header );
Note that you all do this inside document ready.
$(function() {
});
you can write a javacript function to set cookie with the header name before moving to the next page
if it is anchor tag
<a href="nextpage.html" onclick="setHeaderName()"/>
In the next page, you can get the cookie using script and call funciton inside the title
<head><title><script>callCookieHeaderValue()</script></title></head>
callCookieHeaderValue() is the function you can write to return the cookie value

Joomla - can't embed custom javascript

I have Joomla 1.5
I have found a plugin for form styling, the "jqtransform"
I have an article that imports a 'myform.php' page that connects to an external database
I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:
add link for the css in the header of joomla's index.php
add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
add the class jqtransform in form tag of the myform.php (rquired by the plugin)
at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:
$(function() {
//find all form with class jqtransform and apply the plugin
console.log("foo");
$("form.jqtransform").jqTransform(); });
(needed for the plugin)
The problem is that the plugin doesn't work.
I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });
The first bookmark works ok (the browser halts).
The second bookmark doesn't do anything. That means the browser doesn't get inside the function.
The console log doesn't show anything.
Anyone has any idea??
The issue is JQuery Conflict.
You should use var jq = jQuery.noConflict();
Just above the script and use jq instead of $ symbol.
like:
jq = jQuery.noConflict();
jq(function(){});
jq("form.jqtransform").jqTransform(); });
something like that.
Also you can add script from myform.php don't need to edit index.php for this kind of use.
Like a page required some js and css don't load it in the index.php
It will load everytime so speed will reduce.
For a component or module or specific page you can use joomla's default document factory.
Like:
$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');
Hope this will help you friend..
This method requires no editing to the template files.
Simply use a Custom HTML Module and Publish it in position
<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
jQuery("form.jqtransform").jqTransform();
});
</script>

How to Detect if On Homepage to hide a button

If I have a static HTML homepage, is there a way of embedding some Javascript to see if I am on the home page? What I want to do is if a user is not on the homepage, display a "home" button on my navigation bar. So once I know if he's on the homepage I can use an if-else statement. Not familiar on how to do this in Javascript. I would do this in PHP, but due to restrictions on the project, I am not allowed to use PHP. This site is pure HTML pages.
The reason I need Javascript to detect the page, is because all of the pages, including the homepage are to be the same template (again, not my decision). If it wasn't for this I could create a template for every page but homepage. So that leaves me with the problem.
My current thought is to use something like this:
<script type="text/javascript">
var sPath = window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
if(sPage != "index.html"){
$turnonhomelink=true;
}
else{
$turnonhomelink=false;
}
</script>
And then for the link:
<script type="text/javascript">
if ($turnonhomelink==true){
echo '<li>Home</li>';
}
else{
//echo nada
}
</script>
Besides the normal "this won't work if Javascript isn't on", is there anything I am missing?
The line I am most concerned about is this: if(sPage != "index.html")
Important to note is that this site is only 1 layer deep link-wise (all HTML pages in one directory), but is this the proper way of comparing strings in Javascript?
May i suggest that absolutly no javascriptr is required to achieve this. There are plenty of ways to do this with just css. Especially if you are on a static html page. The easy way would be to add a id to your body tag to indicate you are on the hompegae. Then add some css to make the home button invisble when on this page. Somethiong like this:
HTML:
<body id="homepage">
...
<li id='home-button'>
<a href='/index.htm'>Home</a>
</li>
...
CSS:
#homepage #home-button {
display: none;
}
This way the visistors with js disabled get the same experience as the normal visitors...
this should be fine. Also at what point in the html , would you make this check is important (for the url to contain "index.html") normally you can create a function doAfterLoad() and put a call to doAfterLoad() that can check for the url substring and then accordingly show/hide the homepage link. you can use html body onLoad event also.
ps: you dont need to follow $ prefix to a var in js even though its a valid var name:
$turnonhomelink==true

Categories

Resources