1

I've a script that I run on each page on my WordPress blog, but it has different input each time.

I have for a example a hint button: The hint button needs to be different on each page.

function answerbutton() {
    document.getElementById("answer").innerHTML = 'Readers will see this text as a hint';
}

What I do now is copy the script to a location and change the value. And load the script from a different location.

https://domainname/page2/hint1

What I'd like to do is have the script grab some sort of text box on the page editor page. I can use a different input on all pages yet it loads the same text.

I had something in mind like this:

<textarea =id"textarea">
function answerbutton() {
    document.getElementById("answer").innerHTML = 'ID="textarea"';
}

But I cannot get it to work.. my javascript skill is zero. Could someone help me to the right way? Or give me 'hints'?
Is there a WordPress plugin that can do this for example?

This is what I added to the loop? I guess the index.php:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(__('(more...)')); 
$hint1_of_this_page = get_post_meta( get_the_ID(), 'hint1', true );
$hint2_of_this_page = get_post_meta( get_the_ID(), 'hint2', true );
$hint3_of_this_page = get_post_meta( get_the_ID(), 'hint3', true );
$hint4_of_this_page = get_post_meta( get_the_ID(), 'hint4', true );
$answerbutton_of_this_page = get_post_meta( get_the_ID(), 'answerbutton', true );
$correctanswervalidate = get_post_meta( get_the_ID(), 'correctanswervalidate', true );
?></p>
<hr> <?php endwhile; else: ?>

Thhis is what I added to the footer.php:

 <script type="text/javascript">
function answerbutton() {
    document.getElementById("answer").innerHTML = '<?php echo $answerbutton_of_this_page; ?>';
}
</script>
<script type="text/javascript">
function hintbutton() {
    document.getElementById("hint1").innerHTML = '<?php echo $hint1_of_this_page; ?>';
}
</script>
<script type="text/javascript">
function hintbutton2() {
    document.getElementById("hint2").innerHTML = '<?php echo $hint2_of_this_page; ?>';
}
</script>

and this is how I use the custom field: enter image description here

0

What you need its either a custom field or a meta box, you can search there are plenty of tutorials for creating both being the custom field the simpler one, you can read about it here, first you have to see the custom fields, for that you need to open the screen options and check the custom field checkbox, this in your page/post edit screen:

enter image description here

then you can start creating your custom fields, they can be added for posts and pages, in here you can see i created one called 'hint':

enter image description here

then you can use retrieve it, like this (inside the loop):

<?php
// Start the loop.
while (have_posts()) : the_post();
    the_content();

    //here we retrieve the value and save it in a var to use it later
    $hint_of_this_page = get_post_meta( get_the_ID(), 'hint', true );


 // End the loop.
 endwhile;
 ?>

then use it like this in your front-end code (in the footer i guess):

<?php global $hint_of_this_page; ?>
function answerbutton() {
    document.getElementById("answer").innerHTML = '<?php echo $hint_of_this_page; ?>';
}

it will show like this:

enter image description here

| improve this answer | |
  • Comments are not for extended discussion; this conversation has been moved to chat. – fuxia Feb 25 '17 at 18:20
0

In this example it grabs the "value" of the hidden input field, and opens an alert box. You can use the variable mytext however you like in the real world.

Instead of using the tag like I have below, you'd put the document.ready() function in your site javascript file.

<div class="container">

<input type="hidden" id="someid" value="Your text here">
<button class="somebutton">Click me!</button>

<script>
(function($) {
    $(document).ready(function(){

        $( '.somebutton' ).click( function(e) {
            var mytext = $( '#someid' ).val();
            alert(mytext);

        });

    });
})( jQuery );
</script>

</div>
| improve this answer | |
  • Hi Richard, thank you for your help, but I think you misunderstood me. I don't want a new button, but I want the script to be more generitic. And add the value "id=Textarea" within the WordPress editor page. I want the script to use this. – baswijdenesdotcom Feb 25 '17 at 15:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.