Free Past Events Pagination

To add a page pagination to Event Page (Past Events only), like this.

#1. First, use this code to Event Page Header Injection

<!-- @tuanphan past events pagination -->
<link rel="stylesheet" href="https://code.beaverhero.com/file?filename=1760427026266eventpagination.css"/>
<script>
function _0x391b(_0x4c04d5,_0x5d41da){const _0x560b1d=_0x560b();return _0x391b=function(_0x391b2f,_0xeafc6f){_0x391b2f=_0x391b2f-0x1f2;let _0xdc71df=_0x560b1d[_0x391b2f];return _0xdc71df;},_0x391b(_0x4c04d5,_0x5d41da);}function _0x560b(){const _0x42e960=['type','perPage','removeAttribute','.tp-pager','get','set','push','false','aria-hidden','click','\x20article.eventlist-event','labels','loading','hidden','has','firstElementChild','observe','toggle','aria-current','2UbyYFN','start','forEach','searchParams','appendChild','from','length','root','scrollIntoView','192VcgnLY','map','Prev','addEventListener','querySelector','.eventlist-title\x20a[href]','disabled','lastElementChild','17472arQXbZ','setAttribute','article.eventlist-event','ordered','7196301gysFPG','toString','display','createElement','a.eventlist-column-thumbnail[href]','prev','readyState','itemId','style','add','ceil','className','getAttribute','dataset','next','afterend','href','1507848iInPxh','page','375123hgvXGD','660819DvnNMN','2617868tIJsiz','hr.eventlist-past-upcoming-divider','3034990RBwCYO','min','max','nav','textContent','button'];_0x560b=function(){return _0x42e960;};return _0x560b();}(function(_0x16772d,_0x372a5e){const _0x363d26=_0x391b,_0x351bdd=_0x16772d();while(!![]){try{const _0x2e30cc=-parseInt(_0x363d26(0x22b))/0x1+-parseInt(_0x363d26(0x203))/0x2*(-parseInt(_0x363d26(0x22c))/0x3)+-parseInt(_0x363d26(0x22d))/0x4+parseInt(_0x363d26(0x22f))/0x5+parseInt(_0x363d26(0x20c))/0x6*(parseInt(_0x363d26(0x214))/0x7)+-parseInt(_0x363d26(0x229))/0x8+parseInt(_0x363d26(0x218))/0x9;if(_0x2e30cc===_0x372a5e)break;else _0x351bdd['push'](_0x351bdd['shift']());}catch(_0x44e713){_0x351bdd['push'](_0x351bdd['shift']());}}}(_0x560b,0x774d5),((()=>{const _0x5836e2=_0x391b,_0x2e0fae={'perPage':0x7,'labels':{'prevs':_0x5836e2(0x20e),'next':'Nexts'}},_0x47c821='.eventlist--past',_0x1cd53b=_0x47c821+_0x5836e2(0x1fa),_0x55cb29=_0x47c821+'\x20>\x20hr';let _0x3de254,_0x50f10c=[],_0x346884=0x1,_0x5eda28=0x1;const _0x23b044=_0x288813=>{const _0x2d0e4b=_0x5836e2,_0x46c3a9=_0x288813[_0x2d0e4b(0x210)](_0x2d0e4b(0x211))||_0x288813[_0x2d0e4b(0x210)](_0x2d0e4b(0x21c));return _0x46c3a9?_0x46c3a9[_0x2d0e4b(0x224)](_0x2d0e4b(0x228)):_0x288813[_0x2d0e4b(0x225)][_0x2d0e4b(0x21f)]||_0x288813['id']||'';},_0x4c90b3=()=>{const _0x427ce6=_0x5836e2,_0x475956=document[_0x427ce6(0x210)](_0x47c821);if(!_0x475956)return null;const _0x2f45ee=_0x475956[_0x427ce6(0x210)](_0x427ce6(0x22e)),_0x5a684b=Array[_0x427ce6(0x208)](_0x475956['querySelectorAll'](_0x427ce6(0x216))),_0x1973e5=new Set(),_0xd02f1d=[];return _0x5a684b['forEach'](_0x43f5d7=>{const _0x5d219f=_0x427ce6,_0x131acc=_0x23b044(_0x43f5d7);if(!_0x131acc)return;!_0x1973e5[_0x5d219f(0x1fe)](_0x131acc)&&(_0x1973e5[_0x5d219f(0x221)](_0x131acc),_0xd02f1d[_0x5d219f(0x1f6)](_0x43f5d7));}),{'root':_0x475956,'pastDivider':_0x2f45ee,'all':_0x5a684b,'ordered':_0xd02f1d};},_0x56ca0a=_0x493fa9=>{const _0x1c0571=_0x5836e2,_0x1868b8=document[_0x1c0571(0x210)](_0x1c0571(0x1f3));if(_0x1868b8)_0x1868b8['remove']();_0x3de254=document[_0x1c0571(0x21b)](_0x1c0571(0x232)),_0x3de254[_0x1c0571(0x223)]='tp-pager';const _0x2d528a=document[_0x1c0571(0x21b)](_0x1c0571(0x234));_0x2d528a[_0x1c0571(0x235)]=_0x1c0571(0x234),_0x2d528a['textContent']=_0x2e0fae[_0x1c0571(0x1fb)][_0x1c0571(0x21d)],_0x2d528a[_0x1c0571(0x20f)](_0x1c0571(0x1f9),()=>_0x346884>0x1&&_0xa2a494(_0x346884-0x1,!![])),_0x3de254[_0x1c0571(0x207)](_0x2d528a),_0x50f10c=[];for(let _0x5d45b5=0x1;_0x5d45b5<=_0x5eda28;_0x5d45b5++){const _0x317112=document[_0x1c0571(0x21b)](_0x1c0571(0x234));_0x317112[_0x1c0571(0x235)]=_0x1c0571(0x234),_0x317112[_0x1c0571(0x233)]=_0x5d45b5,_0x317112[_0x1c0571(0x225)][_0x1c0571(0x22a)]=_0x5d45b5,_0x317112[_0x1c0571(0x20f)](_0x1c0571(0x1f9),()=>_0xa2a494(_0x5d45b5,!![])),_0x50f10c[_0x1c0571(0x1f6)](_0x317112),_0x3de254['appendChild'](_0x317112);}const _0x371769=document[_0x1c0571(0x21b)]('button');_0x371769[_0x1c0571(0x235)]=_0x1c0571(0x234),_0x371769[_0x1c0571(0x233)]=_0x2e0fae[_0x1c0571(0x1fb)][_0x1c0571(0x226)],_0x371769['addEventListener'](_0x1c0571(0x1f9),()=>_0x346884<_0x5eda28&&_0xa2a494(_0x346884+0x1,!![])),_0x3de254[_0x1c0571(0x207)](_0x371769),_0x493fa9['insertAdjacentElement'](_0x1c0571(0x227),_0x3de254);},_0x5d50b7=()=>{const _0x3cec47=_0x5836e2;_0x50f10c[_0x3cec47(0x205)](_0x231fbb=>{const _0x51c1b4=_0x3cec47,_0x56fb78=Number(_0x231fbb['dataset'][_0x51c1b4(0x22a)])===_0x346884;_0x231fbb['classList'][_0x51c1b4(0x201)]('is-active',_0x56fb78),_0x56fb78?_0x231fbb['setAttribute']('aria-current',_0x51c1b4(0x22a)):_0x231fbb[_0x51c1b4(0x1f2)](_0x51c1b4(0x202));});const [_0x211d02,_0x723603]=[_0x3de254[_0x3cec47(0x1ff)],_0x3de254[_0x3cec47(0x213)]];_0x211d02[_0x3cec47(0x212)]=_0x346884===0x1,_0x723603[_0x3cec47(0x212)]=_0x346884===_0x5eda28;},_0xa2a494=(_0x4ed1da,_0x558568=![])=>{const _0xb52c28=_0x5836e2,_0x274bbc=_0x4c90b3();if(!_0x274bbc)return;const {root:_0x24d146,pastDivider:_0x26366e,all:_0x3bf381,ordered:_0x3ee3be}=_0x274bbc;_0x5eda28=Math[_0xb52c28(0x231)](0x1,Math['ceil'](_0x3ee3be[_0xb52c28(0x209)]/_0x2e0fae['perPage'])),_0x346884=Math['max'](0x1,Math[_0xb52c28(0x230)](_0x4ed1da,_0x5eda28));const _0xa5dcf6=(_0x346884-0x1)*_0x2e0fae[_0xb52c28(0x236)],_0x4d3a24=_0xa5dcf6+_0x2e0fae[_0xb52c28(0x236)],_0x512cdf=new Set(_0x3ee3be['slice'](_0xa5dcf6,_0x4d3a24)[_0xb52c28(0x20d)](_0x23b044));_0x3bf381[_0xb52c28(0x205)](_0x24883d=>{const _0x3e825a=_0xb52c28,_0x3eae44=_0x512cdf[_0x3e825a(0x1fe)](_0x23b044(_0x24883d));_0x24883d['hidden']=!_0x3eae44,_0x24883d[_0x3e825a(0x220)]['display']=_0x3eae44?'':'none',_0x24883d[_0x3e825a(0x215)](_0x3e825a(0x1f8),_0x3eae44?_0x3e825a(0x1f7):'true');});_0x26366e&&(_0x26366e[_0xb52c28(0x1fd)]=![],_0x26366e[_0xb52c28(0x220)][_0xb52c28(0x21a)]='');const _0xa129cc=new URL(location[_0xb52c28(0x228)]);_0xa129cc[_0xb52c28(0x206)][_0xb52c28(0x1f5)](_0xb52c28(0x22a),String(_0x346884)),history['replaceState'](null,'',_0xa129cc[_0xb52c28(0x219)]()),_0x5d50b7(),_0x558568&&_0x24d146[_0xb52c28(0x20b)]({'behavior':'smooth','block':_0xb52c28(0x204)});},_0x3e915a=()=>{const _0xa2ad99=_0x5836e2,_0x5ab368=_0x4c90b3();if(!_0x5ab368||!_0x5ab368['ordered'][_0xa2ad99(0x209)])return![];_0x5eda28=Math[_0xa2ad99(0x222)](_0x5ab368[_0xa2ad99(0x217)][_0xa2ad99(0x209)]/_0x2e0fae[_0xa2ad99(0x236)]);if(_0x5eda28<=0x1)return!![];_0x56ca0a(_0x5ab368[_0xa2ad99(0x20a)]);const _0x587f1a=parseInt(new URL(location[_0xa2ad99(0x228)])[_0xa2ad99(0x206)][_0xa2ad99(0x1f4)](_0xa2ad99(0x22a))||'1',0xa)||0x1;_0xa2a494(_0x587f1a);let _0xc0e281=null;const _0x1801a2=new MutationObserver(()=>{cancelAnimationFrame(_0xc0e281),_0xc0e281=requestAnimationFrame(()=>_0xa2a494(_0x346884));});return _0x1801a2[_0xa2ad99(0x200)](_0x5ab368[_0xa2ad99(0x20a)],{'childList':!![],'subtree':!![]}),!![];};document[_0x5836e2(0x21e)]===_0x5836e2(0x1fc)?document[_0x5836e2(0x20f)]('DOMContentLoaded',_0x3e915a,{'once':!![]}):_0x3e915a()||setTimeout(_0x3e915a,0x12c);})()));
</script>

#2. Customize

To change number of past events/page, you can change this number.

To change button style, you can use code like this under #1, here I use example value

<style>
:root {
    --tp-gap: 0.2rem;
    --tp-margin: 25px;
    --tp-btn-min: 20px;
    --tp-btn-h: 20px;
    --tp-btn-pad: 0 25px;
    --tp-btn-border: red;
    --tp-btn-bg: #fff;
    --tp-btn-active-bg: red;
    --tp-btn-active-color: #fff;
    --tp-btn-active-border: red;
    --tp-disabled-opacity: .4;
}
</style>