Showing a post number next to each post

Posts in the new themes don't currently have a post number or ID which can be used to reference them in discussions. We'll soon be adding a feature which makes it easy to reference posts in new themes by number. In the meantime, you can follow the instructions below to add a post number next to each post in a topic.

Note that for referencing a specific post in the new themes, using the quote button is ideal. The quote will include a link to the post so that the user can easily jump to that specific post. This is preferred over using a post number because post numbers mentioned in the discussion will be incorrect if a post is deleted later on for any reason. Each post also includes a Share link, which you can use to get a link for that specific post.

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:

   
   <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.