WordPress Tutorials
for Website Developers & Designers
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,…
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…
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…
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…
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…
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:…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
Change ‘Leave a comment’ title H3 to H4 tag in Astra Theme
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…