Need help adding additional controls to a custom widget

public function widget($args, $instance) {
    extract( $args );
    $title = apply_filters( 'widget_title', $instance['title'] );

    /* Display the markup before the widget. */
    echo $before_widget;
    if ( $title ) {
        echo $before_title . $title . $after_title;
    }
    /* Create a custom query and get the most recent 4 projects. */
    $queryArgs = array(
        /* Do not get posts from the Uncategorized category. */
        'cat' => '-1',
        /* Order by date. */
        'orderby' => 'date',
        /* Show all posts. */
        'posts_per_page' => '4'
    );
    $query = new WP_Query( $queryArgs );
    if ( $query->have_posts() ) : ?>
        <ul class="unbullet unbullet-v">
        <?php while ( $query->have_posts() ) : $query->the_post(); ?>
            <li class="snippet-box vertical">
                <div>
                    <!-- <img src="http://heightandweights.com/wp-content/uploads/2014/10/Beautiful-Lindsey-Vonn.jpg" alt="" class="hundred"> -->
                    <?php the_post_thumbnail( 'medium', array( 'class' => 'hundred' ) ); ?>
                    <div class="snippet-text">
                        <h3><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                    </div>
                </div>
                <!-- <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'large', array( 'class' => 'img-responsive' ) ); ?></a> -->
            </li>
        <?php endwhile; ?>
        </ul>
    <?php endif;
    /* Display the markup after the widget. */
    echo $after_widget;
}

The above is my widget function. I need some assistance.

Issue #1 →

            'posts_per_page' => '4'

I want this to be dynamic that means there should be an input box in the backend widget form where the admin should have the capability to input the number of posts to be displayed.

I tried this way→
This is the Form method in the backend →`

public function form( $instance ) {
    /* Defaults. */
    $defaults = array(
        'title' => 'Recent Projects',
    );

    $instance = wp_parse_args( (array) $instance, $defaults ); ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'tuts' ); ?></label>
        <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>">
    </p>

    <?php
}

I manipulated this form this way → (But it didn’t work and it generated error)

public function form( $instance ) {
    /* Defaults. */
    $defaults = array(
        'title' => 'Recent Projects',
        'post-number'  =>'4';
    );

    $instance = wp_parse_args( (array) $instance, $defaults ); ?>
    <p>
        <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:', 'tuts' ); ?></label>
        <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo esc_attr( $instance['title'] ); ?>">
    </p>

    <p>
        <label for="<?php echo $this->get_field_id( 'post-number' ); ?>"><?php _e( 'Post :', 'tuts' ); ?></label>
        <input type="text" class="widefat" id="<?php echo $this->get_field_id( 'post-number' ); ?>" name="<?php echo $this->get_field_name( 'post-number' ); ?>" value="<?php echo esc_attr( $instance['post-number'] ); ?>">
    </p>

    <?php
}

Summary: I want a backend form input for the number of posts to be displayed in the widget and then reflect the same number of posts in the widget method so that the selected # of posts can be displayed on the front-end.

Issue #2 →
in the widget form method, you can see this →

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

I want this to be dynamic, and that is possible like this →

<p><?php the_content(); ?></p>

But this will publish the whole post content, which is not desirable.
I want just like there should be an input form method the # of character to be pulled from the post content should be decided by the numerical value entered into the input box of the form and the same number of characters should be displayed in the widget front-end.

Read more here: Need help adding additional controls to a custom widget

Leave a Reply

Your email address will not be published. Required fields are marked *