Iv been able to add a quick-tag button that adds [spoiler][/spoiler] to my wp comment section but now I need to hide / show the text inside.
I was provided with the following code to add into my themes function.php but it doesn't look like the code is being executed because the page output is still test [spoiler]hint[/spoiler] and not test View Spoiler>>
`// jQuery Spoiler Function`
function add_spoilers() {
echo '
<script type="text/javascript">
$(document).ready(function() {
$("span.spoiler").hide();
$(\'<a class="reveal">View Spoiler ยป</a> \').insertBefore(\'.spoiler\');
$("a.reveal").click(function(){
$(this).parents("p").children("span.spoiler").fadeIn(100);
$(this).parents("p").children("a.reveal").fadeOut(100);
});
});
</script>
<style>
/* If you want you can add custom CSS here for the spoilers! Below is what I use on my blog. */
a.reveal:hover { cursor:pointer; }
span.spoiler { background-color:#FCE586; }
</style>
';
}
add_action('wp_head', 'add_spoilers');
// Spoiler Shortcode
function spoiler_shortcode( $atts, $content = null ) {
$output = '<span class="spoiler">';
$output .= do_shortcode($content);
$output .= '</span>';
return $output;
}
add_shortcode('spoiler', 'spoiler_shortcode');`
Related
enter image description hereI am currently working on a project where my script adds the schema codex into the navigation. The jQuery code does work.
However, when I add the link for ajax.googleapis.com it break all other Divi style scripts. I would be grateful for any help! Please view my coding below. I have this in a child theme and the code is stored in a functions.php file.
The theme builder I am working with is Div.
<?php
function load_js()
{
if(!is_admin())
{
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>';
echo '<script type="text/javascript">
jQuery( document ).ready(function(){
// Put itemscope and itemtype into navigation ul
$("nav ul").attr("itemscope", "").attr("itemtype", "http://www.schema.org/SiteNavigationElement");
// put itemprop in lis
$("nav ul li").attr("itemprop", "name");
//put itemprop url in anchors
$("nav ul li a").attr("itemprop", "url");
});
</script>';
}
}
add_action( 'wp_footer', 'load_js');
After think on it and working on some other projects, I have accomplished and fixed the problem.
The issue was that the script to pull in the ajax jquery library was being loaded into the and not the . So I made some simple changes you can view below to see the fix.
<?php
function load_js()
{
if(!is_admin())
{
echo '<script type="text/javascript">
$( document ).ready(function(){
// Put itemscope and itemtype into navigation ul
$("nav ul").attr("itemscope", "").attr("itemtype", "http://www.schema.org/SiteNavigationElement");
// put itemprop in lis
$("nav ul li").attr("itemprop", "name");
//put itemprop url in anchors
$("nav ul li a").attr("itemprop", "url");
});
</script>';
}
}
add_action( 'wp_footer', 'load_js');
// load ajax jquery for schema nav
function ajax_jquery()
{
if(!is_admin())
{
echo '<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>';
}
}
add_action( 'et_head_meta', 'ajax_jquery');
Thanks everyone for your help!
I have a custom post type archive page where I'd like to execute a specific script for the page. The script is loaded in the page with this function (in function.php):
function cpt_archive_enqueue_script() {
if (is_post_type_archive('cpt-slug')) {
wp_enqueue_script( 'cpt-archive-script', get_stylesheet_directory_uri() . '/js/cpt-archive-script.js', array( 'jquery' ), '1.0.0', true );
};
}
add_action ('wp_enqueue_scripts', 'cpt_archive_enqueue_script');
As I can see with page inspector, the page loads the script but the loaded script is not executed ( the same script work f.e. if loaded in a category page).
Have anyone a suggestion to fix this? Thanks!
If can help here is the loaded script (it is a really simple script that opens the article content if the title is clicked).
jQuery(document).ready(function($) {
$('article.post').each(function() {
var $dropdown = $(this);
$("div.entry-title", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.entry-content", $dropdown);
$div.toggle();
$("div.entry-content").not($div).hide();
return false;
});
});
$('html').click(function(){
$("div.entry-content").hide();
});
});
Try with below code it must be work on each page.
add_action('wp_head','callfunctioneverywhere');
function callfunctioneverywhere()
{
echo '<script defer src="'.get_stylesheet_directory_uri() .'/js/cpt-archive-script.js" ></script>';
}
Here is the whole code:
jQuery(document).ready(function($) {
$('article.post').each(function() {
var $dropdown = $(this);
$("div.entry-title", $dropdown).click(function(e) {
e.preventDefault();
$div = $("div.entry-content", $dropdown);
$div.toggle("blind", 300);
$("div.entry-content").not($div).hide("blind", { direction: "up" }, "300");
return false;
});
});
$('html').click(function(){
$("div.entry-content").hide("blind", { direction: "up" }, "300");
});
});
.hide {display: none;}
<?php
//* add custom classes
add_filter( 'body_class', 'journal' );
function journal ( $classes ) {
$classes[] = 'journal';
return $classes;
}
//* Remove the link from each post title
add_filter( 'genesis_post_title_output', 'elimina_link_titolo', 15 );
function elimina_link_titolo( $title ) {
$title = sprintf( '<div class="entry-title five-sixth mostra">%s</div> ', apply_filters( 'genesis_post_title_text', get_the_title() ) );
return $title;
}
//* Add the 'hide' class ( .hide {display: none;} )to not show the content that will appear by clicking on title
add_filter ('genesis_attr_entry-content', '\margine_sx_un_terzo');
function margine_sx_un_terzo ( array $attributes ) {
$attributes['class'] .= ' hide';
return $attributes;
}
genesis();
I've managed to make the Jquery UI accordion work on the front page of my Wordpress website.
Problem is, instead of opening and closing the divs when I click on the headings, the effect happens when I click on random sections of the text, like clicking in the middle of a paragraph.
I'd like to make it so that if I click on a header (h2 or h3, etc.) it opens the section beneath the header. Right now, it seems to work when I click in the middle of paragraph, or sometimes it works when I click on a header but then it doesn't work when I click on the header the next time... I'm totally confused.
I always thought that it automatically worked with headers (similar to the accordion plug-in I have on another site). I can't find any info online that clears this up for me.
Here's my accordion script:
$(function() {
$( "#accordion" ).accordion({
});
});
The PHP code below shows the div I want the accordion to act on. You see, I'm pulling content into my front page from another page in Wordpress. Note the "accordion" div in there...
<section id="faq">
<div class="indent">
<?php
$query = new WP_Query( 'pagename=faq' );
// The Loop
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
echo '<div class="entry-content">';
echo '<div id="accordion">'; //This the div that should be affected...
the_content();
echo '</div>';
echo '</div>';
}
}
/* Restore original Post Data */
wp_reset_postdata();
?>
</div>
</section>
Could the problem have something to do with fact that I'm pulling in content from another page?
BTW, I also have a couple of other scripts running in the same JS file as the accordion script, but I commented those out and the problem remained.
Here's how the whole JS file looks, just in case you'd like to see:
jQuery(document).ready(function($) {
/* Stick navigation to the top of the page */
var stickyNavTop = $('.main-navigation').offset().top;
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.main-navigation').addClass('sticky-header');
$('.site-header').addClass('shifted');
} else {
$('.main-navigation').removeClass('sticky-header');
$('.site-header').removeClass('shifted');
}
});
/* Scroll to specific section on front page */
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 50)
}, 1000);
return false;
}
}
});
});
/* Accordion effect */
$(function() {
$( "#accordion" ).accordion({
});
});
}); /* Ends the jquery declaration */
Your code is printing several #accordion divs, when it should be only one wrapping all the accordion items. It should be like:
if ( $query->have_posts() ) {
echo '<div id="accordion">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<h3>'.get_the_title().'</h3>';
echo '<div class="entry-content">';
the_content();
echo '</div>';
}
echo '</div>';
}
That way you will have a code similar to the presented in the docs: one #accordion wrapping the items, the <h3> as titles and the <div> as the contents.
I solved the problem by wrapping the entire body of the page in the "accordion" div (leaving out just the header and the footer), and then making the script work on just H6 headers.
Thanks!
I'm building a custom WordPress theme and have a quick question regarding WordPress and the Functions.php
I've got 500 lines of jQuery that run for a portion of my custom theme admin panel. The jQuery code is located inside of my functions.php file, called when the custom admin menu page is displayed.
Ideally, I would like to move the JavaScript out of the functions.php file and use wp_register_script + wp_enqueue_script, but I also have some php code mixed in with the script. See below:
//Function that Provides Options within the Menu Page
function quz_custom_theme_options(){
global $quz_default_colors, $quz_default_fonts;
?>
<style type="text/css">';
<?php include('admin-style.php'); ?>
</style>';
<script type="text/javascript">
function asf_toggle_box(element)
{
if (jQuery(element).next('.expandable').is(':visible') )
{
jQuery(element).next('.expandable').fadeOut('slow', function(){
jQuery(element).val('+ Settings');
jQuery(element).next('.expandable').find('.indicator').val('');
});
} else {
jQuery(element).next('.expandable').fadeIn('slow', function(){
jQuery(element).val('- Settings');
jQuery(element).next('.expandable').find('.indicator').val('visible');
});
}
}
Example of PHP inside of js
function quz_reset_colors(t)
{
var theme_name = jQuery(t).attr('id').substr(6);
var color_fields = jQuery(t).parent().find('div.color_admin_area').find('.color-input-wrap > input[type="text"]');
// jQuery(color_fields).css('border', '1px solid red');
// console.log(color_fields);
var colors = new Array();
<?php
foreach ($quz_default_colors as $key => $value)
{
echo 'var ary = new Array(\'' . implode('\',\'', $value) . '\');' . "\r\n";
echo 'colors[\'' . $key . '\'] = ary;' . "\r\n";
}
?>
jQuery(color_fields).each(function(index, elem){
jQuery(elem).val(colors[theme_name][index]);
});
What is the best way to handle this? Should I just put all the JS in a separate php file and use include('my_script.php'); Like I've done with the CSS in the above statement?
I have multiple ways of making this work, but I want to do it the BEST way. Thoughts?
I do a small trick to do this in my Easy Retweet WordPress Plugin.
// Enqueue the script
add_action('template_redirect', 'add_script');
function add_script() {
wp_enqueue_script('retweet', get_option('home') . '/?retweetjs');
}
add_action('init', 'deliver_js');
function deliver_js() {
if ( array_key_exists('retweetjs', $_GET) ) {
header('Content-Type: text/javascript');
print_retweet_js($options);
// die after printing js
die();
}
}
function print_retweet_js($options) {
include_once('path/to/your/js/script.php');
}
Hope this is useful to you
function theme_script() {
?>
< script type="text / javascript" >
here is your script
< /script >
<?php
wp_enqueue_script( 'theme_script_id', get_bloginfo('template_directory').'/js/theme_script.js', array( 'jquery' ) );
}
add_action( 'wp_print_scripts', 'theme_script' );
Im creating a wordpress site with WP-Ecommerce. My client asked for a functionality that i cant figure out how to make. He has a product with a long description and he wants multiple "read on" links to hide parts of it. It should be done in javascript so that client wont be redirected anywhere when he clicks on read more (extended content should just scroll open.)
it would be nice to find a plugin but i cant seem to find one.
A plugin for this would be easy to write. You just need to write a shortcode that adds the javascript to do what you want. The jQuery accordion for instance.
<?php
function add_accordion_js() {
?>
<script>
$(function() {
$( ".accordion" ).accordion();
});
</script>
<?php
}
function jquery_accordion($atts, $content = null) {
return '<div class="accordion">' . do_shortcode($content) . '</div>';
}
add_action('wp_head', 'add_accordion_js');
add_shortcode('accordion', 'jquery_accordion');
?>
Something like that can be added to your functions.php and you would wrap everything you need to collapse in [accordion][/accordion] tags... and it will break the sections down at the tags...
somhow i couldn't get accordion() function to work but Steve pointed me in right direction and i got this going:
function add_accordion_js() {
?>
<script>
jQuery(function() {
jQuery(".accordion").hide();
jQuery(".opener").click(function (e) {
jQuery(this).parent().next('.accordion').slideDown('fast');
jQuery(this).slideUp();
});
});
</script>
<?php
}
function jquery_accordion($atts, $content = null) {
return '<span class="opener">(read more)</span><div class="accordion">' . do_shortcode($content) . '</div>';
}
add_action('wp_head', 'add_accordion_js');
add_shortcode('accordion', 'jquery_accordion');
and things i needed to hide under read more link i wrapped in [accordion][/accordion]tags