List All Employees

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
 * https://github.com/Sam152/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]);}
row.equalHeight();}}
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;_this.data('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(_this.data('grids-event-namespace'));return this;};})(window.jQuery);

;(function($) {

   'use strict'

   $(window).on('load resize', function() {
   
     if( $('.roll-team').length ){

        $('.roll-team .owl-item').responsiveEqualHeightGrid();
        
     }

   });
    
   
})(jQuery);  

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.

Regards,
Kharis

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, https://rootstorise.apano.org/supporting-partners/honorary-committee/ , 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.

Regards,
Kharis

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');
}
add_filter('child_add_javascripts','my_custom_javascript');

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

Hello there,

Please use:

add_filter('wp_enqueue_scripts','my_custom_javascript');

instead of:

add_filter('child_add_javascripts','my_custom_javascript');

Regards,
Kharis

• This reply was modified 7 years, 8 months ago by Kharis Sulistiyono.

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.

Regards,
Kharis