posted time Created time: 2015-07-18 posted time Last updated time:

Previous and Next Articles Component

Previous and Next Articles component is to show the neighbour blog articles. By putting this component, readers can follow the articles with the date.

Appearance and usage of the Previous and Next Articles

The Previous and Next Articles component is used on the Blog Article Page Template. It shows the next and previous blog entries like below.

Next and previous blog articles component

The number of next and previous entries is customizable. By changing the first variable definition, you can change it.

Source code of the Previous and Next Articles

The source code is Previous and Next Articles Component consists of Html code, server side program, and Style Sheet.

Html code

The Html code of Previous and Next Articles Component is below.

This Html code uses the "@next" and "@prev" variables. The "@next" variable has links to the next blog posts, and the "@prev" has previous ones.

The "$size_next" and "$size_prev" variables has the size of these variables. If the size is 0, the Html code do not show the links.

These variables are created by the server side program.

Server side program

The server side program of Previous and Next Articles is below.

This program make the variables which are used in the Html code by following operations.

Get current page

AT first, get the record of current page by the "getCurrentPage()" function. This function queries the "cms_page" table by SQL query, and returns the result.

Set maximum number of previous and next articles

The "$limit" variable is to set the maximum number of the next and previous articles.

Get previous and next article as array variables

The "getNext()" and "getPrev()" function get next and previous blog posts from the database as array variable. The maximum size of these array variables are specified by the "$limit" variable.

Style Sheet

The Style Sheet of Previous and Next Articles is below.

When you change the design of this component, please change this Style Sheet, and Html code if necessary.


Go to Top