Skip to content

Instantly share code, notes, and snippets.

@erkarp

erkarp/three-columns-wp-widget.php

Last active January 30, 2018 15:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erkarp/1ce889981bbb3be33f31eae6abbcf55c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erkarp/1ce889981bbb3be33f31eae6abbcf55c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. erkarp renamed this gist Jan 30, 2018. 1 changed file with 0 additions and 0 deletions.
    0 three-columns-wp-widget → three-columns-wp-widget.php
    View file
    File renamed without changes.
  2. erkarp created this gist Jun 8, 2016.
    86 changes: 86 additions & 0 deletions three-columns-wp-widget
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,86 @@

    /**
    * Class WPDocs_New_Widget
    * https://github.com/KingPixil/wing/tree/master/src
    */
    class Three_Columns extends WP_Widget {

    function __construct() {
    // Instantiate the parent object.
    parent::__construct( false, __( 'Three Columns', 'textdomain' ), array(
    'description' => __( 'Row with three resizable columns', 'textdomain' )
    ) );
    }

    function widget( $args, $instance ) {
    echo $args['before_widget'];
    $columns = '';

    for ($x = 1; $x <= 3; $x++) {
    $columns .= '<div class="' . $instance['width-'.$x] . '">' . $instance['text-'.$x] . '</div>';
    }

    echo '<div class="row">' . $columns . '</div>';
    echo $args['after_widget'];
    }

    function update( $new_instance, $old_instance ) {
    return $new_instance;
    }

    function form( $instance ) { ?>

    <p><strong>The column widths should add up to 12.</strong></p>
    <p>To use only two columns, add the first two columns to 12 and leave the third Text area empty.</p>

    <?php for ($x = 1; $x <= 3; $x++) {
    $width_var = 'width-' . $x;
    $text_var = 'text-' . $x;

    $col_width = ! empty( $instance[$width_var] ) ? $instance[$width_var] : __( 'col-4', 'text_domain' );
    $col_text = ! empty( $instance[$text_var] ) ? $instance[$text_var] : __( '', 'text_domain' );

    ?>


    <h3>Column <?php echo $x ?></h3>

    <label for="<?php echo $this->get_field_id( 'col-' . $x . '-width' ); ?>">
    <?php _e( 'Width' ); ?>
    </label>

    <select class="widefat"
    id="<?php echo $this->get_field_id( 'width-' . $x ); ?>"
    name="<?php echo $this->get_field_name( 'width-' . $x ); ?>"
    value=" <?php echo esc_attr( $col_width ); ?>">

    <?php for ($w = 1; $w <= 12; $w++) { ?>
    <?php $className = 'col-' . $w ?>

    <option
    <?php if ($col_width == $className) echo 'selected' ?>
    <?php echo 'value="' .$className . '" ' ?> >
    <?php echo esc_attr( $className ); ?>
    </option>

    <?php } ?>
    </select>


    <label for="<?php echo $this->get_field_id( 'column-' . $x . '-text' ); ?>">
    <?php _e( 'Text' ); ?>
    </label>

    <textarea class="widefat" rows="5" id="<?php echo $this->get_field_id( 'text-' . $x ); ?>"
    name="<?php echo $this->get_field_name( 'text-' . $x ); ?>"><?php echo esc_attr( $col_text ); ?></textarea>

    <?php } return '';

    }
    }

    add_action( 'widgets_init', 'wpdocs_register_widgets' );

    function wpdocs_register_widgets() {
    register_widget( 'Three_Columns' );
    }