[Resolved] Navigation using Views

[Author]

Posts

[randallH-3]

I'm trying to create a navigation from list of posts.

I need to make the current page in bold and first item.

Is this possible?

[wpv-layout-start]
	[wpv-items-found]
<ul class="pagination">
	<li class="page-item">[wpv-pager-prev-page force="true"][wpml-string context="wpv-views"]<img src="<em><u>hidden link</u></em>" style="height:50px;"/>[/wpml-string][/wpv-pager-prev-page]</li>
	<!-- wpv-loop-start -->
	<wpv-loop wrap="4">
		[wpv-item index=1]
		<div class="row" style="width:100%;">
			<div class="col-md-3 div-gt-navi">
              [wpv-post-link]
			</div>
		[wpv-item index=other]
			<div class="col-md-3 div-gt-navi">
				[wpv-post-link]
			</div>
		[wpv-item index=4]
			<div class="col-md-3 div-gt-navi1">
				[wpv-post-link]
			</div>
      </div>
          [wpv-item index=pad]
    <div class="col-md-3 div-gt-navi"></div>
[wpv-item index=pad-last]
    <div class="col-md-3 div-gt-navi1"></div>
		</div>
	</wpv-loop>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
	<li class="page-item">[wpv-pager-next-page force="true"][wpml-string context="wpv-views"]<img src="<em><u>hidden link</u></em>" style="height:50px;" />[/wpml-string][/wpv-pager-next-page]</li>
</ul>
[wpv-layout-end]

.div-gt-navi a, .div-gt-navi1 a{color:gray; padding:0 2%;}
.div-gt-navi a:hover, .div-gt-navi1 a:hover{color:black; text-decoration:none ;}

.pagination{border-top:0px; margin-top:0px;}
.div-gt-navi{border-right:1px solid gray;     
  -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -ms-grid;
    display: grid;
    height: 100%;
    justify-items: center; text-align:center; font-size:15px; line-height:1.25; }


.div-gt-navi1{  -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -ms-grid;
    display: grid;
    height: 100%;
    justify-items: center; text-align:center; font-size:15px; line-height:1.25;  }

.page-link{border:0px;}

[Luo Yang]

Hello,

Yes, it is possible, you can use [wpv-conditional] shortcode to check if it is current post, then display different styled link, for example:

[wpv-conditional if="([wpv-post-id]=[wpv-post-id item="$current_page"])"]
<strong>[wpv-post-link]</strong>
[/wpv-conditional]
[wpv-conditional if="([wpv-post-id]=[wpv-post-id item="$current_page"])" evaluate="false"]
[wpv-post-link]
[/wpv-conditional]

More help:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-conditional

[randallH-3]

Hi, how can I make the current page as the first item in view?

Thanks!

[Luo Yang]

You can put the [wpv-post-link item="$current_page"] shortcode outside view's loop, and enable view's option "Don't include current page in query result"

More help:
https://toolset.com/documentation/programmer-reference/views/views-shortcodes/item-attribute/
$current_page is used to retrieve data from the current page being rendered. It can be used inside a View loop to obtain data from the page on which the View is being rendered.

[randallH-3]

My issue is resolved now. Thank you!