Support » Theme: Sydney » List All Employees

  • Resolved joelbrock


    Seems like a simple question and hopefully the solution is easy too. I’d like to list all employees using the Sydney FP: Employees builder widget. But i’ll like to list them all in a grid, rather than in a slider that only shows 3 at a time. As shown on the Sydney demo employees page:

    Thanks in advance!

Viewing 8 replies - 1 through 8 (of 8 total)
  • OK, i found the template file “archive-employees.php” and was able to rename the slug of my page to “employees” which allowed the template to load.

    So my follow-up question, which i can start in a new thread if you’d like, is how to RENAME the employees page/template. On our particular site employees is not an appropriate label.

    FYI: I’m now working in a child theme of Sydney and have copied the archive-employees.php file into the child theme directory and have tried re-naming the file to match the page slug. but no luck.

    Hello there,

    Please try to follow the below steps:

    1. Apply this custom CSS code into your site’s additional CSS option under Appearance > Customize > Additional CSS.

    .roll-team .owl-wrapper{
      max-width: 100% !important;
      transition: none !important;
      transform: none !important;
    .roll-team .owl-controls{
      display: none !important;

    2. To beautify the grid layout, you’ll need to add the following jQuery code.

     * Javascript-Equal-Height-Responsive-Rows
    (function($){'use strict';$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css('box-sizing')==='border-box')||($element.css('-moz-box-sizing')==='border-box');if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css('height',Math.max.apply(window,heights)+'px');return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(':visible');$tiles.css('height','auto');for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(':visible');$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var _this=this;var event_namespace='.grids_'+grids_event_uid;'grids-event-namespace',event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind('resize'+event_namespace+' load'+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css('height','auto');$(window).unbind('grids-event-namespace'));return this;};})(window.jQuery);
    ;(function($) {
       'use strict'
       $(window).on('load resize', function() {
         if( $('.roll-team').length ){
            $('.roll-team .owl-item').responsiveEqualHeightGrid();

    The code above can be applied to your site by doing these: install and activate the TC Custom JavaScript plugin, navigate to Appearance > Custom JavaScript, and then paste the following code into the provided box.


    Wow, that’s super-helpful. THank you! I dropped the CSS and JS into files in my Sydney child theme and it worked a treat.

    THere do seem to be some gaps in the grid layout however. See the page i’m working on, , about 2/3 down the page there are 2 gaps in the grid, cant quite figure out why…..

    Hello there,

    It seems like the JS file in your child theme hasn’t yet loaded on your site. To load the JS file from your child theme, you need this function in your child theme’s functions.php file:

    add_action( 'wp_enqueue_scripts', 'sydney_child_enqueue' );
    function sydney_child_enqueue() {
        wp_enqueue_script( 'sydney-main-child', get_stylesheet_directory_uri() . '/js/child-theme.js', array('jquery'),'', true );

    Adjust the folder name (js) and the file name aswell.


    I added this to my child theme functions.php when you provided that bit of js:

    function my_custom_javascript() {
        wp_enqueue_style('extra', get_stylesheet_directory_uri().'/js/extra.js', array('jquery'), '1.0', 'screen, projection');

    Does it not appear to be working? Should i replace it with the code you sent me?

    Hello there,

    Please use:


    instead of:



    Hey, thanks a ton!

    You’re welcome!

    Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.


Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘List All Employees’ is closed to new replies.