Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I wanna create a simple widget that show an image and text with a link. Something like this:

http://jsfiddle.net/aF4UR/

But I want to include this as a widget with fields.

For example in the back end:

Image: [insert image url here] Image Link [link] Title:[title here] Title link: [insert link here] Text:[text field]

And in the front end display as the code in jsfiddle.

Any help?

share|improve this question
2  
Ans what have you tried so far? –  Wyck Jan 19 '13 at 7:38
2  
What is the question? –  Mark Kaplun Jan 19 '13 at 8:53
add comment

1 Answer

up vote 0 down vote accepted

The correct question would be "how to create a widget"? No code was initiated. I recommend reading this tutorial: Building Custom Wordpress Widgets

Anyway... your widget:

class widget_simple extends WP_Widget {

    // Create Widget
    function widget_simple() {
        parent::WP_Widget(false, $name = 'Custom Simple Widget', array('description' => ''));
    }

    // Widget Content
    function widget($args, $instance) { 
        extract( $args );
        $simple_image_url = strip_tags($instance['simple_image_url']);
        $simple_image_link = strip_tags($instance['simple_image_link']);
        $simple_title = strip_tags($instance['simple_title']);
        $simple_title_link = strip_tags($instance['simple_title_link']);
        $simple_text = strip_tags($instance['simple_text']);

        ?>

            <div id="latest-box">

                <span class="img-box">
                    <a href="<?php echo $simple_image_link; ?>"><img src="<?php echo $simple_image_url; ?>"></a>
                </span> <!-- img-box -->

                <span class="latest-title">
                    <a href="<?php echo $simple_title_link; ?>"><?php echo $simple_title; ?></a>
                </span> <!-- title -->

                <span class="latest-text">
                    <?php echo $simple_text; ?>
                </span> <!-- text -->

            </div> <!-- box -->

        <?php
     }

    // Update and save the widget
    function update($new_instance, $old_instance) {
        return $new_instance;
    }

    // If widget content needs a form
    function form($instance) {
        //widgetform in backend
        $simple_image_url = strip_tags($instance['simple_image_url']);
        $simple_image_link = strip_tags($instance['simple_image_link']);
        $simple_title = strip_tags($instance['simple_title']);
        $simple_title_link = strip_tags($instance['simple_title_link']);
        $simple_text = strip_tags($instance['simple_text']);
        ?>
            <p>
                <label for="<?php echo $this->get_field_id('simple_image_url'); ?>">Image URL: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('simple_image_url'); ?>" name="<?php echo $this->get_field_name('simple_image_url'); ?>" type="text" value="<?php echo attribute_escape($simple_image_url); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('simple_image_link'); ?>">Image Link: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('simple_image_link'); ?>" name="<?php echo $this->get_field_name('simple_image_link'); ?>" type="text" value="<?php echo attribute_escape($simple_image_link); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('simple_title'); ?>">Title: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('simple_title'); ?>" name="<?php echo $this->get_field_name('simple_title'); ?>" type="text" value="<?php echo attribute_escape($simple_title); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('simple_title_link'); ?>">Title Link: </label>
                <input class="widefat" id="<?php echo $this->get_field_id('simple_title_link'); ?>" name="<?php echo $this->get_field_name('simple_title_link'); ?>" type="text" value="<?php echo attribute_escape($simple_title_link); ?>" />
            </p>
            <p>
                <label for="<?php echo $this->get_field_id('simple_text'); ?>">Text: </label>
                <textarea class="widefat" id="<?php echo $this->get_field_id('simple_text'); ?>" name="<?php echo $this->get_field_name('simple_text'); ?>"><?php echo attribute_escape($simple_text); ?></textarea>
            </p>

        <?php       
    }

}

register_widget('widget_simple');
share|improve this answer
    
Thank you very much, that worked! (another quick one, how can I call the tinyMCE in the text fields?) –  RogerNobrega Jan 29 '13 at 2:12
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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