Astra Theme - Tipps and Tricks
Genesis Tutorials, WP Tutorials

Astra Theme – Tipps and Tricks

Posted on by C.O.P
5/5 - (490 votes)

This article is a collection of code snippets, tips and tricks for the powerful Astra Theme.

Compensate Fixed Header Anchors

If you use table of contents or other internal jump marks and at the same time the fixed header of the Astra Theme, the content is covered by the height of the fixed header. This CSS code solves the problem.

/* Fixed header fix */
:target:before {
	content: "";
	display: block;
	height: 65px; /* same as your fixed header height */
	margin: -65px 0 0; /* negative fixed header height */
}

Change Widget Title Heading Tag H2

The fabulous Astra theme also handles headlines incorrectly. Unfortunately!
As default the Heading Tag H2 is assigned. Apparently this is taken over from a WordPress default theme. But I don’t want that, because the headings H2 are very important markers in the content of the post.

We make the change in the functions.php of our Astra Child theme. If you are not sure where to put it, add it at the very end:

// Change Sidebar Widget Title Heading Tag
add_filter( 'astra_widgets_init', 'j0e_widget_title_tag', 10, 1 );
function j0e_widget_title_tag( $atts ) {
  $atts['before_title'] = '<div class="widget-title">';
  $atts['after_title'] = '</div>';
return $atts;
}

Many assign H4 for the widget headings. But I use a div-container. Optically everything remains the same, because the CSS-class class="widget-title" is used.

Unfortunately, the filter does not work with the Astra-Footer widgets. But the support told me that they want to extend the filter to the Footer widgets as well.

As a workaround for HTML widgets you can write the title directly into the content area:

<div class="widget-title">Your title</div>
...

Adjust images and caption

With the Astra Theme the images and the image caption are kept very simple. Shadows, left text and no frame. With the CSS element figure you can add a frame or shadow. figcaption contains the text below the image.

/* Images and Caption */
figure {
  box-shadow: 2px 2px 8px 0px #eaeaea;
}
figcaption {
  text-align: center;
}

Im Beispielcode habe ich rund um Bild und Caption einen Schatten gemacht. Die Caption habe ich noch zentriert.

Preload Astra Fonts – For Google PageSpeed

Google PageSpeed Insights complains about that the font file astra.woff should be loaded with the attribute rel=”preload”. This way the file does not delay the loading of the whole page anymore.

Preload important requirements
With you can prioritize the retrieval of resources that are currently requested later when the page is built.
…fonts/astra.woff

https://developers.google.com/speed/pagespeed/insights/

You can make this change using a filter. Paste the following code into the functions.php of your Astra child theme:

add_filter( 'astra_enable_default_fonts', 'temp_disable_astra_fonts' );
function temp_disable_astra_fonts( $load ) {
  $load = false;
  return $load;
}
add_action( 'wp_head', 'add_astra_fonts_preload', 1 );
function add_astra_fonts_preload() {
  ?>
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.woff" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.ttf" as="font" crossorigin />
  <link rel="preload" href="<?php echo get_site_url(); ?>/wp-content/themes/astra/assets/fonts/astra.svg#astra" as="font" crossorigin />
  <style type='text/css'>
  <?php
  echo '@font-face {font-family: "Astra";src: url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.woff) format("woff"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.ttf) format("truetype"),url( ' . get_site_url() . '/wp-content/themes/astra/assets/fonts/astra.svg#astra) format("svg");font-weight: normal;font-style: normal;font-display: fallback;}';
  ?>
  </style>
  <?php
}

You’ll find the code here too: https://gist.github.com/Balachandark/3bc4abaccf1bf07fcec378d1dc59b719

Save and load Google fonts locally – Google PageSpeed

Loading Google fonts directly from Google is convenient, but it is not privacy-compliant and is not the fastest option. Therefore, you should download the Google fonts you use and then deliver them from your web server.

Step 1: Download Fonts

Mario Ranftl provides his tool google-webfonts-helper free of charge. There you can choose your Google font and download it easily in all necessary formats. The .zip-file must then be extracted.

Step 2: Install the plugin

Install the Custom Fonts plugin, which also comes from the Astra developers.

In Design > Custom Fonts you can now easily install the previously downloaded font files. For Font Display it is best to select “swap”.

Step 3: Select Custom Font

Now navigate to Design > Customizer then go to Global > Typography > Basic Typography > Font Family and select your newly created font under Custom.
Now the Google font will be loaded directly from your page.

Adjust Asta Gutenberg Block Editor width

It is really annoying when the width of the editor does not match the width on the live website. Unfortunately, Astra has not managed to change this until today.

Actually, it’s quite simple. First you need a CSS file, which is loaded by the Block Editor. Mine is called block-editor-styles.css and is located in my child themes directory /assets/css/.

With the following code I load the block-editor-styles.css in the file functions.php:

add_action( 'enqueue_block_editor_assets', 'j0e_gutenberg_scripts' );
function j0e_gutenberg_scripts() {
  wp_enqueue_style( 'j0e-gutenberg-custom-css',
  get_theme_file_uri( '/assets/css/block-editor-styles.css' ), false );
}

Then copy the following CSS code into the block-editor-styles.css:

/* Main column width for Boxed and Content in Content Boxed */
.ast-separate-container .wp-block {
  max-width: 800px;
}
/* Main column width for Full Width / Contained und Full Width / Stretched */
.ast-plain-container .wp-block {
  max-width: 1180px;
} 

/* Width of "wide" blocks */
.wp-block[data-align="wide"] {
  max-width: 1180px;
}

/* Width of "full-wide" blocks */
.wp-block[data-align="full"] {
  max-width: none;
}

For the narrower blog posts I have a width of 800px, so one of these two layouts must be selected:

  • Boxed
  • Content Boxed

For the pages with full width I have entered 1180px, where the following two layouts are responsible:

  • Full Width / Contained
  • Full Width / Stretched

You need to adapt the two values to your circumstances.

Astra display Last Updated Date

This snippet shows you how to display the “Last Updated” date instead of the “Published” date.

Astra marks the datePublished and dateModified date as Schema markup, but only the creation date is visually displayed. If you want to change the displayed date to the update date, add the following code to your child theme’s functions.php:

/**
 * Display only last modified date in the post metadata.
 *
 */
function j0e_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$output       .= '';
	$output       .= ' ' . $modified_on . '';
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'j0e_post_date' );

Gist: https://gist.github.com/gmmedia/a969070af8f7fddc8012a277382a5722

Astra display Last Updated Date

This snippet shows you how to display the “Last Updated” and the “Published” date.

Modified: 02.03.2021 | Published: 13.04.2020

Astra marks the datePublished and dateModified date as Schema markup, but only the creation date is visually displayed. If you want to display the published date and the update date, add the following code to your child theme’s functions.php:

/**
/**
 * Astra Theme: Display last modified and published date in the post metadata.
 * See: https://bloggerpilot.com/astra-tipps-tricks/
 */
function j0e_post_date( $output ) {
	$output        = '';
	$format        = apply_filters( 'astra_post_date_format', '' );
	$published_date = esc_html( get_the_date( $format ) );
	$published_on   = sprintf(
		esc_html( '%s' ),
		$published_date
	);
	$modified_date = esc_html( get_the_modified_date( $format ) );
	$modified_on   = sprintf(
		esc_html( '%s' ),
		$modified_date
	);
	$output       .= '';
	$output       .= 'Modified: ' . $modified_on . ' | Published: ' . $published_on;
	$output       .= '';
	return $output;
}
add_filter( 'astra_post_date', 'j0e_post_date' );

Gist: https://gist.github.com/gmmedia/bc6ea0cc4923ba68a56697f6ea88a4a0

Tips and Tricks for Astra Suggestions?

Do you know any other cool snippets or tools for the Astra Theme?

C.O.P