Build Your Own Business Website header image

Lesson 9 – Create the Featured Page Widget

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The majority of the material for this lesson on creating a featured page widget can stand all by itself, it doesn’t need to be part of a child theme and is not dependent upon Thesis. You can use these directions for creating widgets on just about any WordPress Site with any theme that is compliant with the current version of WordPress.

The Structure and Function of our Widget – Watch the Video

  • What the widget will do

    • Display a widget title
    • Display the featured image
    • Display the page title
    • Display the page excerpt
    • Display a link to the page
  • Functions we need to create

    • Define the featured image
    • Create the widget structure
    • User input
      • Display the title
      • The page ID
      • Display the featured image
      • Display the page title

Understanding the WordPress Widgets API – Watch the Video

  • 2 tasks

    • Extend the Widget Class
    • Register the widget
  • 4 sections of the widget class – 4 functions

    • Setup the widget – __construct()
      • name
      • id
      • class
      • description
    • Create the widget settings form
      • Setup defaults
      • Create the input fields
    • Update the widget settings
      • get the new settings
      • sanitize the data
      • change the old settings to new
    • Display the widget
      • get the settings
      • process the functions
      • write the html

Create a Basic Text Widget – Watch the Video

  • Create the widget file

    • include the file
  • Extend the Widget Class

  • Setup the widget

  • Create the settings form

    • Set up the variables
      • sanitize
        • esc_attr()
        • esc_textarea()
      • ternary operators (short hand if/else)
        • (condition) ? TRUE : FALSE
    • Text input
      • label
      • id
      • name
      • type
      • value
    • Checkbox input
      • label
      • id
      • name
      • type
      • value
      • checked
    • Textarea
      • label
      • id
      • name
      • rows
      • columns
      • content
  • Update the settings

    • sanitize checkbox
    • sanize the text input
    • sanitize the text area
  • Display the widget

    • Extract the args
    • Set the variables
      • widget title filter
    • If there is some text
    • if the title should be displayed
    • Write the html
  • Register the Widget

Data Sanitization in a WordPress Widget – Watch the Video

  • What is data sanitization?

    • Prevent malicious code from acting in the database or on the website.
    • Why is it necessary?
  • Approaches to data sanitization

    • Removing functionality from the code
    • Whitelisting data
    • Securing access to data
    • Type casting
  • Sanitize the form variables

    • esc_attr()
    • ternary operation
    • esc_textarea()
  • Sanitize the update variables

    • strip_tags()
    • ternary operation
    • if(current_user_can())
    • stripslashes()
    • wp_filter_post_kses() – strips evil scripts
    • addslashes()

Internationalization in a WordPress Widget – Watch the Video

  • What is internationalization?

    • I18n – abbreviation
  • How does it work?

    • a text domain is declared
    • data is prepared
    • translation files are created linked to the text domain
  • Prepare simple output for translation

    • _e() function
      • string
      • text domain
    • __() function

Add Featured Image Support to Thesis – Watch the Video

  • Add theme support for featured images
  • Define the image size
  • Call the featured image

Create the Featured Page Widget – Watch the Video

  • Create the new widget and structure

  • Create the widget settings form

    • Display widget title
    • The page ID
    • Display featured image
    • Display page title
  • Update the settings

    • Sanitize the page id
    • Sanitize  checkboxes
  • Display the widget

    • if a page id is entered
    • if a title is entered & if the title should be displayed
    • Create the loop
    • Add the necessary html
      • wrapping div
      • wrap image in p tag
      • wrap title in h5
      • wrap the link in a div
  • Reduce the excerpt length on the front page

    • excerpt_length() filter
    • Call from the if(is_front_page()) function
  • Eliminate the excerpt ending

    • excerpt_more() filter
    • Call from the if(is_front_page()) function

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
1 Comment… add one
1 comment… add one
  • John Antonacci August 11, 2012, 12:46 pm

    Is the code available from this series?
    thanks,
    John

Leave a Comment