Build Your Own Business Website header image

Lesson 10 – Using Plugins, Widgets, Boxes & Packages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , , ,

Applies to - ,

In lesson 10 of our Build a Responsive Professional Website using Thesis Theme 2, you learn all about plugins, widgets, boxes and packages, both what they are and how they work. But before we dive into that we go through using Post Images in Thesis 2 and our Agility Skin. There are many ways to use images; we talk about post attachments, the Thesis Post Image and Thumbnail, the WordPress Featured Image and boxes for displaying images.

After our in-depth look at widgets and plugins, we show several different ways that you can use text widgets on your business website. Then we dive into Thesis 2 Boxes and Packages, giving you an understand of what they are and how to use them. Finally, we wrap the lesson up by showing how to configure a responsive menu in Thesis 2.

Post Images in Thesis 2 & Agility

  • Post Attachments
    • Inserted directly into the content via the media library
    • Size of image determined by the choices made at insert
    • The only place it can go is on the content
  • Thesis Post image
    • Inserted in the Post Image field on each page or post
    • Size of post image determined by the size inserted
    • Placement determined by boxes
  • Thesis Post image and Thumbnail
    • Thesis thumbnail can be either
      • created directly from the Thesis post image
      • inserted in the Thumbnail field on each page or post
    • Size of thumbnail determined by the thumbnail size or the size inserted
    • Placement determined by boxes
  • WordPress Featured Image
    • Inserted using the Featured Image function on each page or post
    • Default size is the thumbnail size
    • Placement determined by boxes
  • Thesis boxes for displaying images
    • Thesis Post Image
    • Thesis Thumbnail
    • WP Featured Image
  • Agility Featured Image Box
    • Options

Understanding WordPress Widgets

  • What’s a Widget?
    • A module that adds content or functionality to a page
    • Can only be placed in a widget area
  • Understanding the Widgets panel
    • Sidebars
    • Available widgets
    • Inactive widgets
  • Add a widget to a sidebar
  • Parts of a widget
    • Title
    • Settings
  • Arrange widgets within a sidebar

Types of WordPress Widgets

  • Blog related widgets
    • Archives
    • Calendar
    • Categories
    • Recent Comments
    • Recent Posts
    • RSS
    • Tag Cloud
    • Thesis >> Killer Recent Entries
    • Thesis >> Subscriptions
  • Safely Ignored Widgets
    • Meta
    • Thesis >> Google Custom Search
  • Widgets Useful on a Static Site
    • Custom Menu
    • Pages
    • Search
    • Text
    • Thesis >> Search Widget

Understanding WordPress Plugins

  • What’s a plugin?
    • A module that adds functionality to your site
    • Does not necessarily display anything on a page
  • Understanding the plugin dashboard
    • plugin navigation
    • bulk actions
    • plugin status
      • Name
      • Description
      • Action links
      • Author link
      • Plugin link
  • Updating Plugins

Installing Plugins

  • Quick Installation Method
    • Install screen
      • admin screen links
      • search form
      • browse tags
    • Search for term – NextGen Gallery
    • Select from list
    • View Details
    • Install –  NextGen Gallery
    • activate
  • FTP Method
    • Locate on plugin repository – Black Studio TinyMCE Widget
    • Download to your computer
    • unzip file to appropriate location
    • ftp
    • activate
  • De-activate Plugin
  • Delete Plugin

Add contact information using a text widget

  • Add text widget to your sidebar
  • Add a title to the widget
  • Add Contact Information
  • Automatically add paragraphs

Create a call to action using a text widget

  • Install Black Studio TinyMCE Widget
  • Text based Call to Action
    • title – centered h3
    • phone number link
    • heading link – centered h4
    • text
  • Opt-in form
    • get the code
    • paste the code

Add a video using a text widget

  • Get the video embed code
    • Set the width correctly
  • Add a title
  • Add the code

Understanding Boxes

  • What’s a box?
    • A Thesis 2 specific module that adds functionality to your site
    • Often results in a new box available in the HTML section of the Skin Editor
    • Does not necessarily result in a box
  • Understanding the Select Boxes dashboard
    • Upload a box – BYOB Multi-Level Dropdown Responsive Menu
    • Activate a box
    • Deactivate a box
    • Delete a box
    • Box status
      • Name
      • Version
      • Author
      • Description
  • Updating Boxes

Understanding Packages

  • What’s a package?
    • A Thesis 2 specific module that adds CSS to your site
    • Always results in a new package available in the CSS section of the Skin Editor
  • Understanding the Select Packages dashboard
    • Upload a package – BYOB Multi-Level Dropdown Responsive Menu
    • Activate a package
    • Deactivate a package
    • Delete a package
    • Package status
      • Name
      • Version
      • Author
      • Description
  • Updating Packages

Configuring a Responsive Menu in Thesis 2

  • A Preview of the Menu
  • Download the box and package
  • Add the box to the HTML
    • HTML Tag
    • HTML Class
    • Menu to Display
  • Add the package to CSS
  • Configure the package options
    • Toggle Menu
    • Font Settings
    • Link Settings
    • Menu Item Padding
    • Overall Menu Margin
    • Separating Border Color
    • Top Level Menu Height
    • Submenu Width
    • Submenu Color
    • Drop Down Arrow Color

Question and Answer

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one