View 강좌 5 – The News archive

On our Acme’s site we’ve opted to use the WordPress Blog for our company News.If you look at the News page, this is currently using the default WordPress Blog Archive view. We want our news to look a little different, so we are going to override the default archive view with one of our own.Views WordPress Archives allows us to do just that.

Let’s compare the two:

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

1. Creating the Views WordPress Archive

From the Views menu, go to WordPress Archives.

Views tutorials – WordPress Archive – Create
Views tutorials – WordPress Archive – Create

Click on the button to create a WordPress Archive. This will open a Add new WordPress Archive dialog.

  • Give your archive a name – e.g. News archive
  • Select the Post type loop this is going to replace, in this case Home/Blog
  • Click to Add new Archive
Views tutorials – WordPress Archive – Add new Archive
Views tutorials – WordPress Archive – Add new Archive

In the WordPress Archive edit screen our title and Loops Selection section are already set, and we have no Query section. This is because our WordPress Archive is going to use the WordPress query rather than one of its own.

Views tutorials – WordPress Archive – Loop Selection
Views tutorials – WordPress Archive – Loop Selection

2. The Loop Output section – adding your content

We’ll use the Loop Wizard to create our View output. Scroll down to the Loop Output editor and click on Loop Wizard.

  • Select the layout style Unordered list and click Next
  • Now select the fields to include: Title with a link, Date – this is the post date -, your Featured image, the Excerpt text for the post and the URL to build a link to the post detail.
  • Click Finish

Your Loop Output editor will look like the following:

WordPress archive – layout unstyled

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

This is a good moment to take a look at your News page. We don’t need to “add” our WordPress Archive to any page: by setting the Post type loop to Home/Blog, we’ve ensured that it will replace the default Archive view.

3. Styling the Loop Output section

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

  • First add the Bootstrap unstyled class, and a class of our own, to your list
    <ul class=”unstyled news-archive”>
  • Wrap the View 강좌 5 – The News archive in a header <h2></h2>
  • And wrap the date in a <span> </span>

We want to display the date and the time, so we’ll insert the date shortcode again.

  • Position the cursor to the right of the date shortcode 2015년 5월 13일
  • Add the text at
  • Click on the Fields and Views button
  • In the Basic section, click on Date to insert the shortcode
  • Give it a format parameter for just the time portion: add the parameter 2015년 5월 13일

The date shortcode takes the standard WordPress date formats. In this case we have selected a 12hr clock with am/pm

Our featured image and excerpt and link need to wrapped in a div and we’ll add the Bootstrap clearfix class as the image will be floated, and we’ll convert our URL into a Read more link.

  • Wrap the featured image and excerpt shortcodes in <div class=”clearfix”></div>
  • Set the link as follows – <a href=”https://lifea.co.kr/view-%ea%b0%95%ec%a2%8c-5-the-news-archive/“>Read more</a>
  • Click Update to save your changes.

Your Layout meta HTML should now look like:

WordPress archive – layout styled

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

4. Add CSS – Styling the WordPress Archive

We just need to adding some CSS to finish off. Most of the CSS is just tidying the output spacing. For the list items we’ve used thenth-child pseudo selector to shade alternate rows, and we’ve floated our image left

  • Open the Loop Output CSS editor
    Views tutorials – Open layout CSS
    Views tutorials – Open layout CSS
  • And add the following CSS classes:
    WordPress archive layout CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .news-archive li {
        margin-bottom:20px;
        padding:10px;
    }
    .news-archive li:nth-child(even) {
        background-color:#ededed;
    }
    .news-archive li > h3 {
        margin-top:0;
    }
    .news-archive li > div {
        margin-top:10px;
    }
    .news-archive li > div > img {
      float:left;
      padding-right:20px;
    }
  • Update to save your changes

The final result

Go to your site and take a look at the News page. Hopefully, you’ll see the following:-

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

Next: Views Tutorials Part 6 – Projects parametric search

Click the button below to get started.

Part 6 – Parametric search

Views tutorials - Projects parametric search
Views tutorials – Projects parametric search

 

Leave a comment