Showing a post number next to each post

You can use the steps below to show a post number beside each post in a topic.

It is generally better to use the reply link within a post when you want to reference that post in your response. This automatically includes a link back to the original post so readers can jump to it easily. This approach is more reliable than mentioning a post number, since post numbers can change if any posts are removed later. You can also use the share icon in each post to copy a direct link to it.

1. Log in to your Website Toolbox account.
2. Click the Integrate link in the main menu.
3. Click the HTML link.
4. Copy the HTML code below into the Forum Head Tag HTML Code text box:

   <!-- Add post numbers next to each post of a topic. ie: #1, #2, #3 -->
   <script>
   window.addEventListener("DOMContentLoaded", function () {
   	const container = document.querySelector('#posts-list');
   	if (!container || !window.location.href.match(/\/post\//)) return;
   	const observer = new MutationObserver(function (mutations) {
   		let shouldRenumber = false;
   		for (const m of mutations) {            
   			for (const node of m.addedNodes) {
   				if (node.nodeType !== 1) continue;
   				if (node.matches && node.matches('.post-body.pull-left')) shouldRenumber = true;
   				else if (node.querySelector && node.querySelector('.post-body.pull-left')) shouldRenumber = true;                
   				if (node.id && node.id.startsWith('post_row_')) {
   					const el = document.getElementById(node.id);
   					if (el && window.getComputedStyle(el).display === 'none') shouldRenumber = true;
   				}
   			}           
   			if (m.type === 'attributes' && m.target.id && m.target.id.startsWith('post_row_')) {
   				const el = m.target;
   				if (el && window.getComputedStyle(el).display === 'none') shouldRenumber = true;
   			}
   		}
   		if (shouldRenumber) renumberPosts();
   	});
       function renumberPosts() {
   		observer.disconnect();
   		let start = 1;
   		const pageText = jQ('.page-numbers').text() || '';
   		var paginationNum = pageText.replace(/,/g, ""); 
   		const matches = paginationNum.match(/[0-9]+/);        
   		if (matches) start = parseInt(matches[0], 10);
   		let postNumber = start;
   		if(start > 1) {
   			postNumber = start - 1;
   		}
   		jQ('#posts-list .post-body .post-options').each(function () {
   			const optionsElement = jQ(this);
   			if (optionsElement.closest('.post-body').is(':visible')) {
   				optionsElement.find('.post-number').remove();
   				if(optionsElement.closest('.first-post').length) {
   					optionsElement.append('<span class="post-number">#1</span>');
   				} else {
   					optionsElement.append('<span class="post-number">#' + postNumber + '</span>');                
   				}
   				postNumber++;
   			}
   		});
   		observer.observe(container, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
       }    
       renumberPosts();
       observer.observe(container, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
   });
   </script>
   

5. Save the changes.

If you still need help, please contact us.