Site icon Hip-Hop Website Design and Development

How to Create custom block for displaying information in content section which act like shortcode

I wanted to Display one block which act like shortcode in front and plugin in background.

For Example

<div class="one-fourth fl glousp-box">
<p class="figure">5000+</p>
<span class="uspinfo">Employees</span>
</div>

Which Display 4 Divs for different Information & Figures.

Final output will be look like this.

For which If someone can change value of Employee 3,100 to 4500 from Admin Page It will be changed every page where we had called that block so in content section of page it will act like Shortcode and in Admin Page it will be act like Plugin.

So can someone please guide or help me the proper tutorial or tip how to follow flow for development of this process.

I had already tried to code for plugin but didn;t understand actually flow to display information added in admin part how to display that on page content area.

for a temporary solution had added shortcode as follow.

[showsusp figure="3,100+" usptitle="Satisfied Clients"]
[showsusp figure="50+" usptitle="Countries Served"]
[showsusp figure="5,000+" usptitle="Projects Completed"]
[showsusp figure="1,000+" usptitle="Professionals"] 

but it has one disadvantage that if we want to changes any part of section then we have to go through all pages of entire website which will wrong practice.

As i am new to WordPress architecture any help is most appreciated.

Thank you.