I have an Author page on my Wordpress site (author.php). The problem though is that when im visiting the author page, Wordpress highlights the blog menu item. I want to have another menu item as parent. How do I go about it? I dont want to use no JS/jQuery for this.
Thanks
It's not clear that how your author page url looks like. In general its like site url/author/"author name".
If your site has a single author then you can add the author page link as a custom menu item .
Or you can use jQuery function to search "author" in your url and add active class in desired menu item
<script type="text/javascript">
$(document).ready(function () {
if(if(window.location.href.indexOf("author") > -1))
{
$("#author_menu").addClass('active');
}
});
</script>
Not the cleanest solution, but I use something like this for a few instances of current page menu highlighting for pages that aren't child/parent related in any way:
<?php if (is_author()) { ?>
<script type="text/javascript">
jQuery(function($) {
$(document).ready(function() {
$('#menu-main-menu li.menu-item-"**about_us_page_class**"').addClass('current-menu-item');
}); });
</script>
<?php } ?>
Related
If a menu is selected I want the webpage to be scrolled down to the end of a page in wordpress.
How do I set that?
Thanks in advance.
First we need to create our custom links through WordPress menu :
Go to Menu and add custom link with url # and with whatever text you want.
Then click screen option to tick the CSS Class Option
From the new element which we created in the firs step click the arrow on the right side and in the CSS Classes add down
Now you should have custom link in your menu with custom class same like pic below:
now we need to add our Javascript code to WordPress Footer.
open your theme child functions.php and add the following code.
function scrolldown()
{
?>
<script>
jQuery(document).ready(function ($) {
$(".down").click(function() {
$('html, body').animate({
scrollTop: $("footer").offset().top
}, 1500);
});
});
</script>
<?php
}
add_action('wp_footer', 'scrolldown');
That's it :)
A Simple jQuery Plugin for Animating Scroll,See this page
animatescroll
I have a Wordpress page that uses Disqus comments. At the bottom of the page I have this:
<!-- DISQUS COMMENTs -->
<div id="comments">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
var disqus_config = function () {
this.page.url = '<?php the_permalink(); ?>'; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = '<?php the_ID(); ?>'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://example.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
<!-- /#comments -->
and in my page I display how many comments have been made on the current post like so:
0 Comments
The trouble is, it's not working. The comments always appear as zero even though there are comments on the page. And I think I know why this happens, but I'm not sure how to property resolve it.
So:
My 'comments' anchor renders like so:
0 Comments
And in my JavaScript code at the bottom, the page URL gets set correctly like so:
this.page.url = 'https://www.example.com/blog/my-post-name'
However if I post a comment and log in to my Disqus control panel and hover over the post URL, the URL format is like so:
https://www.example.com/blog/?p=232
So it seems like the Disqus JavaScript is reading the URL of the page before the URL has been rewritten! Does that make sense?
A potential way to resolve it is to make my comments anchor render like so:
0 Comments
But that feels a bit hacky. Any ideas anyone?
Thanks!
UPDATE
I can confirm that rendering my comments anchor like so will work:
0 Comments
However this is more of a workaround. How can I make Disqus store my rewritten (cleaner looking) URLs instead of the Wordpress 'Plain' (and ugly) URL?
function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>'; }
Use this code
<?php disqus_embed('myexampleblog'); ?>//replace myexampleblog with your blog or site name register on disqus.
anywhere you want in your single.php and page.php files to embed and show Disqus comments for that page.
I've hunted high and low how to move reviews tab and bring it below product description.
How can this be done with CSS or plugin?
And reviews will be shown 25 at once with read more button that opens another 25 reviews.
Woocommerce uses jQuery (Javascript) to put reviews and content descriptions in separate tabs.
In this tutorial I use Javascript to put wordpress comments below the content after page loading has finished. For this do fast as I did in my wordpress sample page.
Go to header.php file in your themes, edit <body> tag to include <body> tag onload="myFunctiondf()" then it looks like below :
<body onload="myFunctiondf()">
or if you have class in your theme looks like this :
<body <?php body_class(); ?> onload="myFunctiondf()">
Now go to footer.php, include this code before </body> which looks like this:
<script>
function myFunctiondf() {
document.getElementById("tab-reviews").style.display="block";
document.getElementById("tab-description").style.display="block";
document.getElementById("tab-title-reviews").style.display="none";
document.getElementById("tab-title-description").style.display="none";
}
</script>
</body>
Congratulation from now your product pages works as mine.
The following link from the WooCommerce docs should help you: https://docs.woocommerce.com/document/editing-product-data-tabs/
Re-ordering Tabs:
add_filter( 'woocommerce_product_tabs', 'woo_reorder_tabs', 98 );
function woo_reorder_tabs( $tabs ) {
$tabs['reviews']['priority'] = 5; // Reviews first
$tabs['description']['priority'] = 10; // Description second
$tabs['additional_information']['priority'] = 15; // Additional information third
return $tabs;
}
I'm using wordpress for a website. If any users visits the page X from my website I want to redirect them to another site after 30 seconds.
Any idea on how to do this?
Add this javascript to your footer:
window.setInterval(yourfunction, 10000); //100 seconds
function yourfunction() { window.location = "http://www.yoururl.com"; }
In your header.php add this code inside the head tag section
<head>
<!-- your other meta element -->
<meta http-equiv="refresh" content="30;URL='http://example.com/'">
</head>
With a mix of both answer before I start looking at wordpress functions docs. I found something and add it to my header.php on my wordpress site.
<?php if ( is_page('Page Title') ) { ?>
<script type="text/javascript">
window.setInterval(customRedirect, 3000);
function customRedirect() {
window.location = "http://www.google.com";
}
</script>
<?php } >
So whenever the user enters a page with that title it will make the redirect. Thanks.
useful I found the code snippet from Camilo caused the site to fall over so I changed the last line from:
<?php }>
to:
<?php }; ?>
and now it works.
I'm looking for a WP function that add the Read-only parameter to all Pages's Titles's input, that will make the Page's title unalterable.
Thanks a lot in advance.
This can be accomplished with some simple JavaScript/jQuery. Create a file called admin_title_disable.js, and queue it up within functions.php. For example:
functions.php:
wp_register_script('admin_title_disable', '/path/to/admin_title_disable.js');
function disableAdminTitle () {
wp_enqueue_script('admin_title_disable');
}
add_action('admin_enqueue_scripts', 'disableAdminTitle');
Now, in your js file:
jQuery(document).ready(function ($) {
$('#title').attr('disabled','disabled');
});
This will set both post and page title input fields with a disabled attribute. Hope this helps!
If you want to restrict this script to a particular admin page, wrap the add_action hook in a conditional that compares $_GET['page']. You can also take advantage of the $hook parameter that is available when using admin_enqueue_scripts to check for the page. See here.
Update::
WordPress makes it a little tricky to tell between post and page edit screens, but there is a hidden input that you can take advantage of. :) Here's an updated version of the jQuery that will only run on page edit screens:
jQuery(document).ready(function ($) {
//find the hidden post type input, and grab the value
if($('#post_type').val() === 'page'){
$('#title').attr('disabled','disabled');
}
});
No need to make a seperate js file. Adding this to your function.php will do the same that Matthew showed.
function admin_footer_hook(){
?>
<script type="text/javascript">
if(jQuery('#post_type').val() === 'post'){
jQuery('#title').prop('disabled', true);
}
</script>
<?php
}
add_action( 'admin_footer-post.php', 'admin_footer_hook' );
This Solution Will disable clicking on the post title and editing it using CSS. CSS targets post type "page" only. It has been tested on Gutenberg visual editor. Users Can still edit title from "Quick Edit".
Add this code to your functions.php file.
function disable_title_edit() {
if(!current_user_can('administrator')){
if( !current_user_can('administrator')){ ////Only allow Admin
echo '<style>.post-type-page .edit-post-visual-editor__post-title-wrapper{
pointer-events: none;
}</style>'; } }
}
add_action('admin_head', 'disable_title_edit', 100);