Wordpress - identity design

Stop Losing Your Code — Use an Astra Child Theme!

djemals — Mon, 14 Jul 2025 00:44:57 +0000

If you’ve ever added custom functions to your functions.php file—only to find them gone after a few weeks—it’s likely because your parent theme (like Astra) was updated. WordPress themes often reset modified files during updates, which can cause your hard work to disappear. The solution? Use a Child Theme.

Why Your Code Disappears

When you add code directly to the parent theme’s functions.php, that file gets overwritten whenever the theme is updated—whether automatically or manually. If your carefully built features suddenly vanish, it’s time to switch to a Child Theme setup.

What is a Child Theme?

A Child Theme is a safe way to extend or customize a WordPress theme without touching the original (parent) theme files. It inherits everything from the parent theme, but allows you to add or override specific functionality—like custom functions, styles, or templates.

How to Install an Astra Child Theme in WordPress

You have two easy options:

Generate your own: Visit the official Astra Child Theme Generator and download a ready-to-use child theme ZIP file.
Download ours directly: Use our pre-made version here:
astra-child.zip

How to Install the Child Theme (Step-by-Step)

Log in to your WordPress admin dashboard.
Go to Appearance → Themes
Click the “Add New” button, then “Upload Theme”
Upload the astra-child.zip file
Activate the theme: You’ll now see “Astra Child” as an option

Where to Add Your Custom Code

Now that you’re using a child theme, open the functions.php file inside the child theme folder. This is where you can safely paste in your code snippets—such as custom shortcodes, script enqueueing, or other PHP-based logic—without fear of losing them after updates.

Bonus Tip: Astra Pro Compatibility

If you’re using Astra Pro, don’t worry—your Pro features are handled by the Astra Pro plugin and will continue to work regardless of whether you’re using the parent or child theme. Just make sure the plugin remains activated.

Final Thoughts

If you’ve ever experienced your functions.php customizations disappearing, it’s likely due to a theme update. The permanent fix is simple: switch to a Child Theme. It takes just a few minutes and protects your customizations for the long haul.

Need help? Reach out via our contact page and we’d be happy to assist.

The post Stop Losing Your Code — Use an Astra Child Theme! first appeared on identity design.

The post Stop Losing Your Code — Use an Astra Child Theme! appeared first on identity design.

How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain

djemals — Tue, 06 May 2025 05:54:58 +0000

How to Fix Missing Google Fonts After Changing Your Elementor Website Domain

If you’ve built your website using Elementor on a temporary domain and later connected it to your official domain, you might encounter an issue where Google Fonts are not loading or appearing broken. This is a common problem that usually stems from outdated internal URLs or cached files. Here’s a step-by-step guide to fix it.

Step 1: Update Elementor URLs

When changing domains, Elementor may still be referencing the old domain path for fonts and styles.

Go to WordPress Dashboard > Elementor > Tools > Replace URL
Enter your old URL (e.g., https://sitename.hostinger.com)
Enter your new URL (e.g., https://yourdomain.com)
Click the Replace URL button

Step 2: Regenerate Elementor CSS Files

Elementor stores styles in cached CSS files, which need to be regenerated after a domain change.

Go to Elementor > Tools > General
Click Regenerate CSS
Click Sync Library if necessary

Step 3: Clear Browser and Plugin Cache

Even after updating URLs, cached files from your browser or caching plugins might still cause issues.

Clear your browser cache (Chrome, Safari, Firefox, etc.)
Clear cache from plugins like LiteSpeed Cache, WP Rocket, or Autoptimize

Step 4: Check Font Load Status in Developer Tools

Use Chrome DevTools (F12) to inspect if Google Fonts are loading properly in the section.

Look for a tag like
Check the Console tab for any CORS or Mixed Content errors

Step 5: Ensure SSL and Mixed Content Are Correct

If your new domain lacks a proper SSL certificate or is loading resources over HTTP, Google Fonts may be blocked.

Ensure your domain has a valid SSL certificate installed
Use the Really Simple SSL plugin to force HTTPS for all content

Final Thoughts

By following these 5 steps, you can resolve most font loading issues after migrating your Elementor site to a new domain. The most critical action is using Elementor’s Replace URL tool to correct outdated paths in your styles and settings.

The post How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain first appeared on identity design.

The post How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain appeared first on identity design.

How to Suppress Errors and Warnings in WordPress for Emergencies

djemals — Wed, 06 Nov 2024 22:58:07 +0000

How to Suppress Errors and Warnings in WordPress for Emergencies

There are times in website development when errors or warnings start displaying on your WordPress site, sometimes affecting its look and functionality. If you’re facing a critical issue on your live site and need a quick way to hide these errors temporarily, WordPress allows you to suppress them in emergencies by adding a couple of lines of code.

Suppressing Errors and Warnings in WordPress

WordPress has a built-in debugging mode that developers use to catch issues. However, on a live website, you typically want this debugging turned off to prevent visitors from seeing backend issues. Here’s how to do it:

1. Locate `wp-config.php`

First, connect to your website using an FTP client or access your hosting control panel, then find and open the wp-config.php file, which is in the root directory of your WordPress installation.

2. Set WP_DEBUG to False

Make sure the debugging mode is off by setting WP_DEBUG to false. Look for the following line in your wp-config.php file:

define( 'WP_DEBUG', false );

3. Add the Suppression Code

Right after the WP_DEBUG line, add the following code to suppress any errors or warnings:

define( 'WP_DEBUG', false );
/*Suppress any errors or warnings*/
error_reporting(0);
@ini_set('display_errors', 0);

Here’s what each line does:

error_reporting(0); – This tells the server not to report any errors, effectively silencing warnings, notices, and error messages.
@ini_set('display_errors', 0); – This setting prevents errors from being displayed to users by setting display_errors to 0.

Why Use This Code?

When you’re in an emergency situation—such as if your site is displaying unsightly errors or breaking the layout due to warnings—this code can provide a quick solution. Keep in mind that it’s best to suppress errors only as a temporary measure. Long-term, you should address the underlying issues causing the warnings or errors to keep your website stable and secure.

Important Note

While suppressing errors can help in an emergency, it’s crucial to track down the source of any issues afterward. Hidden errors can make debugging more difficult and may affect website performance or functionality over time. For a better long-term approach, consider using a staging environment where you can fix issues without affecting your live site.

Conclusion

In emergencies, suppressing errors and warnings in WordPress is a helpful, quick solution to keep your site looking professional and functional. Just add the code above to your wp-config.php file after WP_DEBUG is set to false, and your visitors won’t see any backend issues on the front end. However, always remember to investigate and resolve any issues afterward for a stable, error-free site.

The post How to Suppress Errors and Warnings in WordPress for Emergencies first appeared on identity design.

The post How to Suppress Errors and Warnings in WordPress for Emergencies appeared first on identity design.

How to Disable / Maintenance Mode Your Website on WordPress

djemals — Sat, 19 Oct 2024 06:14:14 +0000

When working on your WordPress website, there may be times when you need to disable it temporarily for maintenance, updates, or major changes. Thankfully, WordPress offers easy ways to put your website into maintenance mode, ensuring visitors don’t see a broken or incomplete version of your site.

Disabling a Website in WordPress

In WordPress, there are a couple of ways to enable maintenance mode on your website. Let’s explore two common methods:

1. Using a Maintenance Mode Plugin

Plugins like “Maintenance” or “WP Maintenance Mode” are specifically designed for this purpose. With a few simple clicks, you can activate maintenance mode, display a custom message to your visitors, and work on your site privately.

Steps to follow:

Install and activate a maintenance mode plugin from the WordPress plugin directory.
Customize the settings such as the message and design for the maintenance page.
Activate the plugin to enable maintenance mode.

2. Enabling Maintenance Mode via wp-config.php

If you prefer not to use a plugin, you can enable maintenance mode directly by editing the wp-config.php file. Here’s how:

Connect to your WordPress site using FTP or through your hosting control panel.
Open the wp-config.php file, located in the root directory.
Add the following line of code just before the “That’s all, stop editing!” comment:

define('WP_MAINTENANCE_MODE', true);

Save the file and upload it back to your server.

This will activate a default maintenance mode page for your visitors while you work on your website.

Conclusion

Disabling your WordPress website temporarily for maintenance is a smart way to ensure that visitors don’t encounter incomplete or malfunctioning pages. Whether you use a plugin or a quick code addition, activating maintenance mode in WordPress is a simple task. Keep your site professional even when it’s under construction by using these techniques.

The post How to Disable / Maintenance Mode Your Website on WordPress first appeared on identity design.

The post How to Disable / Maintenance Mode Your Website on WordPress appeared first on identity design.

How to Add Deny Access to the .htaccess File

djemals — Mon, 08 May 2023 23:03:49 +0000

The .htaccess file is an important configuration file for websites that use the Apache web server. It allows you to control various aspects of your website, such as redirections, password protection, and caching. However, because the .htaccess file is so powerful, it is also a target for hackers and other malicious actors who may try to exploit it to gain access to your website or server.

One way to protect your .htaccess file is to add a “deny from all” rule to it. This will prevent anyone from accessing the file directly, including hackers who may be trying to modify it.

Here’s how to add a deny access rule to your .htaccess file:

1. Access your website’s .htaccess file

First, you’ll need to access your website’s .htaccess file. You can do this by connecting to your website’s server via FTP or SSH, and navigating to the directory where your website’s files are stored. The .htaccess file should be located in the root directory of your website.

2. Add the deny access rule

Next, open the .htaccess file in a text editor and add the following line at the top of the file:

#deny access to .htaccess

Order allow,deny
Deny from all

This rule specifies that access to the .htaccess file should be denied for all users.

3. Save the changes

Save the changes to your .htaccess file and upload it back to your website’s server.

By adding a deny access rule to your .htaccess file, you can help protect your website from malicious attacks and unauthorized access. However, it’s important to remember that this is just one of many security measures that you should take to protect your website. Be sure to keep your software and plugins up-to-date, use strong passwords, and implement other security best practices to keep your website secure.

The post How to Add Deny Access to the .htaccess File first appeared on identity design.

The post How to Add Deny Access to the .htaccess File appeared first on identity design.

Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide

djemals — Sat, 18 Feb 2023 00:51:44 +0000

An SSL (Secure Sockets Layer) certificate is a digital certificate that encrypts data and ensures secure communication between a web server and a client browser. It’s essential to renew your SSL certificate before it expires to maintain a secure connection on your website. If your website is hosted on a cPanel server, you can renew your SSL certificate using the AutoSSL feature in just a few simple steps. In this blog post, we will guide you through the process of renewing an expired SSL certificate with AutoSSL in cPanel.

Step 1: Log in to your cPanel account

The first step is to log in to your cPanel account. You can do this by accessing the cPanel login URL provided by your web hosting company and entering your cPanel username and password.

Step 2: Go to SSL/TLS Status page

Once you’re logged in, go to the SSL/TLS Status page. You can find it by using the search bar or by scrolling down to the Security section of the cPanel dashboard.

Step 3: Renew the SSL certificate

On the SSL/TLS Status page, you will see a list of all the SSL certificates installed on your server, including any that have expired. Check on all expired domain names and click the “Run AutoSSL” button. Wait for a few minutes until the “Success” sign appears. If it doesn’t work, you can try uninstalling the SSL certificate by clicking on SSL/TLS Status – “View Certificate” or SSL/TLS – “Manage SSL sites.” Then click “Uninstall.” Go back to the SSL/TLS Status page and reinstall the SSL certificate with “Run AutoSSL” again.

Optional for WordPress users: Add “Really Simple SSL” plugin and activate HTTPS for your domain.

If you’re using WordPress, you can add the “Really Simple SSL” plugin and activate HTTPS for your domain. The plugin will automatically detect your SSL certificate and configure your website to use HTTPS. This will ensure that all pages on your website are secure and encrypted. To add the plugin, go to the WordPress plugin directory and search for “Really Simple SSL.” Install and activate the plugin, and then follow the prompts to activate HTTPS for your domain.

And that’s it! By following these simple steps, you can renew an expired SSL certificate and maintain a secure connection on your website.

The post Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide first appeared on identity design.

The post Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide appeared first on identity design.

How to Add a Sitemap of a WordPress Website

djemals — Mon, 19 Sep 2022 09:28:47 +0000

Adding a sitemap for search engines is vital when launching a website unless you want to keep it secret. There are many ways to add a website’s sitemap, but using Yoast SEO plugin could be the easiest way to do it.

1. DOWNLOAD YOAST SEO PLUGIN

Go to Plugins -> Add New and search for the Yoast SEO plugin.
Download and activate it.

2. ENABLE XML SITEMAPS AND GET THE SITEMAP URL

Go to Yoast SEO from the left menu -> General
Enable “On” mode on the XML sitemaps.
Click on See the XML.
Copy the sitemap url.

3. SUBMIT A SITEMAP ON GOOGLE SEARCH CONSOLE

Add a new property (if you haven’t already) for the website you wish to submit the sitemap to on Google Search Console.
Go to Sitemaps from the left menu.
Add a new sitemap by pasting the sitemap URL from step 2 and click on Submit.
*The Status might show Couldn't fetch, but it will update.

The post How to Add a Sitemap of a WordPress Website first appeared on identity design.

The post How to Add a Sitemap of a WordPress Website appeared first on identity design.

YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area

djemals — Fri, 08 Jul 2022 22:20:07 +0000

YARPP (Yet Another Related Posts Plugin) is one of the greatest plugins in WordPress that provides related posts automatically using an algorithm, but there are a few things that can’t be easily fixed through its settings.

How to remove the “You May Also Like” header on the sidebar widget YARPP Plugin for WordPress?

I’ve tried many options in the settings, but they didn’t seem to work. Try using the CSS code below to remove it easily.

CSS

Copy the code below and paste it into your CSS document.

.yarpp-related-widget h3 { display:none; }

Tada!

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area first appeared on identity design.

The post YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area appeared first on identity design.

How to remove the “Related Posts” on YARPP Plugin for WordPress

djemals — Fri, 08 Jul 2022 22:12:20 +0000

YARPP(Yet Another Related Posts Plugin) is a one of the greatest plugins in WordPress that provides related posts automatically with algorithm, but there are a few things can’t be easily fixable on its setting.

How to remove the “Related Posts” on YARPP?

I’ve tried many options on their settings to remove the Related Posts on the bottom of a page, but it seems not working. Try below CSS line to remove it with ease.

CSS

Copy the code below and paste into your CSS document.

.yarpp-related-website { display:none; }

Tada!

The post How to remove the “Related Posts” on YARPP Plugin for WordPress first appeared on identity design.

The post How to remove the “Related Posts” on YARPP Plugin for WordPress appeared first on identity design.

How to Duplicate/Migrate WordPress Website – Duplicator

djemals — Tue, 10 May 2022 00:37:55 +0000

Work effective and save time if you are a web developer using WordPress. Duplicate your existing work and use as a template. Get Duplicator and install/active the plugin and follow the instruction below. We have 3 main steps to get all duplicate/migration process done.

1. BACKUP FILES & DOWNLOAD

Get Duplicator plugin
Duplicator -> Create new
Next -> Build
Download Installer.php and ...Archive.zip file

2. DATABASE CREATION ON NEW SERVER

Create Database from MySQL® Databases in cPanel.
Name your database. Add _wp at the end of the database name
Add a user, _user at the end of the database name
Add the user to the database you created. Finally add All Privileges to the user.

3. UPLOAD BACKED UP FILES TO NEW SERVER

Access cPanel on new hosting server. Go to cPanel -> File Manager. Select public_html or very root folder of your WordPress files -> upload your saved Installer and Archive files. (*You can also use FTP (Filezilla) to upload these files. )
Open a web browser -> http://YOUR-DOMAIN.com/installer.php
Select the checkbox, “I have read and accept all terms & notices*”
Select Remove all data and input your Database, User and Password and hit Test Database. If looks good, hit Next.
Click Next for step 4, Login the site with Site Login.

The post How to Duplicate/Migrate WordPress Website – Duplicator first appeared on identity design.

The post How to Duplicate/Migrate WordPress Website – Duplicator appeared first on identity design.

WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning)

djemals — Mon, 21 Feb 2022 09:14:04 +0000

Despite the popularity of its name, “Contact form 7” with millions of active installations, numerous plugin users have called out the error when hitting the submit button on the form. The error seems to be occurred by change of environment such as migration of the website. Here’s the solution how this can be resolved.

Go to the WP Admin (Backend) -> Plugins -> Plugin File Editor.
Select plugin to edit dropdown to select Contact Form 7 and select the file, wp-contact-form-7.php
On line 30 (the number can be different) after ‘WPCF7_LOAD_JS’, change true to false

Change of code in “Contact form 7” plugin

if ( ! defined( 'WPCF7_LOAD_JS' ) ) {
	define( 'WPCF7_LOAD_JS', false );
}

The post WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning) first appeared on identity design.

The post WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning) appeared first on identity design.

WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu

djemals — Mon, 11 Oct 2021 07:12:59 +0000

I’ve been searching how to remove/hide the cart bubble on hover of the cart icon on header in Astra / WooCommerce combination.

This can’t be modified via Appearance -> Customize setting. Instead, I was able to hide the element with a simple CSS line as below:

.ast-site-header-cart:hover .widget_shopping_cart, .woocommerce .ast-site-header-cart:hover .widget_shopping_cart{ display:none; }

Feel free to comment me if this doesn’t work for you.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu first appeared on identity design.

The post WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu appeared first on identity design.

Make Your WordPress into a Multisite (Create a Network)

djemals — Fri, 03 Sep 2021 23:09:27 +0000

WordPress website can be turned into a Multisite which a feature that enables you to manage a network of websites from one place. This feature is really useful for creating numbers of sub-sites like in franchise business where you share the basic information in one place but needs multiple WooCommerce sites to collect payments and get notification separately.

1. Deactivate all plugins

This is first thing you would have to do. Go to the WP Admin (Backend) -> Pluggins -> deactivate all your active plugins.

2. Edit WP-CONFIG.PHP

Open wp-config.php file using FTP or cPanel -> File Manager.

Find /* That's all, stop editing! Happy blogging. */ line in wp-config.php file (it’s on very end of the file)

/* Multisite */
define( 'WP_ALLOW_MULTISITE', true );

Copy the code and paste above, “That’s all…” in wp-config.php.

3. Create a Network on Your WordPress

Once you are done with the process #1 and #2, the Network Setup menu should appear on your WordPress Admin page -> Settings -> Network Setup.

Very careful on either choosing Sub-domains or Sub-directories method in your WordPress network as you can’t go back once selected. I prefer the Sub-directories method as it’s much easier, and I like my sub-sites URL go after the slash /.

What if the Sub-directory installation is not available?

I once had a hard time couldn’t figure out why sub-directory installation can’t be selected. But, it’s very simple as deleting some files. Once you see this message, just remove all your existing posts and pages from WP Admin. Empty upload folder if necessary, and come back to this page again. You’ll now able to select the Sub-directory installation.

4. Add Additional Codes to your WP-CONFIG.PHP

After you hit the Install button, WordPress will guide you what to add on your wp-config.php file with some additional lines. In my case, I had to add the following.

5. Add Additional Codes to your .HTACCESS

This step should also kindly described with #4. Open up the .htaccess file using FTP or cPanel -> File Manager. If you use cPanel’s File Manager, there is a chance .htaccess file be hidden. Go to the Settings menu and make “Show Hidden Files” active.

Paste the code you received from the WordPress Network Setup page. I only removed and replaced the highlighted lines as below.

Now, your WordPress site turned into a Multisite. Enjoy!

The post Make Your WordPress into a Multisite (Create a Network) first appeared on identity design.

The post Make Your WordPress into a Multisite (Create a Network) appeared first on identity design.

WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars

djemals — Mon, 02 Aug 2021 22:14:39 +0000

5 hollow stars looked my customers rated 0 star on my item not 5 stars. (But it’s 5 star rated though!) For users who sees hollow stars in WooCommerce, there must be mis-specifying font-family in your CSS.

Check if you have installed the “Easy Social Icons” plugin that is activated with WooCommerce.

Simply deactivate the plugin as it is conflicting the “Font Awesome 5 Free” font-family with WooCommerce. Once the Easy Social Icons plugin deactivated, you will see the full, filled star ratings on your item.

The post WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars first appeared on identity design.

The post WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars appeared first on identity design.

(Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel

djemals — Wed, 09 Sep 2020 07:11:35 +0000

Upgrading your PHP version might be a requirement, when upgrading your WordPress to the latest version or any related plugins. My firewall tool recommended me to upgrade my WordPress, which I did, and I saw this warning message (below) with the website being down. I was proceeding PHP upgrade from version 5.6 to 7.4 using the MultiPHP Manager in Cpanel.

Warning: Use of undefined constant WP_CONTENT_DIR – assumed ‘WP_CONTENT_DIR’ (this will throw an Error in a future version of PHP) in /home/XXXXX/public_html/wp-includes/load.php on line 115

Let me get to the point straight. The error was occurred by the auto-generated PHP handler (ver 7.4) from .htaccess that was conflicting with another PHP handler (ver 5.6) that was running simultaneously in the server.

My old PHP handler looks like this:

# Use PHP56 as default
AddHandler application/x-httpd-php56 .php

    suPHP_ConfigPath /opt/php56/lib

My new PHP handler looks like this:

# php -- BEGIN cPanel-generated handler, do not edit
# Set the “ea-php74” package as the default “PHP” programming language.

  AddHandler application/x-httpd-ea-php74 .php .php7 .phtml

# php -- END cPanel-generated handler, do not edit

In my case, the upgrade from the MultiPHP Manager was generating the 7.4 PHP handler in the public_html folder, and my old PHP version 5.6 handler was already existed in the folder above public_html which is above the root directory. That was the reason it was causing the error. You can’t run multiple PHP handlers for a single website.

My solution was to simply remove (or rename if you don’t want to delete the file) the .htaccess file (PHP 5.6) from one level above the root directory. Now it works like a charm!

The post (Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel first appeared on identity design.

The post (Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel appeared first on identity design.

Bootstrap Uneven Column Heights Issue in Layout Grid System

djemals — Wed, 17 Jun 2020 09:11:41 +0000

Bootstrap columns could go wrong and look uneven when columns have different heights. Use float: left to clear out the float properties and to stack blocks to the closest side.

.col-lg-3:nth-child(5n) { clear: left; }

If you have multiple blocks (for instance, 4-column layout) use float: left pseudo-element to apply the class every 5th element 5n.

The post Bootstrap Uneven Column Heights Issue in Layout Grid System first appeared on identity design.

The post Bootstrap Uneven Column Heights Issue in Layout Grid System appeared first on identity design.

CSS Only: Pop-up Modal Lightbox on Page Load

djemals — Fri, 10 Apr 2020 18:24:30 +0000

I’ve shared a way to add a pop-up or modal lightbox with CSS only on my earlier post, Easy Modal Lightbox Pop-Up. I’ve received many request how to make this modal pop up on page load instead of using a button. So, here’s how-to:

HTML

Copy the code below and paste into your HTML document.


   
      
         ×
         Modal Headline
         Modal description goes here.

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: block;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

.animate-opacity is optional as it’s the animated effect when modal opens.

You can tweak the animation time. It’s currently 0.8 seconds opac 0.8s , but change the timing as your need.

The post CSS Only: Pop-up Modal Lightbox on Page Load first appeared on identity design.

The post CSS Only: Pop-up Modal Lightbox on Page Load appeared first on identity design.

Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review

djemals — Mon, 09 Mar 2020 07:13:17 +0000

Very strange? I just made the reviews functionality active on my WordPress Woocommerce website, and I see the icons are broken with square boxes (some says “SSSSS”). There should be some CSS conflicts where the icon fonts were not properly loaded. So, I’ve came up overwriting some CSS styling including a new font-family to the page, and it’s working!

p.stars a:before, p.stars a:hover, p.stars a:visited, p.stars a:focus, p.stars a:hover~a:before, p.stars:hover a:before, p.stars.selected a:not(.active):before, p.stars.selected a.active:before, p.stars.selected a.active~a:before {
    font-family: 'star';
    content: '\53';
    line-height: 1.4 !important;
}

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review first appeared on identity design.

The post Star Rating Symbol Icons Show Broken or Square Boxes on Woocommerce Review appeared first on identity design.

Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme

djemals — Sun, 01 Dec 2019 06:10:59 +0000

Woocommerce offers one of a greatest E-Commerce template themes for free called, “Storefront“. From the Nav to checkout process, all required functionality in order to run an E-Commerce are ready for you to download and activate. But, one little thing is bugging at the bottom of the page, “Built with Storefront & WooCommerce.” line, however, it’s possible to get it out with a few lines of CSS.

Remove and replace copyright information on Storefront theme

footer .site-infos { display:none; } 				
footer .footer-widgets { border: 0 !important;	}	
footer .footer-widgets::after {  content: "© ADD THIS FOR YOUR COPYRIGHT INFO" }

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme first appeared on identity design.

The post Remove ‘Built with Storefront & WooCommerce’ with CSS lines on WordPress Storefront Theme appeared first on identity design.

Redirect HTTP Website to Secure HTTPS Website Using Simple .htaccess in cPane/Hosting

djemals — Wed, 13 Nov 2019 01:28:49 +0000

Check your website if it’s already HTTPS (SSL Certificate is) valid and active by changing http:// to https:// in the URL. If you find your website is already HTTPS active, then let’s make an automatic redirect so users can land on your secured page.

Open your cPanel -> File Manager -> public_html (or very top of your folder structure), and create a file, .htaccess. Add the code to the file and save:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Or download this in a file, unzip, add a period before like this -> “.htaccess”, and upload in your hosting/cPanel (or very top of your folder structure).

The post Redirect HTTP Website to Secure HTTPS Website Using Simple .htaccess in cPane/Hosting first appeared on identity design.

The post Redirect HTTP Website to Secure HTTPS Website Using Simple .htaccess in cPane/Hosting appeared first on identity design.

CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible

djemals — Thu, 31 Oct 2019 00:08:45 +0000

Sometimes the text or caption is not legible on an image depends on the color contrast between the foreground element and the background. I used to edit my image to be more darker or lighter to make the HTML text stand out and readable to users, but well, here’s must easier solution with lines of CSS!

Original

CSS Gradient

HTML

Copy the code below and paste into your HTML document.


    
        CSS Gradient

CSS

Copy the code below and paste into your CSS document.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://blog.identitydesign.us/wp-content/uploads/2019/10/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}

The post CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible first appeared on identity design.

The post CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible appeared first on identity design.

Add a Copyright Text / Info Using CSS on WordPress Websites

djemals — Thu, 19 Sep 2019 20:05:49 +0000

Let’s don’t bother spending hours to look for footer.php or widgets in WordPress to add your Copyright line on the footer of website. Here’s one easy method to add using CSS.

Add copyright text / info with CSS for WordPress/Bootstrap websites

footer > div:before {
    content: "© Copyright (YEAR). All rights reserved.";
    font-size: 14px;
    color: #777;
    text-align: center;
    display: block;
    margin: 20px auto;
}

The post Add a Copyright Text / Info Using CSS on WordPress Websites first appeared on identity design.

The post Add a Copyright Text / Info Using CSS on WordPress Websites appeared first on identity design.

How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template

djemals — Sat, 01 Jun 2019 00:30:06 +0000

WP Bootstrap Starter Theme is one of a popular templates you can get it for free in WordPress. It’s nice with light weighted built in Boostrap 4 framework so it’s ready to use just by having the theme itself.

You can pretty much edit the entire website including the header and footer except for removing the copyright text very bottom of the page saying, “Bootstrap WordPress Theme”.

Here’s a way to make it disappear by adding a CSS line. Let me show you how to do this in a minute!

Remove “Bootstrap WordPress Theme” text on the footer

Go to the Admin website -> Appearance -> Customize -> Additional CSS
Copy the CSS code below and paste on the CSS window.
Save!

footer .sep, footer .credits {
    display:none;
}

The post How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template first appeared on identity design.

The post How to Remove “Bootstrap WordPress Theme” on WP Bootstrap Starter Template appeared first on identity design.

(No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include

djemals — Mon, 29 Apr 2019 23:41:33 +0000

I’ve looking for this for years, but it’s actually much simpler than I thought. You can build your HTML website with universal header and footer (so you don’t have to repeat update multiple files over and over again) by adding a simple JavaScript/Jquery line without using any programming PHP scripts.

HTML







Hello World!

Instruction

Create a header.html and put all the header portion starting with .
Create a footer.html and put all the footer portion end with .
Create a index.html and copy and paste the HTML code (from the top of this article) into your HTML document.
Build your own content by replacing the text “Hello World!” and save.
Open the index.html and review yourself.

You can duplicate the index.html and rename it differently for any additional pages you wish to create. This JavaScript works on a server environment, so this will not be able to load header and footer if you are opening the files from your desktop which means you need to upload your files via FTP and access your HTMLs live.

Now, you’ve created a website without using any programming scripts.

The post (No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include first appeared on identity design.

The post (No Programming) Use JavaScript to Load Header and Footer Templates. Works Just Like PHP Include appeared first on identity design.

CSS / HTML: Make Absolute Center (Vertical & Horizontal)

djemals — Sat, 09 Feb 2019 01:05:02 +0000

For some reasons, making an article absolute center was pretty tricky with HTML.

Horizontal centering is mostly done by text-align:center or margin:auto tags in css. Vertical alignment has to do with positions or vertical-align:middle, and many times an image or other elements are not centering correctly.

Try this below, this is one easy way making your content elements absolute center in vertical and horizontal.

DEMO: Vertical & Horizontal Absolute Centering

Hello.
Your centered content is here!

CSS

Copy the code below and paste into your CSS document.

body {
	display: flex;
	justify-content: center;
	align-items: center;
        text-align:center;
}

Easy and fantastic!

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) first appeared on identity design.

The post CSS / HTML: Make Absolute Center (Vertical & Horizontal) appeared first on identity design.

CSS Only: Easy Modal Lightbox Pop-up (Animated)

djemals — Tue, 29 Jan 2019 19:50:57 +0000

Now you can add pop-ups or modal lightbox with CSS only (and really minor single line of JavaScript) on your html, wordpress or bootstrap website, so don’t be afraid.

DEMO: CSS Modal Lightbox

HTML

Copy the code below and paste into your HTML document.




   
      
         ×
         Modal Headline
         Modal description goes here.

You can add multiple modals. Copy the entire codes and replace all modal-1 into modal-2 and modal-3 …

CSS

Copy the code below and paste into your CSS document.

.modal {
	z-index: 10;
	display: none;
	padding-top: 100px;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.5)
}
.modal-content {
	margin: auto;
	background-color: #fff;
	position: relative;
	padding: 0;
	outline: 0;
	max-width: 600px
}
.modal-inner { padding: 20px 30px; }
.modal-close {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: absolute;
	right: 0;
	top: 0;
	background: #ccc;
	padding: 6px 10px;
}
.animate-opacity { animation: opac 0.8s }@keyframes opac{from{opacity:0} to{opacity:1}}

These 4 classes would do the job, and the last class, .animate-opacity is the animated effect when modal opens (so it’s optional).

You can tweak the animation time slower or faster by changing the speed time. It’s currently 0.8 seconds, opac 0.8s, but change it as you need it. Have fun!

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) first appeared on identity design.

The post CSS Only: Easy Modal Lightbox Pop-up (Animated) appeared first on identity design.

How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns

djemals — Tue, 28 Aug 2018 08:01:17 +0000

Your bootstrap top level menu will not be clickable when you add more menus under it like sub-navs or dropdowns. There are some How-Tos of adding a snippet of JavaScript or php online to make it work, but it seems to be risky and complicated.

Here’s a simple solution changing 1 word from your Bootstrap HTML file:

Change data-toggle to data-hover. Done!

If you use “Bootstrap-basic” theme on your WordPress, look for a file called, “BootstrapBasicMyWalkerNavMenu.php” under “inc” folder. Find the code “data-toggle” and replace with “data-hover“. Isn’t this super easy!?

The post How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns first appeared on identity design.

The post How to Make Bootstrap Nav Top Level Menu Clickable With Dropdowns appeared first on identity design.

How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image)

djemals — Sat, 28 Jul 2018 00:17:43 +0000

Here’s a simple html/css line that could generate a ribbon background with text.

DEMO: CSS Ribbon for Your Website

My Ribbon

HTML

Copy the code below and paste into your HTML document.


    My Ribbon

CSS

Copy the code below and paste into your CSS document.

.ribbon {
    position: relative;
    background: blue;
    text-align: center;
    z-index: 1;
    width: 240px;
    height: 52px;
    margin: 0 auto;
}
.ribbon-text {
    position: relative;
    display: block;
    font-size: 2em;
    color: white;
 }
.ribbon:before {
    content: '';
    border: 26px solid blue;
    border-left-color: transparent;
    border-left-width: 14px;
    position: absolute;
    top: 0;
    left: -20px;
}
.ribbon:after {
    content: '';
    border: 26px solid blue;
    border-right-color: transparent;
    border-right-width: 21px;
    position: absolute;
    top: 0;
    right: -27px;
}

You can tweak around with different colors and size of the ribbon. Have fun!

The post How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image) first appeared on identity design.

The post How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image) appeared first on identity design.

Force an Anchor Tag Not Clickable with CSS

djemals — Fri, 05 Jan 2018 20:28:26 +0000

Yes, it is possible to make your anchors not clickable with simple CSS lines on your website. I know sometimes you developers can’t change the core HTML codes and only have access to the CSS file. Below is the CSS that does the magic.

Make an Anchor Tag Nonclickable with CSS

a {
 pointer-events: none;
 cursor: default;
}

The post Force an Anchor Tag Not Clickable with CSS first appeared on identity design.

The post Force an Anchor Tag Not Clickable with CSS appeared first on identity design.

djemals — Tue, 04 Oct 2016 20:32:26 +0000

WordPress Theme users, let’s remove “Proudly powered by WordPress” from the footer of your website. It’s pretty simple. A line of CSS would do the job.

Remove “Proudly powered by WordPress” on Twenty Sixteen, Twenty Seventeen, Twenty Nineteen, Twenty Twenty-One Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
}

Replace YOUR WEBSITE NAME as you like.

footer.site-footer:after {
 content: "© YOUR WEBSITE NAME";
 margin: auto;
}

If you want to center align the Copyright line, add margin:auto like below:

Remove “Powered by WordPress” on Twenty Twenty Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.powered-by-wordpress {
    display: none;
}

Remove “Proudly Powered by WordPress” on Twenty Twenty-Two Theme

Open Up the CSS Editor:
(Go to the Backend page -> Appearance -> Editor)

.has-text-align-right {
    display: none;
}

Now it’s all good!

The post Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information first appeared on identity design.

The post Remove Proudly powered by WordPress Theme and Replace with Your Own © Copyright Information appeared first on identity design.

Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme

djemals — Thu, 08 Sep 2016 00:06:22 +0000

Woocommerce offers a well designed free template for everyone called, the Storefront. By adding the CSS codes below, you can remove the credits, “Storefront designed by WooThemes” without editing or deleting a line of the core programmings. So instead of deleting anything, you are just hiding the text actually. So it’s a risk free, easy and fast!

Remove “Storefront designed by WooThemes” Credits

Place the CSS line on the WordPress backend where CSS is located:
(Go to the Backend page -> Appearance -> Editor)

footer .site-info { 
 display: none !important; 
}
footer .col-full:after { 
 content: "© YOUR COMPANY NAME";
 font-size: 15px;
 color: #777;
 line-height: 140%;
 text-align: center;
 display: block;
 margin: 20px auto;
}

Now you’ll see the line, “Storefront designed by WooThemes” is gone. Feel free to edit the font-size and color of your own.

The post Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme first appeared on identity design.

The post Remove “Storefront designed by WooThemes” on Woocommerce Storefront Theme appeared first on identity design.

Make Clickable Link with JavaScript instead of HTML Anchor

djemals — Tue, 23 Aug 2016 00:08:29 +0000

Sometimes you just can’t edit the HTML but still need to make the div clickable. Here’s how with using JavaScript. *Jquery needs to be installed.

You need to replace .YOUR-CLASS-NAME with your div’s class and replace "YOUR-URL-LINK" with your destination link. Pretty simple, heh?

The post Make Clickable Link with JavaScript instead of HTML Anchor first appeared on identity design.

The post Make Clickable Link with JavaScript instead of HTML Anchor appeared first on identity design.

Remove automatic <BR> & <P> tags in WordPress

djemals — Mon, 20 Jun 2016 23:19:20 +0000

In general rules in HTML, ‘Return/Enter’ won’t line break your paragraph as you expected like in Microsoft Words. To get the line break, you have to put the code
. But, default setting in WordPress does the line break for you by hitting ‘Return/Enter’ button on the keyboard without the
code. It’s annoying sometimes because we are not used to it.

It’s really easy to turn automated
&

off on your WordPress. Go to Admin -> Appearance -> Editor -> function.php and copy & paste the following code below at very end.

Remove the Automatic
&
Tags

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

The post Remove automatic
&

tags in WordPress first appeared on identity design.

The post Remove automatic
&

tags in WordPress appeared first on identity design.

Remove Automatic and Tags in WordPress

djemals — Wed, 01 Jun 2016 00:10:49 +0000

The default setting on WordPress, your text will be wrapped around the code

and your ‘Return/Enter’ will line break your sentences.

This might be annoying to you because you don’t need that automated function.

It’s really easy to turn the automated

, off on your WordPress. Go to Admin -> Appearance -> Editor -> functions.php (or Theme Functions) and copy & paste the code very end of the file.

Stop Paragraph Tags and Line Break Filters

Copy this code and paste it very end of your theme functions.php file.

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

The post Remove Automatic and Tags in WordPress first appeared on identity design.

The post Remove Automatic and Tags in WordPress appeared first on identity design.

CSS Vertical Align Center

djemals — Wed, 16 Mar 2016 21:50:42 +0000

Let’s vertical align your design elements with CSS and HTML! Despite how popular people search for this method, vertical centering your contents seems not easy than you think for beginners. Below method could be the one of the simplest ways you can make it happen.

DEMO: How to Vertically Align Middle with CSS

Vertical Align Demo

Box One

Vertical Align Center

Box Two

Vertical Align Middle

Box Three

Vertical Align Center

HTML

Copy the code below and paste into your HTML document.


    
    Box One
    Vertical Align Center
    


    
    Box One
    Vertical Align Center



    
    Box One
    Vertical Align Center

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

The post CSS Vertical Align Center first appeared on identity design.

The post CSS Vertical Align Center appeared first on identity design.

Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme

djemals — Thu, 21 Jan 2016 00:02:54 +0000

Wocommerce offers the tabs: “Product Description”, “Reviews and/or “Additional Information” in the product detail page. Let’s find a way to remove or disable the tabs while you are using in the “Storefront” theme.

Remove “Product Description”, “Reviews” and “Additional Information” Tabs

Go to the backend -> Appearance -> Editor -> Find “storefront-functions.php” on the right. Input below code in the very bottom. “Update File” after adding the codes.

add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 );

function woo_remove_product_tabs( $tabs ) {

unset( $tabs['description'] ); // Remove the description tab
unset( $tabs['reviews'] ); // Remove the reviews tab
unset( $tabs['additional_information'] ); // Remove the additional information tab

return $tabs;

}

If you wish to keep one or two of the three tabs, just remove the corresponding line from the codes. Enjoy woocommerce!

The post Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme first appeared on identity design.

The post Remove Product Description and Reviews Tabs in Woocommerce Storefront Theme appeared first on identity design.

Resolved! Loading Your Google Fonts Over https (SSL) Sites

djemals — Wed, 06 Jan 2016 01:58:25 +0000

I couldn’t believe how amazingly simple it was! I was searching for days and nights how to make my google fonts properly load over on my WordPress https (SSL) site.

Here’s the basic story. I’m running an e-Commerce store with a Secure Sockets Layer installed on the domain. I created the logo with “La Belle Aurore” font from Google. When customers pay for their purchase, they have to land on the cart page showing https. My logo won’t be properly showing when my customer uses IE (Internet Explorer 11) browsers or my Safari from iPhones, so I really had resolve this issue.

I’ve seen some people trying to resolve the issue by creating weird code in the .htaccess file or tweaking the .function file in WordPress theme. I’ve tried it, but none of them actually worked for me.

Ta-Dah! It was simpler than I thought. I deleted the http: part on my CSS file, and it worked like magic! So DO “//fonts.googleapis.com/css?family=XXX”, NOT “http://fonts.googleapis.com/css?family=XXX”

@import url(//fonts.googleapis.com/css?family=NAME_OF_YOUR_FONT_FAMILY);

I used “La Belle Aurore” font on my site, so here’s what I have. @import url(//fonts.googleapis.com/css?family=La+Belle+Aurore); I hope this method save your time as well. Good luck!

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites first appeared on identity design.

The post Resolved! Loading Your Google Fonts Over https (SSL) Sites appeared first on identity design.

Quick Start Guide to MailChimp for WordPress

djemals — Mon, 13 Oct 2014 19:11:30 +0000

This post will be a quick start guide to MailChimp for WordPress plugin. You might use it to collect massive email data from the visitors of your website in order to send a blast of email for your personal or commercial needs. For beginners, MailChimp is a great place to start with your email campaign where that is available to “send 12,000 emails to 2,000 subscribers for free”.

1

Download the MailChimp for WordPress Plugin. https://wordpress.org/plugins/mailchimp-for-wp/ or go to your WordPress Admin -> Plugins -> Add New -> (Search for) MailChimp for WordPress -> Download & Activate.
2

Sign up MailChimp website for free. http://mailchimp.com/
3

Create and name your list. Go to the ‘List’ menu on the sidebar. Create a list.
4

Go to your name at the top of the sidebar and select ‘Account’.
5

Create API Key. On the top menu click ‘Extras’ -> API keys -> ‘Create A Key’
6

Copy the API Key you just created and Paste it onto your ‘MailChimp for WP’ (your WordPress Admin -> MailChimp for WordPress -> MailChimp Settings) then ‘Save Changes’
7

Check and make sure you see ‘CONNECTED’ sign on ‘MailChimp API Settings’. Click on the button -‘Renew MailChimp lists’
8

Go to the admin -> ‘MailChimp for WP’ -> ‘Checkboxes’ and check on the ‘MailChimp Lists’ box and save.
9

Go to the admin -> ‘MailChimp for WP’ -> ‘Forms’and check on the ‘Lists this form subscribes to’ box and save.
10

On the ‘Form’ setting page, copy the form shortcode below ‘Form mark-up’ and paste into any posts or pages you want to show your subscriber form, or you can use a MailChimp form widget to subscribe emails. (For widget users, go to the admin -> drag and drop ‘MailChimp Sign-Up Form’ to your widget sidebar.

11

Test your email. Once you actually test subscribing with your email, you would get a successful message “Thank you, your sign-up request was successful! Please check your e-mail inbox.”, but if miss any steps from above, you might see a message “oops. Something went wrong. Please try again later.”

Enjoy the MailChimp for WordPress plugin / widget!

The post Quick Start Guide to MailChimp for WordPress first appeared on identity design.

The post Quick Start Guide to MailChimp for WordPress appeared first on identity design.

Responsive Google Adsense is Easy!

djemals — Wed, 24 Sep 2014 21:42:51 +0000

We are facing a big transition in web design. In recent days, majority of well developed websites are made in responsive websites. Responsive design is the development responding to the environment based on screen size of a device. That being said the content elements must evolve to meet the technology as millions of bloggers are using Google Adsense technology to monetize their content.

Below is the HOW-TO guide to tweak the current Google Adsense code with the new responsive Google Adsense banners on your site. You don’t need to have a deep understanding of it’s frame work. Here’s an easy way to make it happen.

Our DEMO is here. Just look at the header section of this site. Do you see a wide horizontal banner (728 px x 90 px)? Try resize the browser to make it smaller and reload the page. Try even smaller like you are using a mobile and reload the page. Do you see the size of the ad is changing as it’s responding?

Let’s first take a look at your current Google Adsense Code below. You can get this code from Google Adsense Site → My ads (top menu) → “Get Code” from one of your ad unit.

Make sure you select “asynchronous” code type from the drop down menu.

1. You simply add a

around it.
2. Named the class to responsive-ad on the

3. Added the class responsive-ad to . So it’s now adsbygoogle responsive-ad.
4. Changed the style to display:block
5. You must replace data-ad-client numbers and data-ad-slot numbers with yours..
6. Added data-format="auto" before closing tag.
7. Add

The

Wordpress - identity design

Stop Losing Your Code — Use an Astra Child Theme!

Why Your Code Disappears

What is a Child Theme?

How to Install an Astra Child Theme in WordPress

How to Install the Child Theme (Step-by-Step)

Where to Add Your Custom Code

Bonus Tip: Astra Pro Compatibility

Final Thoughts

Related posts:

How to Fix Missing Google Fonts After Changing Your WordPress Elementor Website Domain

How to Fix Missing Google Fonts After Changing Your Elementor Website Domain

Step 1: Update Elementor URLs

Step 2: Regenerate Elementor CSS Files

Step 3: Clear Browser and Plugin Cache

Step 4: Check Font Load Status in Developer Tools

Step 5: Ensure SSL and Mixed Content Are Correct

Final Thoughts

Related posts:

How to Suppress Errors and Warnings in WordPress for Emergencies

How to Suppress Errors and Warnings in WordPress for Emergencies

Suppressing Errors and Warnings in WordPress

1. Locate wp-config.php

2. Set WP_DEBUG to False

3. Add the Suppression Code

Why Use This Code?

Important Note

Conclusion

Related posts:

How to Disable / Maintenance Mode Your Website on WordPress

Disabling a Website in WordPress

1. Using a Maintenance Mode Plugin

2. Enabling Maintenance Mode via wp-config.php

Conclusion

Related posts:

How to Add Deny Access to the .htaccess File

1. Access your website’s .htaccess file

2. Add the deny access rule

3. Save the changes

Related posts:

Renewing an Expired SSL Certificate with AutoSSL in cPanel: A Quick Guide

Step 1: Log in to your cPanel account

Step 2: Go to SSL/TLS Status page

Step 3: Renew the SSL certificate

Related posts:

How to Add a Sitemap of a WordPress Website

1. DOWNLOAD YOAST SEO PLUGIN

2. ENABLE XML SITEMAPS AND GET THE SITEMAP URL

3. SUBMIT A SITEMAP ON GOOGLE SEARCH CONSOLE

Related posts:

YARPP for WordPress: How to remove the “You May Also Like” header on the sidebar widget area

How to remove the “You May Also Like” header on the sidebar widget YARPP Plugin for WordPress?

CSS

Related posts:

How to remove the “Related Posts” on YARPP Plugin for WordPress

How to remove the “Related Posts” on YARPP?

CSS

Related posts:

How to Duplicate/Migrate WordPress Website – Duplicator

1. BACKUP FILES & DOWNLOAD

2. DATABASE CREATION ON NEW SERVER

3. UPLOAD BACKED UP FILES TO NEW SERVER

Related posts:

WordPress Contact Form 7 Submit Button Not Working (Nonstop Wheel Spinning)

Change of code in “Contact form 7” plugin

Related posts:

WooCommerce Astra: How to Disable Cart Bubble on Hover of the Cart Menu

Related posts:

Make Your WordPress into a Multisite (Create a Network)

1. Deactivate all plugins

2. Edit WP-CONFIG.PHP

3. Create a Network on Your WordPress

What if the Sub-directory installation is not available?

4. Add Additional Codes to your WP-CONFIG.PHP

5. Add Additional Codes to your .HTACCESS

Related posts:

WooCommerce Hollow “Empty” Star Rating to “Full” Filled Stars

Related posts:

(Resolved) Fix PHP / MultiPHP Version Upgrade Error in WHM/Cpanel

My old PHP handler looks like this:

1. Locate `wp-config.php`

Remove the Automatic
&
Tags