WordPress Tutorials
for Website Developers & Designers

astra blog page ads after posts

Display advt after specific post on Blog Page in Astra theme

January 23, 2020

Do you want to display advertisement after a specific number of posts on the blog page? This can be achieved in the Astra theme using custom code. Besides executing ad code, you can use the same code logic to display any content between posts listing on the blog page. Display ads between posts on Blog Page In the WordPress Dashboard,…

Astra author image before author name

Show Avatar image before the Author Name in Astra theme

January 22, 2020

Do you want to display the author image next to the author name in the post meta area under the post title in the Astra theme? By default, only the text-only author name display in that location. However, using a few lines of code can help you add author image next to the author name. Preview: Avatar photo next to…

woocommerce astra cart button on hover

Show ‘Add to Cart’ button on image hover in WooCommerce on Astra

January 21, 2020

Do you want to display a quick “Add to Cart” button on hover over WooCommerce product images while using Astra theme? This small change can make your WooCommerce store more user-friendly by allowing easy “add to card” action. Preview: Add to Card button on hover Minimum Requirements: Astra Theme Astra Pro add-on WooCommerce Enable Quick View Button Go to Appearance…

astra gutenberg editor custom layouts

Enable Gutenberg Blocks Editor for Custom Layouts in Astra theme

January 20, 2020

Custom layouts in Astra theme is a very handy feature allowing you to display layout or content at a specific location or parts of the theme layout. By default, Gutenberg block editor is not enabled for custom layouts in the Astra theme. However, you can enable it to use blocks editor for creating content using custom layouts in the Astra…

astra menu description text code

Show Description Text under every Menu Item in Astra Theme

January 17, 2020

Want to add additional description text below every menu item in the header area of the Astra theme? This can be achieved using the description option in WordPress. Once you enable this option, output this description text using custom PHP code and style it using custom CSS code. Preview: Menu items with Description Text Enable Menu Description option By default…

beaver visitors country location conditionals

Show row or module based on visitor country location in Beaver Builder

January 16, 2020

Do you want to display content in Beaver Builder layout based on visitor country (code) location? Beaver Themer addon provides a lot of conditional options but such location-based targeting is not available by default. However, this can be implemented via Conditional Logic API. To implement this, we shall build conditional logic “User Country Code”. Preview: User Country Code conditional First:…

beaver themer acf shortcode

Shortcode to output ACF custom fields in Beaver Themer

January 15, 2020

Do you want to output ACF custom field value manually using a shortcode in a Beaver Builder layout? By default, modules in Beaver Builder allows you to connect to specific custom fields of your choice with simple click routines. However, for an even more custom approach, you can output custom field values manually using easy shortcodes. Example Shortcode for ACF…

astra leave comment h3 h4 title tag

Change ‘Leave a comment’ title H3 to H4 tag in Astra Theme

January 14, 2020

By default ‘Leave a Comment’ title is H3 tag in the Astra theme. You can easily change this to a different headline tag say H4 using custom code. Following code will change ‘Leave a Comment’ title tag from H3 to H4. PHP Snippet: Leave a comment from H3 to H4 tag In the WordPress Dashboard, go to Appearance > Theme…

WooCommerce move reviews tab

Move Reviews tab before the description on WooCommerce product pages

January 13, 2020

Show ‘reviews’ tab as the first tab among ‘description’ and ‘additional information’ tabs on a WooCommerce website to give more visibility to reviews. We have already seen the different approach for more reviews visibility by showing reviews separately out of the tabs section. Now, let move the ‘reviews’ tab position in the tabs section on WooCommerce product pages. Preview: Before…

beaver themer acf smart slider

Connect Smart Slider 3 ACF field type with Beaver Themer layout

January 13, 2020

Want to display sliders created with Smart Slider 3 plugin in your Beaver Themer layout? You can easily make this connection with the power of custom fields created with ACF Pro plugin. Here is the quick procedure to get going. Create Custom Fields with ACF Pro Plugin First, we shall create a custom field of Smart Slider 3 type field…

beaver themer footer year shortcode

Add self updating current year in Beaver Themer Footer layout

January 10, 2020

We are in the new year, but one can still find a lot of websites displaying the previous year in the footer area next to the copyright disclaimer text. If you are building the footer layout template using Beaver Themer addon, then you can easily switch from manual year text to self-updating current year using a quick shortcode. Shortcode to…

woocommerce sperate reviews tabs

Display product reviews separately outside the WooCommerce tabs

January 9, 2020

By default description, reviews and additional information show in one ‘tabs’ section in WooCommerce. Want to display ‘reviews’ outside this ‘tabs’ area separately for more user engagement and visibility? You can quickly implement this, and it also looks cool. Preview: Reviews outside WooCommerce Tabs PHP Code: Separate Reviews section In the WordPress Dashboard, go to Appearance > Theme Editor and…

astra remove website field comment form

Remove Website field from the Comment Form in Astra theme

January 8, 2020

The website field is a common component of the Comment Form in any WordPress theme including Astra Theme. Removing the website field may be required in cases when you want to prevent the commenting user from adding their website URL. A few users do it for SEO reasons and here is an easy way to achieve this. PHP Snippet for…

genesis social icons menu essence theme

Add Social Icons to right side of Menu Button in Essence Pro Genesis theme

January 8, 2020

By default, the Essence Pro Genesis Theme displays a full-screen overlay menu on click of the menu button. Do you want to add social icons next to this menu button to give better visibility to your social profile links? Here is how to add Facebook, Twitter, and Instagram icons to the theme header area. Before and After PHP Snippet: Replace…

Fluent Forms center align input labels

How to center align input field labels in Fluent Forms

January 7, 2020

By default labels in input fields of Fluent Forms is left aligned. There is a no default option to center align but it can be achieved easily with a few lines of CSS code. Ideally, center align of labels would look odd from the user experience perspective. However, if you still want them center align, here goes. CSS for all…

woocommerce image zoom effect

Remove image Zoom Effect on WooCommerce products in Beaver Builder Theme

January 7, 2020

By default images displayed on WooCommerce product pages have a zoom effect.  An image will zoom on mouse hover by the user. You can easily disable this zoom effect using a few lines of code. PHP Snippet: Removes Zoom Effect With your Beaver Builder child theme active, go to Appearance > Themer Editor in the WordPress dashboard. Then open the…

beaver row sticky on scroll

Make Beaver Builder row Sticky to Top on scrolling

January 6, 2020

Want to make the content of a specific row stick to the top on scrolling down page layout made with Beaver Builder? This functionality can be implemented using code from Sticky jQuery plugin. An ideal use case, when using the menu module within the layout that sticks to the top automatically on user scrolling for better visibility and good user…