Loading…
Close ×
Inquiry
×

Inquiry

Inquiry

Get A Free Quote

Let’s get to work! Contact us with the form below at no obligation to you. Together, we’ll set the project’s scope and demonstrate you value that the experts at cmsMinds bring to projects like yours.

Tell Us A Bit About Yourself

    Select As Many Of These As Apply

    How to Show Statewise Team Members With Details in WordPress?

    Feb 2017 | by Gagan

    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 Show Statewise Team

    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.

    Top