View 강좌 4 – Latest News Widget

In this Views tutorial we’ll be building the “latest news” widget for Acme’s site.
If we look at the finished page you can see that this is in two parts one “featured” news item, with Title, Image and Excerpt followed a list of other news items.On Acme’s site we’ve opted to use the WordPress blog for our company News.

Views Tutorials -Latest news widgets
Views Tutorials -Latest news widgets

1. Creating the Latest News View

  • Go to Views in the WordPress Dashboard and Add New View.
  • We’ll be limiting the number of records to output so we’ll need Full custom display mode which will give us all Views settings.
  • Give your view a name, we called ours Latest news and hit Create View.

2. The Query section – choosing what to display

First, you need to select the post type you want your View to use. In this case you’ll be using the WordPress default post.

  • In Content selection, select Posts post type and Update.

This View is going to display in the sidebar, and we’ll want all News to display even if we are viewing the details of one of them. So to enable this:

  • In Query options, deselect Don’t include current page in query result and Update.

You want your most recent news article to display first, so Order by post date Descending is perfect.

This View will only be displaying the first News article, so you need to limit the number of records returned. In Limit and Offset, select to Display 1 item. This will also be saved automatically.

Views Tutorials - Latest news query section
Views Tutorials – Latest news query section

There are no filters to add so your Query section is complete.

3. The Loop Output section

Your Latest news View will only retrieve one record, so you won’t be using a predefined loop. We can still use the Loop Wizard to help with adding the fields to your View.

  • Scroll down to your Loop Output section.
  • In the editor, click on the Loop Wizard button.
  • Select Unformatted and click Next.

and now add the fields for your View

  • The Title with a link
  • Our Featured image
  • The Excerpt for our short description
  • Click the Finish button to add this to your loop output

This is what your Loop output editor should look like:

Latest news layout 1

1
2
3
4
5
6
7
8
9
10
11
12
    
    

4. Displaying your View as a Widget

This is probably a good moment to add the View to your page and see how it looks.

We’ll add the view to our page and just see how it looks. Goto the Widgets section – Select Appearance, Widgets
In the Widgets section:

  • Drag the WP Views widget to the sidebar
  • Give it a title e.g. Acme Inc. News
  • Select your View, Latest news
  • And click Save

If you visit any page on your site with a sidebar, you should see your single Latest news article displayed. you still need to style it, but all the information should be there.

5. Styling the Loop Output section

Edit your View again, and scroll down to the Loop Output editor.

We’re going to use the Bootstrap framework classes again to structure your output:-

Your Loop Output should now look like this:

Latest news layout 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    
    

If you go and visit your site again, this is what you should see:

Views Tutorials -Latest news - 1st widget
Views Tutorials -Latest news – 1st widget

6. Creating the News View

This the second of our two Widget Views and will just return news articles as links, skipping the first one, which we already displayed in the Latest news Widget.

  • Go to Views in the WordPress Dashboard and Add New View.
  • Choose Full custom display mode again.
  • Give your view a name, News and hit Create View.

7. The query section – choosing what to display

We’ll be using the same options as for our Latest news View with the exception of the Limit and offset. This time we’ll limit our results to 6, and we’ll skip the first one we displayed in Latest news.

These are the steps to follow:

  • In Content Selection, select Posts post type and Update.
  • In Query Options, deselect Don’t include current page in query result and Update.
  • In Limit and Offset, select to Display 6 items and Skip first 1 items and Update.

All those settings will be saved automatically.

Views Tutorials - Limit and offset
Views Tutorials – Limit and offset

8. The Loop Output section

  • Again, scroll down to your Loop Output section and click on the Loop Wizard button.
  • Select Unordered list and click Next
  • Add the one field for your View: the Title with a link
  • Click Finish

Our styling is trivial for this View. We need to ‘unstyle’ the Unordered List and we’ll use Bootstrap’s handy class to do this and we need to style our link like a header.

Your Loop Output should look like this:

News Layout 2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    
    

9. Displaying your View as a Widget

Goto the Widgets section – Select Appearance, Widgets
In the Widgets section:

  • Drag the WP Views widget to the sidebar
  • Select your View, News
  • And click Save

The final result

Go to your site and take a look at the home page. You’ll see the following:-

Views Tutorials -Latest news widgets
Views Tutorials -Latest news widgets

Next: Views Tutorials Part 5 – The News archive

Click the button below to get started.

Part 5 – The News archive

Views tutorials - Custom WordPress Archive view
Views tutorials – Custom WordPress Archive view

댓글 남기기