Author 詩語

How to Build Advanced Websites Based on Custom Post Types with Toolset and Astra?

This article is contributed by Marine Larmier from the Toolset team. Thanks a ton, Marine!

Toolset allows you to create custom post types, and design content templates. Astra theme is Toolset custom types compatible, meaning that you can control theme settings per different template.

Below is a quick video that explain how Astra theme & Toolset work together:

In this step-by-step tutorial below, we will show you the power of Toolset when used with Astra, no extra PHP is required. We also have reference sites where you can experience it by yourself, for free. Simply activate Astra theme, and start to play with it.

Contents:

Getting Started – Installing Toolset pluginsAdd custom post types, taxonomies and fields to AstraCreate templates for custom post types using Toolset Types & BlocksAssign different Astra theme options to each template or archive you createCreate advanced custom searches and display results as a list using pagination or infinite scrolling, sliders and on Google MapsFront-end forms for submitting content and registering usersControl access to your content built with Astra: membership sites & personal accounts.Using Astra, Toolset & WooCommerce: Single product template, comparison and much more. Try Toolset (30-day money-back guarantee available if you aren』t satisfied!).

1. Getting Started – Installing Toolset pluginsWhen you purchase Toolset, you will notice that it comes with several components. Download and install the following plugins from your Toolset account.

Types – lets you create custom post types, custom fields, and custom taxonomies.Blocks – helps you display your custom content and archives on the front-end. It also allows you to design templates, build custom searches for your visitors, and more.Forms – and/or register a profile on your site. In addition, the WooCommerce add-on provides extra e-commerce functionality to your forms.Access – lets you add custom user roles and control where each user role can visit on the front-end.Maps – lets you display your content on Google or Azure Maps.WooCommerce Blocks – allows you to customize standard WooCommerce product and shop pages by creating your very own templates.

Note that depending on the kind of site you want to build (e-commerce for example) you will need to make sure you have certain Toolset component plugins installed.

Create a custom post typeIn our example, we created 「Tours」Add some custom fieldsNumber, Address, Checkboxes, Gallery, URL etc.Add custom taxonomiesTour types such as 「family friendly」, 「Food Experience」, etc.

Read Toolset documentation to learn more about how to set up more options for custom post types, taxonomies and custom fields.

3. Create Templates for Custom Post Types Using Toolset Layouts for Astra

Toolset Blocks is a drag-and-drop builder that allows you to create templates for your custom post types. Your design can be built directly within the WordPress block editor by using the various Toolset Design Blocks provided. From grids to images, repeating fields, view loops, conditional fields and so much more, you can create the perfect front-end displays for your custom content. As an example, all the tours will be dynamically updated using the same content template.

Final Content Template built with Layouts drag-and-dropTour in Venice on the front-end using my content templateTour in Amsterdam using automatically the same template

One template for all custom post types.

Learn more about how to design template for your custom post types with Toolset.

4. Assign Different Astra Theme Options to Each Template or Archive You Create

Under the layout you just created, you will find the Astra Theme Options section. Use Toolset to control the theme options for each template you created.  In our example, we will remove the header for all of our Tours:

Removing the header for the tours using Astra Theme Options section.Front-end results: Astra header is not displayed anymore.

5. Create Advanced Custom Searches and Display Results as a List Using Pagination, Infinite Scrolling, Slider or Google Maps

Toolset allows you to easily build custom searches based on custom post types and filters. This way, you allow visitors to filter the contents by different parameters you select. You』ll find below two examples of custom searches built with Astra and Toolset.

Learn more about how to build custom search with Toolset and Astra

And here are some examples of how you can display your contents on the front-end with Toolset and Astra:

My custom post types as a list with pagination. DocumentationMy custom post types on a map. DocumentationMy custom post types as a slider. Documentation

6. Front-end Forms for Submitting Content and Registering Users: Toolset Forms

Another possibility is to allow users to submit content from the front-end of their site built with Astra. For example, you can allow visitors to submit a tour, a property, a guest post, a testimonial, and much more.

You can also select the predetermine of each submitted post – i.e. published, draft, etc.

For more info on Toolset Forms』 vast array of options, take a look at this comprehensive free video course.

7. Control Access to Your Content Built with Astra: Useful for Membership, Privileges and User Roles.

Toolset allows you to have complete control over who can access the contents in your site, from the custom fields to the front-end pages, forms, and more.   Learn more about how to control what user can access or not according to his role and login status.

8. Using Astra, Toolset & Woocommerce – Create Custom Product Template, Products Comparison and Much More.

Design the templates for displaying your single WooCommerce Products as well as custom Product Listing pages.   Check out this free video course to learn how to develop custom WooCommerce sites with Toolset.

Where Does Astra Primary Color Setting Take Effect?

Astra offers a setting where you can set the main, default color that takes effect on several places.

To set the primary color, go to: Customizer – Global > Colors

The color that you set as primary is used for:

Links that you give from contentTo the background of the text when you select itBackground color to a buttonBackground color of the scroll to top iconBackground color of the hamburger menu in responsive modeTag cloud widget

Most of these elements above can have a different color from their respective settings.

For example, the background color of a button by default is taken from what you』ve set in the primary color. However, we offer a dedicated setting for you to change this in the customizer under Customizer – Global > Buttons.

Primary Color saves a lot of time as it gets applied to several areas without you having to set the color for every individual item.

How to Bulk Edit Astra Meta Settings on Multiple Pages & Posts at Once?

Sometimes, one might feel the need to update the Astra Page Meta Settings that are on individual pages / posts at once on multiple pages. For example, one might need to make the pages full width & disable the title if he is switching from another theme to Astra.

Of course, you can do that by going  in the backend of individual pages. But how convenient would it be if the site has large number of pages?

Steps to Bulk Edit Astra Meta Settings –

Install and Activate the Astra Bulk Editor plugin from WordPress RepositorySelect the pages or posts that you need to editClick on Bulk Action -> EditYou will find Astra Meta settings. Astra Bulk Editor plugin added those extra settings.Once done, you can remove this plugin as it has completed after it』s job.

Please keep in mind that, take a backup before using any plugins like Astra Bulk Editor which does large changes on the website to remain safe!

How to Add a Sticky Header or On-Scroll Fixed Header with Astra?

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.

The sticky header will fix the header in the top portion of your webpage when a user scrolls the page. It will allow quick access to the menu from any part of the page.

Note:

We have released Astra 3.0 which introduces the Header/Footer Builder which changes a few things, you can refer to the below video to know more.

Quick Steps on How to Add a Sticky Header or On-scroll Fixed Header with the Sticky Header ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Sticky Header module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Header > Sticky Header ] to edit module settings

It is a premium feature available with Astra Pro. You can activate the module from Appearance > Astra Options > Sticky Header

You can find the settings under Appearance > Customize > Header > Sticky Header

Sticky Header Settings

Stick Primary Header option will stick the default theme header. (?)

In case if you have enabled the Header Sections Module from Astra Pro, you will see options to stick the Above and the Below header section.

Enabling Stick Above Header Section or Stick Below Header Section will stick the respective header section to the top of the page scroll.

Sticky Logo and Logo Width

This allows you to choose a different logo for your Sticky Header than your site logo. Leave this empty if you want to use the same logo as your site logo. You can add normal as well as retina logo and can set easily set width with a slider.

If you have activated Colors and Background module from Astra Pro and have set a background color for Header from Appearance > Customize > Header > Sticky Header.

Then this background color will automatically apply to the sticky header. In this case, you can use the Sticky Background Opacity option to manage the opacity of the background color.

Enable Shrink Effect

It will shrink the sticky header height, logo, and menu size. Sticky Header will display in a compact size. It is useful when you have primary header quite large in height and you want it to be smaller when converting to the sticky header.

Select Animation Effect

Animation effect will appear on sticky header entry.

Display On

You can choose to display your sticky header either on desktop or mobile or on both.

Note: By default, the shadow will appear for a sticky header. If you want to remove it use the custom CSS.

.main-header-bar.ast-sticky-active {
box-shadow: unset;
}

Colors & Background for Sticky Header 

In the customizer under Header > Sticky Header all options are available. If you have a sticky primary header, respective options will appear. If Above and Below headers are set as to stick different options for them will appear.

How do I manage margin between paragraphs?

Astra theme version 1.0.18 introduces a new option in the Typography which offers you control over spacing between paragraphs.

Just navigate to Customizer – Global > Typography > Base Typography where you will find the setting as below:

Just tweak the setting and get the perfect space between the paragraphs as you need.

Further Read – http://blog.fonts.com/2017/01/paragraph-spacing/

How to Renew Yearly License?

Astra offers Annual and Lifetime licenses for various packages. In this article, let』s see how you can renew your annual/yearly license. 

Automatic Renewal Subscription

If you own an annual license for any of the Astra packages, it will be automatically renewed every year on the anniversary of the purchase date.

So with an automatic renewal subscription, you don』t need to take any manual action to renew the license. 

You can check the Renewal Subscription status from your store account under the licenses page. 

But in case, your automatic renewal subscription is not active or you have canceled it, below are the easy steps to renew license. 

Manual Renewal

Step 1: Log in to Store account and visit the Licenses page – https://store.brainstormforce.com/licenses/

Step 2: Click on the 「Renew License」 button and complete the payment process. 

This will extend the validity of your license for another year.

Related Docs –

How Do License Upgrades Work?How to Update your Payment Method?

Site Layout Overview

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.

Quick Steps to Create Site Layout using the Site Layouts ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Astra Options > Global > Container > Site Layout ] for Site Layout options and settings

You can activate the module from  Appearance > Astra Options > Site Layouts.

With Site Layout module, you can manage the overall layout of the website.

Once you activate the module you can find Site Layout setting under Appearance > Customize > Global > Container > Site Layout

The layout chosen will be applied to the outer wrapper of the site. The default layout will be 「Full Width」. Options available with Site Layout modules are explained in individual articles linked below.

Full-Width LayoutMax Width LayoutPadded LayoutFluid Layout

How to Disable or Change Position of the Featured Image?

Astra theme version 1.0.18 introduces a new option in the layout settings which offers you control the visibility of the featured images.

The options are provided for Blog / Archive pages as well as Single Posts and can be found in the customizer on locations as below:

Customizer – Blog – Blog / ArchiveCustomizer – Blog – Single Post

You can drag & drop the labels to switch the position of title & featured image; or simply click on the eye icon and disable it.

How to Increase PHP Time Limit for a WordPress Site?

What Is The PHP Time Limit?

The PHP Time Limit is the amount of time that your site will spend on a single operation before timing out. When an operation reaches the time limit set, then it will return a fatal error that looks like this:

Fatal error: Maximum execution time of xx seconds exceeded...

The default value for PHP time limit on most hosts for the PHP Time Limit is 30 seconds. You can increase this limit by following any of the methods mentioned below.

1. Most Recommended: Just Contact Your HostIncreasing the PHP Time Limit is complex and the process that differs from hosts to hosts. So it is always better to get it done from someone who knows it well. So just get in touch with your hosting company and they will be happy to do it for you.

2. Increasing PHP Time Limit via PHP.ini fileMany small shared hosted servers do not allow users to access the PHP.ini file. If you are granted access, you can directly increase the PHP Time limit through this file. If you wish to extend the limit to 300 seconds, you can enter the following line of code or update if it exists already:

max_execution_time = 300;

3. Alternative to editing PHP.ini through wp-config.phpThis is another alternative to the PHP.ini method. Simply add / edit the following line in the wp-config.php of your WordPress

set_time_limit(300);

4. Modifying the .htaccess fileSome of you might have the .htaccess file where you can simply add / edit this line of code to increase the time limit.

max_execution 300

P.S: 300 in the above code samples mean 300 seconds. Feel free to change this to any appropriate number.

How to Add Custom Javascript Code in Astra?

In this article, let』s take a look the ways to custom JavaScript code in Astra theme.

With Insert Headers and Footers Plugin:

Any JavaScript that is unrelated to the theme or design of the website; any code that you will need to have on the website even if you switch the theme — should always be added through a plugin. For example, you will always need the Google Analytics code present on your website regardless of the theme you』re using. But if you add the Google Analytics code in the theme settings now and switch the theme from Astra to something else later, Google Analytics code will no longer function.

So it is a best practice to install JavaScript unrelated to design and theme in it』s own independent plugin. Insert Headers and Footers is a free, popular and lightweight plugin that you can use to add JavaScript code.

With Free Astra Hooks Plugin:

Astra Hooks Plugin allows you to add your Custom Content, Shortcodes and JavaScript code in the various hook locations. Once installed, you will see a new tab in the Customizer.

To add Java script code in the head, use the wp_head locationTo add the code in the footer, use the wp_footer location.

Please visit the plugin page WordPress Repository to download and learn more about this plugin and how it works.

With Custom Layouts module in Astra Pro Addon:

If you have Astra Pro Addon, you don』t need to install another plugin to add JavaScript code.

Enable Custom Layouts Module (screenshot)Create New Post (screenshot)Enable Code Editor and add your code.Replace existing comments and paste your code (screenshot)Set other options as per your needs and save.

For most of the websites, configurations as below works great:

Layout: HooksAction: wp_head or wp_footer depending where you wish to add the codePriority: 10Spacing: 0Display On: Entire WebsiteUser Roles: All