Targeting a specific `<div>` via WordPress Plugin

Insert HTML Input to a themes template file?

My question is this:

Read More

Currently with my code, I can have whatever I’ve set in my custom settings page appear on
the end of every post using, of course, a WordPress filter.

The only thing is, I don’t want what I input to go anywhere within a post. What I am trying to
achieve, is to have my input injected into the current themes home.php template file, within a <div></div> tag that’s contained within that template file. The <div> in question has an ID attached, which is <div id="category-inner">, so is there any way use it’s ID to target it in my plugin?

I’ve successfully managed to do it, by editing the actual home.php template file and inserting a bit of php directly there to show the user input, but that totally goes against what I’m trying to do, which is to not have to edit the source code of the template file and only have to use my plugin to insert the users inputted text in that specific location (the <div> mentioned above).

My plugin is only ever going to be adding user input in one place on the site, and it will never change. And the place it will always go in, is where I mentioned above.

Below is my plugin code:

<?php
/*/
Plugin Name: Custom Text Adder
Plugin URI: N/A
Description: Demonstrates how rubbish I am at pretty much everything I want to do
Version: 101
Author: JD
Author URI: N/A
/*/


// insert custom plugin settings menu
add_action('admin_menu', 'custom_create_menu');


add_filter('the_content', 'customhead_the_content');

function customhead_the_content($content) {
    $output = $content;
    $output .= '<div id="category-inner">';
    $output .= get_option('post_text');
    $output .= '</div>';
    return $output;
}

// Add Font-Size to WYSIWYG Editor
function wp_editor_fontsize_filter( $options ) {
    array_shift( $options );
    array_unshift( $options, 'fontsizeselect');
    array_unshift( $options, 'formatselect');
    return $options;
}

add_filter('mce_buttons_2', 'wp_editor_fontsize_filter');

// Create Custom Menu
function custom_create_menu() {

    //create new top-level menu
    add_menu_page('Custom Plugin Settings', 'Custom Settings', 'administrator', __FILE__, 'custom_settings_page',plugins_url('/img/icon.png', __FILE__));

    //call register settings function
    add_action( 'admin_init', 'register_mysettings' );
}

// Register our settings
function register_mysettings() {

    register_setting( 'custom-settings-group', 'new_option_name' );
    register_setting( 'custom-settings-group', 'some_other_option' );
    register_setting( 'custom-settings-group', 'option_etc' );
    register_setting( 'custom-settings-group', 'font_size' );
    register_setting( 'custom-settings-group', 'post_text' );
}

function custom_settings_page() {
?>

<!-- Custom Settings Page Container -->

<div class="wrap">

    <h2>Custom Text</h2>

  <form method="post" action="options.php">
    <?php settings_fields( 'custom-settings-group' ); ?>



    <table class="form-table">

<?php /* Bring the editor onto the page */

wp_editor( '', 'post_text', $settings = array() );

// 4.
// Custom buttons for the editor.
// This is a list separated with a comma after each feature
// eg. link, unlink, bold, ...

$settings = array(
    'textarea_name' => 'post_text',
    'media_buttons' => true,
    'tinymce' => array(
        'theme_advanced_buttons1' => 'formatselect,|,bold,italic,underline,|,' .
            'bullist,blockquote,|,justifyleft,justifycenter' .
            ',justifyright,justifyfull,|,link,unlink,|' .
            ',spellchecker,wp_fullscreen,wp_adv'
    )
);

    submit_button( 'Save everything', 'primary', 'submit' ); ?>

    </table>

  </form> 

</div>

 <?php }; ?>

Here is the screenshot which will be able to explain this in the most concise way possible:

http://i.imgur.com/hiEjEsA.jpg

Again, any and all help is hugely appreciated and will hopefully stop my brain from hurting!

You all rock,

Casey. 🙂

Related posts

Leave a Reply

1 comment

  1. I’m not sure if you want this to be a pure PHP solution, but since you have the ID of the div you could target it with jQuery and insert the text into the div on page load (or form submit) with something like this:

     $(document).ready(function() {
         var userText = $('#input-id').val();
         $('#category-inner').html(userText);
     })