GET A QUOTE

How to Show Statewise Team Members With Details in WordPress?

WordPress is by far the leading CMS that powers more 50% of all sites across the web. The whole eco-systems of thousands of plug-ins, availability of resources and ease of use for technical/non-technical users have made it popular content management system. It is the first choice of developers and most of the bloggers, as it is used for designing simple to multi-lingual sites.

Making WordPress more interesting, here one of our WordPress developers explained step by step WordPress tutorial about how to show state-wise team members with details. This tutorial is easy to understand and follows the WordPress best practices.

This tutorial contains examples with screenshot that allows you to learn faster.

How to create Map using JvectorMap

HTML

– Add this HTML div block  where you want to show Map.

<div id="world-map" style="width: 100%; height: 400px;"></div>

CSS

  – Add this map CSS in your Header or Footer file.

<link rel="stylesheet" href="jquery-jvectormap-2.0.3.css" type="text/css" media="screen"/>

JS

– Add this map js in  Footer file.

<script src="jquery-jvectormap-2.0.3.min.js"> </script>
  <script src="jquery-jvectormap-us-aea-en.js"></script>

– Here is the code, which was used to initialize the map below.

<script>
     	jQuery(document).ready(function() {
            jQuery(function(){
  		// pass 'us_aea_en' for USA
             jQuery('#world-map').vectorMap({map:'us_aea_en',
                 markerStyle: { initial: { fill: '#e48715',},
                                hover:   { fill: '#e46815'  } },
                                backgroundColor: '#fff',  
                 regionStyle: { initial: { fill: '#e48715',},          
                                hover:   {fill: '#e46815' } }	
                 });
   </script>

– If you open created page in a web-browser you should see something similar to this:
wordpress development company

Now, move on 2nd step to create custom post type for team members.
– To create custom post type you can use Toolset Types Plugin, custom post type Plugin or create custom post type using code.

– “Toolset Types plugin”

– Download : https://wordpress.org/plugins/types/ (Ref)

– Install the plugin and create team post type.

wordpress development company

wordpress development company

Now, Move on 3rd step to create accordion.
-We need to add HTML block.

<div id="accordion" class="accordion">
<a href="#Arizona" class="accordion-section-title" id="Arizona">Arizona</a>
	<div id="Arizona" class="accordion-section-content">
	</div>
</div>

Add js for Accordion

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
 
    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');
 
        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
        }
 
        e.preventDefault();
    });
});

– Add js to scroll move to top

jQuery('a#world-map').live("click",function (evt) {
                evt.preventDefault();
                $('.accordion .accordion-section-content.open').css("display","none");
                $('html, body').animate({
                    scrollTop: (jQuery('#world-map').offset().top - 50)
                }, 'slow');
});

Finally, last step to add js for click on map any area and get details for team members in accordion.
JS:

<script>
     	jQuery(document).ready(function() {
            jQuery(function(){
         
                 jQuery('#world-map').vectorMap({map:'us_aea_en',
                 markerStyle: { initial: { fill: '#e48715',},
                                hover:   { fill: '#e46815'  } },
                                backgroundColor: '#fff',  
                 regionStyle: { initial: { fill: '#e48715',},          
                                hover:   {fill: '#e46815' } },	
                 onRegionClick: function(event, code) {
					
		 var map = $('#world-map').vectorMap('get', 'mapObject');
					  var statename = map.getRegionName(code);
					  $('#'+statename).trigger('click');
					}               		
				});
			});
         });
       </script>

After all completed your step you can see in browser.
Wordpress development company

Hope, this blog helped you to show state-wise team members with details in WordPress. You may also see our other tutorials by visiting this blog.

We, at cmsminds, are the expert WordPress development company, serving global clients with best WordPress development solution. Looking for help with WordPress project, please contact one of our team members.

Quick Inquiry