Wordpress, using form to control JQuery script

Question

Consider me newbie to web development and wordpress.

I am developing a plugin that randomly changes text color of elements. It is working good but its pretty much static right now. Now i want add this function for other elements too like post title.

How can i control conditions in a javascript .js file from options in an admin menu form. Like say I want to add that feature for post titles too so user will have a form with 2 checkboxes, one for blog title and other post title.

I have form ready with checkboxes, script working for title, just have to pass these checkbox values to that js file.

Thanks in advance.

Javascript file codes :

jQuery(document).ready(function($){

var $ttl = '.site-title a';

var rainbow = function(){
    var $rrr = Math.round(((Math.random()*200)));
    var $ggg = Math.round(((Math.random()*200)));
    var $bbb = Math.round(((Math.random()*200)));
    var $r = "'rgb(" + $rrr + ", " + $ggg + ", " + $bbb + ")'";
    $($ttl).animate({color: $r},"slow");
}

$($ttl).mouseenter(
    function(){
        rainbow()
    }
);
});

My plugin php file :

if ( ! function_exists( 'rainbow_title_script' ) ) {
function rainbow_title_script() {
    wp_enqueue_script(
        'rainbow_title_script',
        plugins_url( '/rainbow_title.js' , __FILE__ ),
        array( 'jquery-ui-core', 'jquery-color' )
        );
} // function ends
} // if condition ends

add_action('wp_enqueue_scripts','rainbow_title_script')

This is too broad, Stack Overflow works much better when you present your code, what you're trying to achieve and why it is not working. I can indicate an initial path for you to research, but please define "an admin menu form". Where is this? What screen? — brasofilo
– brasofilo, Commented Oct 29, 2013 at 15:17
Ahh, agree, by "an admin menu" i mean a menu that comes in admin panel of wordpress. It will be in Settings section. I am adding codes too. Sorry about that, i realized it. — Ammar
– Ammar, Commented Oct 29, 2013 at 15:19
You're looking for the Settings API, here are some working examples. — brasofilo
– brasofilo, Commented Oct 29, 2013 at 15:21

Daniël Tulp · Accepted Answer · 2013-10-29 15:37:16Z

1

for creating an options page, see http://codex.wordpress.org/Creating_Options_Pages

a really good insight is also given by http://wp.tutsplus.com/tutorials/theme-development/the-complete-guide-to-the-wordpress-settings-api-part-1/

edit please consider: http://wakeusup.com/2011/11/how-to-create-plugin-options-page-in-wordpress/

I used this approach in a plugin. You can set your settings like so:

if(!class_exists('cnp_plugin_options')):
    // DEFINE PLUGIN ID
    define('CNPPLUGINOPTIONS_ID', 'cnppluginoptions');
    // DEFINE PLUGIN NICK
    define('CNPPLUGINOPTIONS_NICK', 'CNP options');

    class cnp_plugin_options
    {
        /** function/method
        * Usage: hooking the plugin options/settings
        * Arg(0): null
        * Return: void
        */
        public static function register()
        {
            register_setting(CNPPLUGINOPTIONS_ID.'_options', 'cnp_builder');
            register_setting(CNPPLUGINOPTIONS_ID.'_options', 'cnp_author_restriction');
            register_setting(CNPPLUGINOPTIONS_ID.'_options', 'cnp_plugin_link');
            register_setting(CNPPLUGINOPTIONS_ID.'_options', 'cnp_notallowed');
        }
        /** function/method
        * Usage: hooking (registering) the plugin menu
        * Arg(0): null
        * Return: void
        */
        public static function menu()
        {
            // Create menu tab
            add_options_page(CNPPLUGINOPTIONS_NICK.' Plugin Options', CNPPLUGINOPTIONS_NICK, 'manage_options', CNPPLUGINOPTIONS_ID.'_options', array('cnp_plugin_options', 'options_page'));
        }
        /** function/method
        * Usage: show options/settings form page
        * Arg(0): null
        * Return: void
        */
        public static function options_page()
        {
            if (!current_user_can('manage_options'))
            {
                wp_die( __('You do not have sufficient permissions to access this page.') );
            }

            $plugin_id = CNPPLUGINOPTIONS_ID;
            // display options page
            include(plugin_dir_path(__FILE__).'/options.php');
        }
    if(is_admin()){
        add_action('admin_init', array('cnp_plugin_options', 'register'));
        add_action('admin_menu', array('cnp_plugin_options', 'menu'));
    }
endif;

now you can get your settings like:

public static function cnp_notallowed(){
    if(get_option('cnp_notallowed')){
        return true;
    }else{
        return false;
    }
}

edited Oct 29, 2013 at 15:37

answered Oct 29, 2013 at 15:20

Daniël Tulp

1,8832 gold badges25 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ammar Over a year ago

Hi Daniel, I have already read through that and have tried that. But here I am trying to run rainbow function in my .js file with IF conditions for the elements that will be selected in a form in wordpress admin panel settings section.

Ammar Over a year ago

I think i should be parient here :), let me read that tutsplus, they are awesome for sure. Thanks Daniel.

Daniël Tulp Over a year ago

that is one way, probably better then the one I just edited in, but that one also works (be sure to change the 'cnp' stuff to your own prefix to not interfere with my Cross Network Posts plugin)

Collectives™ on Stack Overflow

Wordpress, using form to control JQuery script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related