Develop a Front Page Layout Using Thesis 2 Query Boxes

Query boxes are really the secret weapon of Thesis 2.1. They are a tool that allows you to display content from other posts, pages or custom post types. They can be used to accomplish many tasks. Here we talk about what query boxes are and show many ways to use them to display various types of content.

What is a Query Box?

• A tool to display content from other posts, pages or custom post types
• What can it do?

Parts of a Query Box

• Post Content to be Displayed
• Elements of the Post to be Displayed

Add Attention Boxes to the Front Page Using a Query Box

• Create the Element for the Attention Box Area
• Create Columns to Hold the Attention Boxes
• Add Query Boxes to the Column Areas
• Choose Post Types to Display in the Query Boxes
• Choose Elements to Display in the Attention Boxes

Display Multiple Pages with a Single Query Box

• BYOB Posts By ID Query Box
• Reorganize the Front Page Template
  • Add the Posts by ID Query Box
• Choose What to Display in the Query Box
  • Add the Post IDs
  • Add a Class to the Query Box for Styling
  • Responsive Layout Options for Boxes

Setup Secondary Content for Use With Query Boxes

• Using Custom Post Types
  • Secondary Content here is a Custom Post Type
• Use Custom Post Type UI Plugin to Create a Secondary Content
  • Create a New Custom Post Type
  • Create a Custom Taxonomy
  • Create the Secondary Content
• Front Page Example Using Secondary Content

Develop a Home Page Using Secondary Content & Query Boxes

• Add Standard Query Boxes
• Add Content to the Query Boxes
• Set Column Layout for the Query Boxes
• Set Up Posts with Display Locations
• Set Number of Posts to Display
• Benefits of Using Query Boxes over Text Boxes

Overlay the Title Over the Featured Image

• Build the HTML Structure
  • Query box – class work-item
  • Div – class = work-item-details
    • headline
  • Span – html – span, class – open project
    • custom read more
• Build the CSS

Slide the Excerpt Up When Hovering over the Featured Image

• Build the HTML Structure
  • Work item details
    • Post Excerpt
    • Text Box – class = details-label
    • span
• Build the CSS
  • add background color to headline

Question and Answer