Let’s create something better together.

If you prefer phones, we have one of those too: +1 978 455 4515










    • Project Info
      icon
    • Technology
      icon
    • Contact Details
      icon







      BackNext








      Back

      • Feb 2017
      • WordPress

      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>

      – 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">>

      – 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:

      usa map

      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.

      tool set edit post type

      state wise team members details tab

      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>&gt
      <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:

      After all completed your step you can see in browser.

      team members in accordion

      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.

      Recent Blog
      VIEW ALL BLOGS