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

Question

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.

Answer 1

You can store values in a database and get that value from the database and pass the value to shortcode from the database.

Now you just need one admin page to update these 4 values.

to add menu page refer this for example, after creating page you can save this 4 values in side option table using update_option() and using get_option() when needed.

update_option('anykey','3,100+'); 
$number = get_option('anykey');

[showsusp figure=$number usptitle="Satisfied Clients"]

I hope you get the idea.