WordPress テンプレートテーマのフィルターギャリーの初期表示を変更したい（Javascript）

前提・実現したいこと

PHPの知識についてはほとんど全くと言っていいほどありません
ここ最近毎日数時間見続けると恐らくここを触ればいいのかなというのが少しわかってきたかな程度の能力ですので
質問の意図やコードを見る場所が間違っているかもしれませんが教えていただけると助かります。

今回質問したいのはTCDテーマのNUMEROについてです。
このテーマはギャラリーを投稿したカテゴリーを閲覧するときにワンクリックでカテゴリーごとにフィルターできる機能があります。
ロードした時点ではALLというすべてのカテゴリーが表示されるのがデフォルトになっておりこれを入れ替えることができません
自分の見せたいカテゴリーをロードした時に表示したいので試行錯誤している状況です。
以下がサンプルのサイトですhttps://demo.tcd-theme.com/tcd070/gallery/

追記9/28
試行錯誤の結果PHPだと目当てのフィルターをアクティブにできても後に読み込まれるギャラリーの部分が変わらないので
自分の力では制御するのは難しそうという結論になりました。
考えた結果Java Script でやるのが良いのではないかと思い現在試行錯誤しています。

アイデア１
ページを読み込んだときに目当てのページをデフォルトにする
アイデア２
フィルターを選択していない状態はPHPから作り出せたので
フィルターが１つもアクティブになっていない状態を検知して
その状態の場合は目当てのデータIDのフィルターを指定するようにする

個人的にはアイデア２の方が作りやすそうな気がしているのですが知恵を貸していただけると助かります。

発生している問題・エラーメッセージ

自分の見せたいカテゴリーをロードした時にデフォルトで表示することができない

該当のソースコード

<main class="l-main l-inner--md"> <div class="l-inner--sm"> <?php get_template_part( 'template-parts/page-header' );

if ( is_post_type_archive( $dp_options['gallery_slug'] ) ) :
$categories = get_terms( $dp_options['gallery_category_slug'], array(
'hide_empty' => true,
'parent' => 0

) );

if ( $categories && ! is_wp_error( $categories ) ) :
	// カテゴリーフィルターフラグ
	$has_archive_filter = true;

?>
<div class="p-archive-categories p-archive-categories--<?php echo esc_attr( $dp_options['index_post_type'] ); ?>">
<ul class="p-archive-categories__filter">

			<li class="p-archive-categories__filter-item" data-cat-id="<?php echo esc_attr( $category->term_id ); ?>"><?php echo esc_html( $category->name ); ?></li>

<?php endforeach; ?>

		</ul>
	</div>

追記9/28
JavaScript
// category filter
var $gridArchiveFilterItems = $('.p-archive-categories__filter-item');
if ($gridArchiveFilterItems.length) {
$gridArchiveFilterItems.click(function() {
if (gridArchiveFilterAnimating || $(this).hasClass('is-active')) return false;
gridArchiveFilterAnimating = true;

					$gridArchiveFilterItems.removeClass('is-active');
					var catId = $(this).addClass('is-active').attr('data-cat-id');
					var $items = $gridArchive.find(gridArchiveItemClass).removeClass('is-active');
					if (catId) {
						gridArchiveFilterCatId = catId;
						setTimeout(function(){
							wall.filter('.cat-' + catId);
							setTimeout(function(){
								setGridItemSize()
								wall.fitWidth();
								gridArchiveFilterAnimating = false;
								gridArchiveItemsFadein($items.filter('.cat-' + catId), true);
							}, 200);
						}, 550);
					} else {
						gridArchiveFilterCatId = null;
						setTimeout(function(){
							wall.unFilter();
							setTimeout(function(){
								setGridItemSize()
								wall.fitWidth();
								gridArchiveFilterAnimating = false;
								gridArchiveItemsFadein();
							}, 200);
						}, 550);
					}
				});
			}

試したこと

<li class="p-archive-categories__filter-item is-active ">ALL</li> ここのの部分を <li class="p-archive-categories__filter-item is-active " data-cat-id="6" >カテゴリー名</li> と書き換えてみましたが、この場合ロードした時に確かにフィルターはアクティブな状態に変化しているのですが実際にはすべてのギャラリーが出た状態になってしまっています。他のフィルターをクリックしてアクティブにした後再度アクティブにすると正常に作動します。

また

<li class="p-archive-categories__filter-item" data-cat-id="<?php echo esc_attr( $category->term_id ); ?>"><?php echo esc_html( $category->name ); ?></li> ここで生成されるフィルターと同じものがもう１つ出来てしまいます。

あとALLのカテゴリーは最後に来てほしいので
endforeach;の下に<li class="p-archive-categories__filter-item">ALL</li>を配置しました。

その他も自分で考えうる範囲でコードをいじってみたもののうまくいかず
何か他に言語が必要なのかそもそも他の場所を見るべきなのかもわかっていない状況です。
知恵を貸していただけると助かります。
よろしくお願いします。

追記
アイデア2を実現しようと試行錯誤していますが
目当てのデータカテゴリーのIDは
HTMLで確認したところdata-cat-id="6"なのは分っているのですが
基本的なつくりを読み解けていないのでエラーが多くうまく指定が出来ていない状況です。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

単純に考えるとカテゴリの要素をクリックすればいいような気がしますが。
ページロード時は一瞬ALLが表示されるかも。

JavaScript
1$(function() {
2    $(".p-archive-categories__filter-item").each(function(index, element) {
3        if ($(element).attr("data-cat-id") == 6) {
4            $(element).click();
5        }
6    });
7});