分类： 入门

Modify Your PHP Configuration

Occasionally, you might need to modify your website』s PHP configuration. You will be able to solve some issues or make your website work better. Also, some plugins you would like to add to your website might require more resources. This document shows you how to do it.

PHP and why it』s important?

PHP is a programming language used for writing WordPress. PHP makes it possible for WordPress to interact with the database and fetch data from it. It goes the same for your themes and plugins. 

These processes happen on your server before they are delivered to the browser, as PHP is a server-side language. 

PHP Limits and why do you might need to modify them?

Each WordPress installation comes with the default limits set by your hosting provider. These are usually optimal settings adjusted to the hosting services you use and will satisfy most of your websites』 needs.

As mentioned before, PHP can perform many different processes, and for all of these, it needs server resources. If, for example, you have some plugins that require more resources to function, they can take up most of the available resources, not leaving enough space for other plugins. Not having enough server resources will cause these plugins not to perform well.  

Once your website』s needs exceed the allocated resources, a fatal error happens on your website. Thus, to have all of your plugins function correctly, you would need to increase PHP limits.

Astra and Starter Templates – PHP configuration

Astra theme and Starter Templates require minimal resources to function correctly. Occasionally, it happens that your PHP limits are set too low for the plugins already running on your website, which can cause issues. If you see a fatal error message or have your Starter Template imports fail, please modify your PHP configuration to make more resources available for your website. 

These settings will ensure that there are enough resources on your website, even if you』re, for example, running some highly demanding plugins. These are not, in any case, the minimum required values, but these can be used as a configuration that would guarantee, in most cases, that your website has enough resources to function correctly:

memory_limit = 512Mmax_execution_time = 900max_input_time = 900post_max_size = 256Mupload_max_filesize = 720M

You can also try increasing your values gradually and checking if you can import your template successfully with those values:

For example, if your memory_limit is set by default to 128M – try changing it first to 256M, and check if your import goes well. If not, change the value then to 315M, and then to 512M, and so on.

Modify your PHP limits – Step 1

Modifying your server and website files can be challenging if you don』t have experience with this. Thus it』s always a good choice to contact your hosting provider and ask for assistance with this. Most hosting companies will help you with this. Make sure to mention the values for the PHP configuration which we suggested previously.

Modify your PHP limits – Step 2

There are several ways that you can modify your PHP configuration yourself. Depending on your host, these settings could be available through your admin panel (host admin, cPanel, etc.).

If not, you can change these values directly in the PHP.ini file.

Alternatively, if it suits you more, you can make these changes also in one of the following files:

wp-config.php.htaccess 

All of these files can be found in the root directory of your website. To access it, you would need an FTP client (like FileZilla, for example) installed on your computer and your website』s FTP access details.

How to access the files?

Before making any changes to any of your files, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong, you can always use this original file to start over.

We』ll use the FileZilla FTP client for this article, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let』s start:

Add your FTP access data to FileZillas』 Site Manager;Connect to your server;Navigate to your websites』 public_html (root) folder. Here you should find the files. 

How to modify your PHP configuration? 

Now that you have found your file (PHP.ini OR wp-config.php OR .htaccess), right-click on the file and select 「Download』 to copy the file to your computer.

Now you can edit the file on your computer. You can edit these files using some of the code editors like Sublime Text or Notepad++. 

Once you modified your file, upload it back to your server (using the FTP client), replacing the original file with this modified one, and your new values will become active.

Method 1 – modify PHP.ini

If you can』t find the PHP.ini file, you can create the file yourself. Some hosts do not allow users to access the PHP.ini file. In this case, you can ask your host to allow you to create a duplicate PHP.ini file in your directory or try. The data or values in the duplicate file will override those in the original PHP.ini file. 

You can create a new file named PHP.ini in the directory where your WordPress website is installed (your root directory). Once you have the file, please follow the instructions:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

memory_limit = 512M;
max_execution_time = 900;
max_input_time = 900;
post_max_size = 256M;
upload_max_filesize = 720M;

Step 3 – Save the file.

Note

Some servers will require a restart (Apache or Nginx) for php.ini changes to take effect. Also, depending on your server configuration, you』ll need to restart the PHP-FPM server process too. If you』re not sure how to do this, please get in touch with your hosting provider.

Method 2 – modify wp-config.php

Alternatively to modifying the PHP.ini file, you can modify the memory limit in your wp-config.php file, following these steps:

Step 1 – Open the file using the code editor;

Step 2 – Scroll down to the 「That』s all, stop editing! Happy publishing」 line;

Step 3 – Add the following value before that line:

define( 'WP_MEMORY_LIMIT', '512M' );

Step 4 – Save the file.

Method 3 – modify .htaccess

You can modify your PHP configuration also by using the .htacces file. Keep in mind that the .htaccess file may be hidden, so once you access your root directory using the FTP client, make sure you check the folder for the hidden files. 

To modify the file, follow these steps:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

php_value memory_limit 512M
php_value max_execution_time 900
php_value max_input_time 900
php_value post_max_size 256M
php_value upload_max_filesize 720M

Step 3 – Save the file.

Change Woocommerce Out of Stock Text

Astra adds a text 「Out Of Stock」 for the WooCommerece products that have 『Stock status』 as out of stock. Below is the screenshot of how the text displays in the front end on the product –

You can change the 「Out Of Stock」 text with any custom text you want, on both the Product Catalog (Shop page) and Single Product pages using filters.

You need to add the following filters to the functions.php file of your Child Theme:

Add the folowing code to change the 「Out Of Stock」 text on the Product Catalog (Shop page):

add_filter( 'astra_woo_shop_out_of_stock_string', 'out_of_stock_callback' );
function out_of_stock_callback( $title ) {
return 'SOLD';
}

Add the folowing code to change the 「Out Of Stock」 text on the Single Product pages:

add_filter( 'woocommerce_get_availability', 'change_out_of_stock_text_woocommerce', 1, 2 );
function change_out_of_stock_text_woocommerce( $availability, $product_to_check ) {
// Change Out of Stock Text
if ( ! $product_to_check->is_in_stock() ) {
$availability['availability'] = __('SOLD', 'woocommerce');
}
return $availability;
}

Both of these codes will replace the 「Out Of Stock」 text with 「SOLD」. You can modify this by replacing the bolded word 「SOLD」 in both codes with your custom text.

If you don』t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

How to Add Elementor Template to the Mega Menu?

You can create a Mega Menu with the Astra Theme and Astra Pro Addon. Furthermore, you can also use Templates for your mega menu instead or in combination with your textual menu items (links).

This document will show you how to add a template with WooCommerce product categories to your mega menu, using Elementor (free) and the Astra Pro Nav Menu module.

Note:

This solution is used for adding the Elementor template to the default header provided by the Astra theme. Please remember that this works only with Astra』s default header and Astra Pro Nav Menu module. If you are using the Elementor header instead, this solution will not be applicable.

Please follow these steps:

Step 1 – Make sure that you have the Elementor plugin and Astra Pro Addon installed and active. Also, make sure Nav Menu Module is activated in Astra Settings.

Step 2 – Navigate to Dashboard > Templates > Add New.

Step 3 – In the dropdown menu, choose 「Section」, name your template (this can be any name; we used 「Mega Menu Item 1」), and click 「Create Template」. This will create your new template and open an Elementor editor.

Step 4 – In Elementor editor, add a 「Section」 and the 「Shortcode」 widget. Add the following WooCommerce code to the shortcode widget:

[product_categories number=」4″ columns=」4″ hide_empty=」0″ orderby=」name」 order=」desc」]

This is the WooCommerce shortcode. You can find out more about it and possible variations in this article.

Using the Elementor Pro, you can use the Elementor 「Product Categories」 widget instead of the Shortcode widget.

Click 「Publish」 to save your template.

Step 5 – Now, it』s time to create a mega menu. To do this, navigate to Appearance > Menus. Expand the menu item under which you want to add a mega menu by clicking on it (we named this item 「Background Image」).

Step 6 – Click on the 「Astra Menu Settings」 button, and tick the checkbox for the Enable mega menu option. This will create a mega menu under this item. You can also style your mega menu in this step (width, padding, etc.)

Step 7 – Next, add a new menu item (we named it 「Shop by Categories」) under the mega menu and click on the 「Astra Menu Settings」 button.

Step 8 – In the Content Source dropdown menu, select the 「Template」 option. In the Template field, type in the name of your template and select it from the list. Click 「Save」 to add this template to your menu item.

And here』s how it』ll look on the front end.

Note:

We have provided Astra』s default CSS to fall back to Menu colors for all text in the template that doesn』t have color stylings assigned from the template. So we recommend applying styles from the template as per your design needs.

How To Remove Underlined Content Links on Buttons and Specifics Classes?

Since the Astra Theme version 3.6.4, you can underline the links in your content using the 「Underline Content Links」 option. This is a useful option especially from the point of your website』s accessibility for visually impaired users. Yet, you might not need to have all of your links underlined.

This document will help you remove underlined links on specific classes and buttons. 

Why Is This Important?

The Underline Content Links option allows you to accent all links on your website with just one click. You can find this option in the Customizer, under Global > Typography > Base Typography. Activating this option automatically adds underline text-decoration to your links.

At the same time, some page builder buttons or anchors don』t have an option for overriding the text-decoration. This can interfere with your design and influence the user experience on parts of your website. 

Thus, this document provides two codes that will help you remove the underline text-decoration on certain classes and buttons while keeping the 「Underline Content Links」 option active for the rest of your website.

How To Change This?

The two available codes will let you remove the underline setting for anchor links or remove it from just some specific elements.

To do this, you need to add one of the following custom codes to the functions.php file of your Child Theme.If you don』t have your Child Theme installed, please check this article on how to do it. 

If you are not sure how to add this code, please check this article.

1. Code To Remove the Underline Settings for Following Custom Anchor Links:

add_filter( 'astra_unset_builder_elements_underline', '__return_true' );

2. Exclude Specific Anchor Links From Underline Settings:

add_filter( 'astra_remove_underline_anchor_links', 'update_selectors_to_remove_underline', 10, 1 );

function update_selectors_to_remove_underline( $selectors ) {

$selectors = $selectors . ', a.my-first-anchor-tag, a.my-second-anchor-tag';

//.my-first-anchor-tag is an example class assigned to anchor link - add your selectors in this manner.

return $selectors;

}

You need to update the above code by replacing the example selectors with the ones from which you want to remove the text-decoration. 

To create your selectors add 「a.」 in front of the class name you wish to exclude from the underline setting. For example, if your element』s class is 「test」, the selector for these elements would be 「a.test」

Astra Pro WP CLI Commands

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Astra Pro Addon plugin adds support for some WP-CLI commands.

Activate your license of Astra Pro Addon using WP-CLI:

wp brainstormforce license activate astra-addon your-license-key-here

This article will be updated as we add support for more WP CLI Commands. Keep coming back!

Astra Typography Presets

The Astra Typography presets are premade sets of font properties that you can apply to your website with one click. This feature is available with the Astra Theme version 3.7.0 and later.

You can find the typography presets for your website by navigating to Appearance > Customize > Global > Typography.

What Are Typography Presets?

Presets are created by our team of professional designers. Thus, this feature provides you with a great combination of font families packed together with other font properties. Combined, these make your website look just perfect. Further, when you apply any preset it will modify all text on your website to match its style.

Each typography preset includes the following font properties:

Font FamilyWeightSizeLine HeightText Transform

Trying out different combinations of these settings over and over, searching for the right combination of settings can be tiring. On the other hand, you can let the typography presets do all the work for you. 

Moreover, all these settings will be applied to both your customizer typography options and your content, saving you time immensely.

How To Use Typography Presets?

Follow these steps to apply typography presets:

Step 1 – Navigate to Appearance > Customize > Global > Typography;

Step 2 – Click on the desired Preset to check it out. Immediately, click on the new preset will apply all typography settings to your Customizer options and your content.

Step 3 – After that, you can modify any of these settings even with the preset is applied.

Step 4 – Click the 「Publish」 button to save the changes.

If you need to revert the typography settings to your default settings (before using presets), you can use the 「Reset」 button:

How to Change the 「Scroll To Top」 Icon in Astra?

The astra_scroll_top_icon filter allows you to update the Scroll To Top icon class.

Usage

// Filter callback function
function example_callback( ) {
// Process you code here
return variable;
}
add_filter( 'astra_scroll_top_icon', 'example_callback', 10 );

Example

/**
* Add custom class to Scroll To Top
*
* @return string $classes
*/
function astra_scroll_top_icon_callback() {
$classes = 'fa fa-angle-double-up'; // 'fa fa-angle-double-up' replace with your class
return $classes;
}
add_filter( 'astra_scroll_top_icon', 'astra_scroll_top_icon_callback', 10 );

Note: To use 『fa fa-angle-double-up』 class you need to enqueue Font Awesome to your theme.

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file. 

Refer – How to Add Font Awesome Icons in Astra?

The Recommended Size for Featured Image Upload

Having a great featured image is a must, not only for your home page but also for every page and post. Furthermore, if you』re running an online shop, all your products must have great-looking product (featured) images to sell well. Therefore, using proper featured image size is greatly beneficial.

This document will help you avoid blurry and cut-off images. Learn how to get your images perfectly sized every time. Also, for more details, please check our Blog article on featured images. 

Why Is Featured Image Important?

Featured Image is most often the first point of contact between your content and users. Whether we』re talking about social media, browsing through your website, or any other search, the task of the featured image is to attract the user』s attention.

This image most often shows on the top of your posts, your website』s Blog Page, and related posts. Also, a featured image is often displayed when your content is shared on social media or as a message. 

The featured image gives a glimpse of the content in your post or page. Furthermore, it creates user expectations regarding the quality of your content as well as the offer. 

Also, with a bit of effort when designing your featured images, this becomes a chance to raise your brand awareness and stand out from the crowd.

Having said that, it』s clear why is it is crucial to make your featured image perfect every time.

Social Sharing

When your website content is shared on social media, your featured image will take a central role in attracting traffic, as it is shown together with the title whenever shared. 

Here, your images will be scaled proportionally. Thus, failing to set them properly may result in cropping, thus making parts of your image not visible.

SEO plugins like Yoast SEO or RankMath will provide you with options like adding a custom title and description for your posts, pages, and other content. Also, you could choose a different featured image, title, and description for sharing on Facebook or Twitter.

Set Featured Image

We explained the importance of featured images and how these are used. Now, let』s talk about featured image size and how to set things up.

To add a featured image to a page or a post, you will need to edit it. Once you start editing, choose a featured image in the page/post settings. As an example, we will explain how to add a featured image to a new post:

Step 1 – Navigate to Dashboard > Post > Add New;

Step 2 – On the right side of the screen, check the post settings, and scroll down to the 「Featured Image」 section;

Step 3 – Click on the 「Set Featured Image」 field, and select or upload your featured image;

Step 4 – Publish/Update doc to save featured image.

Featured Image Size

Featured image size may vary depending on the theme being used. With Astra Theme, we recommend uploading the image size of 1200 pixels (width) by 628 pixels (height):

Once you upload the image, WordPress will automatically create several versions of your original image, used for different screen sizes. 

Setting your original image to 1200 x 628 pixels will also help avoid some cropping issues on your website and social media both.

Uploading Right-Sized Image vs. Resizing

It is vital to have all of your images optimized as the size of the images impacts your loading times and overall website performance. Some great tools will do this for you. You can check our blog article to compare different image optimization plugins and choose the best tool for you.

On the other hand, though these tools are a great help, only up to a certain point. To achieve the best results, the image files should be already formatted the right way before uploading them to your website.

Using Hooks in Astra

Description

Hooks allow you to add extra functionality at various areas inside the theme. For example, you might want to display some promotional message below all of your blog posts. Hooks make such dynamic things possible.

Astra uses WordPress Hooks API to insert various hooks throughout the theme.

Usage

add_action( 'hook_name','callback_function_name' );
function callback_function_name () { ?>
// Insert your hook contents in here.
<?php }

In the example above, replace hook_name with the name of the hook you』re wanting to use, like astra_header_before or astra_header_after. Then replace callback_function_name with a unique meaningful function name, something specific to you.

To see the list of hooks available in Astra Visually, check out this site we』ve set.

Example

The astra_header_before hook is executed right before the Site Header.

Note: Site Header –

.

Add PHP to your header

// Add scripts to astra_header_before()
add_action( 'astra_header_before', 'add_script_before_header' );
function add_script_before_header() {
// Your PHP goes here
}

or…

Add HTML to your header

// Add content to astra_header_before()
add_action( 'astra_header_before', 'add_content_before_header' );
function add_content_before_header() { ?>

<?php }

If you are adding PHP to astra_header_before(), use the first method. Use the second method for anything else you may be adding.

Check out the doc that explains how to add custom PHP code using the child theme』s functions.php file.

How to Enable Debugging in WordPress (Debug Mode)

What is debugging?

When working with your website, different themes, and plugins, you』ll inevitably encounter some problems. These can sometimes consume hours of your time while trying to find out the root of the problem. This is where debugging can help. You can enable debugging in different ways, and this document will show you how to do it.

Installing a new plugin or theme, updating, or adding a custom code can cause conflicts. Some issues will show immediately and can even make your website temporarily unusable (e.g., the White Screen of Death). Others will show only in certain situations and will create issues with some functionality or plugin. These issues can often be solved by manually deactivating all of your plugins and re-activating them one by one. This way you can find which plugin is creating the issue. Further, you can switch to another theme to check if the issue is coming from that side. All of this takes a lot of time.

If you enable the debug mode, it will display a log of PHP errors and warnings. This can help you find the source of the issue you』re facing quickly.

You could even use this to prevent some issues. Some errors, if they exist, will only be visible in debug log even though everything seems fine on your website.

You can enable debug mode by using a plugin or manually. We will show you how to do it using both methods.

No matter which method you choose, It』s advisable to do this in your staging environment (same as your new installations, updates, etc.) as errors will become visible on both your frontend and dashboard. Thus, doing this on your staging environment will enable you to check errors and fix whatever issues you find without disturbing your visitors.

Method 1 – Enable Debugging using a plugin

If you』re not sure about working with your website files or find Method 2 just too complicated, the WP Debugging plugin is the right solution for you. You can enable debugging using the plugin by following these steps:

Step 1 – Navigate to Dashboard > Plugins > Add New;

Step 2 – In the search bar, type wp debugging;

Step 3 – Click the 「Install」 button on the WP Debugging card in the results. Once the plugin is installed, an 「Activate」 button will appear in the same place;

Step 4 – Click the 「Activate」 button;

Step 5 – Navigate to the Dashboard > Tools > WP Debugging;

Step 6 – Click on the check box next to the 「Set WP_DEBUG to true」 option and click on the 「Save Changes」 button.

Don』t forget to disable the debug mode after you』re done.

Method 2 – Enable Debugging using manually

Alternatively, if you prefer to do this manually and have no problem with editing your website files, or you』re locked out of your website (e.g., White Screen of Death) and don』t have another option, we will show you how this could be done by editing your wp-config.php file.

How to access the wp-config.php file?

Before making any changes to any of your files, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong, you can always use this original file to start over.

For this article, we』ll use the FileZilla FTP client, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let』s start:

Step 1 – Add your FTP access data to FileZillas』 Site Manager

Step 2 – Connect to your server

Step 3 – Navigate to your websites』 public_html (root) folder. Here you should find the found your wp-config.php file.

Step 4 – Right-click on the file and select 「Download』 to copy the file to your computer.

Step 5 – Open the file using the code editor to edit the file. You can edit the file using some of the code editors like Sublime Text or Notepad++.

Step 6 – Scroll down to the 「That』s all, stop editing! Happy publishing」 line

Step 7 – Add the following value before that line and save changes:

define( 'WP_DEBUG', true);

define( 'WP_DEBUG_LOG', true);

Step 8 – Once you modified your file, just upload the file back to your server (using the FTP client), replacing the original file with this modified one.

By following these steps, you will enable your debug mode and create a debug.log file where your errors will be saved.

To disable the debug mode once you』re done, repeat the steps for enabling, just this time, either completely remove the previously added code or modify it as follows:

define( 'WP_DEBUG', false);

How to use debugging?

If you』re trying to debug some issue you』re currently experiencing, you』ll need to repeat the steps that led to this issue once your debug mode is enabled. This will make a new error log, and you』ll be able to check it out.

Viewing the debug log

Method 1 – Using the plugin: click on the 「Debug Quick Look」 menu in your admin bar on the top of your Dashboard screen. In the dropdown menu, click the 「View File」 option. This will open a new tab showing the errors in the debug log.

Method 2 – Manually: access your site files and navigate to the following path public_html/wp-content/debug.log – open the file to view the errors in the debug log.