Dani Llewellyn

I had a look at your site, and the columns are behaving as I intended them to. You don’t have enough items for a third column so you are only using two columns. The columns are a fixed width, and so they take the same amount of space each no matter how many columns are required. This is a conscious decision on my part for design aesthetics:

Consider that you have one letter with two columns and one letter with three. If they used a proportion of the available space instead of a fixed width, with the two columns taking 50% each and the three taking 33.3% each, then the gutters will be misaligned. Therefore I made the choice to ensure that the columns always line up.

As to the template, it is likely that oxygen is interfering as you suspect. I don’t know much about oxygen and how it operates so I can only apologise as I won’t be able to help you with it.

I plan to improve the column generation in a future release. For now, you need to override the CSS that the plugin provides to get wider columns. The relevant styles as provided by the plugin are:

  .letter-section ul.columns {
    width: 100%;
    box-sizing: border-box;
    column-gap: 0.6em;
    column-width: 15em; }
    .letter-section ul.columns > li {
      display: block; }
    .letter-section ul.columns.max-0-columns, .letter-section ul.columns.max-1-columns {
      column-count: 1;
      max-width: 15.6em; }
    .letter-section ul.columns.max-2-columns {
      column-count: 2;
      max-width: 30.6em; }
    .letter-section ul.columns.max-3-columns {
      column-count: 3;
      max-width: 46.2em; }
    .letter-section ul.columns.max-4-columns {
      column-count: 4;
      max-width: 61.8em; }
    .letter-section ul.columns.max-5-columns {
      column-count: 5;
      max-width: 77.4em; }
    .letter-section ul.columns.max-6-columns {
      column-count: 6;
      max-width: 93em; }
    .letter-section ul.columns.max-7-columns {
      column-count: 7;
      max-width: 108.6em; }
    .letter-section ul.columns.max-8-columns {
      column-count: 8;
      max-width: 124.2em; }
    .letter-section ul.columns.max-9-columns {
      column-count: 9;
      max-width: 139.8em; }
    .letter-section ul.columns.max-10-columns {
      column-count: 10;
      max-width: 155.4em; }
    .letter-section ul.columns.max-11-columns {
      column-count: 11;
      max-width: 171em; }
    .letter-section ul.columns.max-12-columns {
      column-count: 12;
      max-width: 186.6em; }
    .letter-section ul.columns.max-13-columns {
      column-count: 13;
      max-width: 202.2em; }
    .letter-section ul.columns.max-14-columns {
      column-count: 14;
      max-width: 217.8em; }
    .letter-section ul.columns.max-15-columns {
      column-count: 15;
      max-width: 233.4em; }

These are programmatically generated with SCSS pre-processing following this loop:

.max-0-columns,
.max-1-columns {
	column-count: 1;
	max-width: 15.6em;
}
@for $column from 2 to 16 {
	.max-#{$column}-columns {
		column-count: $column;
		max-width: ($column * 15em) + (($column - 1) * 0.6em);
	}
}

The result of the above is that the columns numbered 2 through to 16 are each given a width of 15em by making the available space for all the columns max-width equal to:

the number of columns multiplied by 15em, added to "the number of columns reduced by one, multiplied by 0.6em"

This covers the 15em width of each column and 0.6em gap between the columns.

I’ve attempted to explain situations like this in the FAQ. Specifically it is because you have put the shortcode into a “preformatted text” block, or a “code” block in your page builder. This action causes your page builder to wrap the output of the shortcode with <pre> and </pre> tags which breaks the layout considerably.

The solution is to move the shortcode either into a normal text block or, if your page builder provides one, a shortcode block meant to hold a single shortcode instance. The easiest option is likely the first option – move your shortcode into a normal text block – because the normal text blocks should be obvious when looking for them in your page builder.

Thanks for passing-on the extra information from your hosting provider, it really helped me see what the problem is 🙂

I think I’ve fixed it, and released version 3.0.2 to include the fix. You can download it from https://downloads.wordpress.org/plugin/a-z-listing.3.0.2.zip to replace your currently broken version.

Hopefully this will get you running again.

Thanks for the suggestions 🙂 The number of columns is currently dependant upon the width of the columns rather than automatically sizing them. I’ll do some investigations to see whether I can come up with a better way along the lines you suggest.

Pagination is a difficult one that I’ve been putting-off because of the complexity. Other people have also suggested this – I still need to think through how to achieve it. 🙂

@raheelfarooq that sounds like a different problem. Please open a new thread for this. Check your server’s PHP logs for errors and add them to your new post so that I can investigate.

You can add a filter function that returns the correct alphabet letter. I’ve put some code below that should work for you if you copy it into your theme’s functions.php file – you’ll need version 3.0.0 of A-Z Listing, which was released an hour ago. I’ve also made a note to add this feature in a future version.

add_filter( 'a_z_listing_item_index_letter', 'ignore_quotes_in_a_z_listing', 10, 3 );

function ignore_quotes_in_a_z_listing( $indices, $item, $type ) {
    if ( 'term' === $type ) {
        $title = $item->name;
    } else {
        $title = get_the_title( $item );
    }

    if ( false === strpos( $title, '"' ) && false === strpos( $title, '\'' ) ) {
        return $indices;
    }

    return [ mb_substr( $title, 1, 1 ) ];
}