How To Title Tags and Alt Text to Your Images

18 min read

Use Title Tags and Alt Text to Your Images

The addition of picture alt text assists search engines and screen readers in identifying an image’s content. Additionally, if your image fails to load for whatever reason, the alt text will be displayed instead, allowing visitors to understand what the image is supposed to be. The Title tag, on the other hand, is not as vital for SEO as the alt tag, but it is still quite important for usability.

When a user hovers his or her mouse over an image, the image’s title tag is displayed (as seen below). The title tag can be left blank, however the alt tag is nearly always required. To add an alt tag to an image using the Block Editor, click the picture and then go to the Block tab on the sidebar. Under image settings, you’ll find the setting for the alt attribute, and below that, in the advanced section, you’ll find the setting for the image title.

Title Tags and Alt Text

To access picture settings when using the old editor, click the image and then the pencil icon. From there, you should see the alt text and title settings.

Gutenberg Shortcuts

These Gutenberg shortcuts can help you easily navigate and format your content when using the new WordPress’s editor. To display Gutenberg shortcuts, press shift + alt + h (option + control + h for Mac). block editor shortcut keys

Add One or More Footer Widget Areas

Not every website supports footer widgets. So this tweak will help you add multiple footer widgets into your WordPress theme. Read the tutorial here.

Customize Login Page

There are several ways to customize your login page. If you want to change it via CSS, here’s a cheat sheet:

SelectorWhat it changes
body.loginEntire login page background
body.login div#login h1 aWordPress logo
body.login div#login form#loginformLogin form
body.login div#login form#loginform p labelUsername and password field label
body.login div#login form#loginform inputUsername and password input field
body.login div#login form#loginform input#user_loginUsername input field
body.login div#login form#loginform input#user_passPassword input field
body.login div#login form#loginform p.forgetmenotRemember me
body.login div#login form#loginform p.submit input#wp-submitSubmit button
body.login div#login p#nav a“Lost your password” text link
body.login div#login p#backtoblog a“Back to {site_name}” text link

You must develop a CSS file that has your unique styles in order to use this CSS. To save your own CSS file, we advise making a folder in the root of your WordPress installation. Then, for the custom CSS file to load, you must add a function to your theme’s functions.php file: function add action(‘login enqueue scripts’, ‘custom login style’, wp enqueue style(‘custom-login’, ‘PATH TO YOUR CUSTOM CSS FILE’); Remember to substitute the correct path for your CSS file in lieu of PATH TO YOUR CUSTOM CSS FILE.

Add Custom Page Template into WordPress

First, create a file called “mycustompagetemplate.php”.

You can name the file whatever you want as long as the filename extension is “.php”. Open this file in your favorite text editor and add this line:

<?php /* Template Name: My Custom Page Template */ ?>

This will inform WordPress that the file we are about to call “My Custom Page Template” is a template. Once more, you are free to add whatever you like following “Template Name” as long as it accurately describes its intended usage (i.e. Full Width Template, Red BG Template, etc). Place the file in your theme’s root directory (or whatever theme you plan to use this custom template on). Usually, this is “wp-content/themes/themename.”

When you try to create a new post or page after that, your personalised template will be available for choosing. Whatever you enter in the Template Name will serve as its name. However, as of right now, if you apply your unique template to a page, nothing will show up because our template file is empty. Let’s alter the content of the myscustomtemplate.php file to the following to make our template file display something:

<?php /* Template Name: My Custom Page Template */ ?>

<?php get_header(); ?>

<main id=”site-content” role=”main”>

<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); //

this is tested using twentytwenty theme, you may need to adjust the below code snippet to match your current theme get_template_part( ‘template-parts/content’ ); } } ?>

</main><!– #site-content –> <?php get_footer(); ?>

Now, apply the template to a page and see it display the page’s content properly. From here, you can make custom changes to this template by adding your own custom code snippets, custom styling, etc.

Add Infinite Scroll WordPress Trick

Adding infinite scroll to your WordPress site can be easily done by a simple trick, but it requires you to install the JetPack plugin. After installing the plugin, go to Jetpack > Settings then go to the Writing tab, and find the Theme Enhancements section.

infinite scroll

If this section is not enabled or if it’s asking for support, edit your theme’s function.php and add the following code snippet:

add_theme_support( ‘infinite-scroll’, array( ‘container’ => ‘content’, ‘footer’ => ‘page’, ) );

Now, the infinite scroll option in JetPack should now be present.

Disable Post Revisions

If for some reason, you don’t want to store post revisions (thereby reducing your database’s size), you can add the following line of code to your wp-config.php file: “WP POST REVISIONS” defined as false; You’re done after you save the file!

Install a Child Theme

A great approach to permanently customise your theme is by developing a child theme. If you frequently modify your website using the functions.php file, you are aware that the modifications you make are lost whenever the theme is updated. Using a child theme is one approach to keep them safe. The TwentyTwenty theme will be used as an illustration.

To create a child theme, access your root WordPress installation via cPanel’s file manager or via FTP and navigate to wp-content > themes. Inside that, create a new folder, give it the same name as its parent theme but with “-child” suffix (for example “twentytwenty-child”).

Related Post  How Can You Make Friends

Inside that folder, create a file called “style.css”. Inside it, paste the following:

/* Theme Name: Twenty Twenty Child Description: Twenty Twenty Child Theme Template: twentytwenty Version: 1.0.0 */

This notifies WordPress that a child theme based on Twenty Twenty is being created. The Theme Name and Template are necessary, but you can also enter additional parameters here. The template is the directory name of the parent theme, and the theme is the name of your child theme. That’s all, then! When you access your WordPress dashboard, your child theme ought to now be visible and activated. Create a functions.php file in the child theme’s directory and add your own code snippets there to add custom functions. Even when you change the parent theme, you won’t any longer lose your customised code fragments.

Delete Existing Post Revisions

You can easily delete existing post revisions by installing the plugin called “WP-Sweep”. After installing and activating that plugin, you can access it via Tools > Sweep. From there, you can find Revisions and click its corresponding Sweep button to clean post revisions.

Title Tags and Alt Text

If you’d rather not use a plugin and you’re comfortable using MySQL commands and using phpMyAdmin, the query you’ll want to use is: DELETE FROM wp_posts WHERE post_type = “revision”;Don’t forget to replace wp_ with your database’s WordPress prefix. Also, make sure you take a backup before you do this!

Add Featured Box Inside the Content

One of the best ways to add a featured box inside the content is by using a shortcode. Copy and paste the following code snippet to your functions.php file:

function content_featured_box($atts, $content = null)

{ return ‘<div style=”margin-bottom: 25px; overflow: hidden; padding: 20px; color: #919191;

background-color: #F0F8FF;

border-left: 8px solid #CEE1EF; font-size: 18px;”>’ .

do_shortcode($content) . ‘</div>’; }

add_shortcode(‘featuredbox’, ‘content_featured_box’);

To use this, simply use the short code [featuredbox]Your Featured Content Goes Here[/featuredbox]

and put your featured content in between (you can add HTML code). You can customize its appearance by editing the shortcode or by assigning an ID or class to the <div> element in the functions.php code and then giving it custom styling via your theme’s CSS editor (customize > additional CSS).

Show Related Posts

Displaying related material is one of the finest methods to keep visitors on your website interested. How, though, can you accomplish this on a WordPress website? There are various plugins available that can accomplish the task, including YARPP and JetPack (which we dislike because of the performance concerns it causes). Install one of these plugins to obtain related posts functionality out of the box if you want a solution that uses plugins. Continue reading if you want a do-it-yourself answer.

You must first make a child theme from your current theme. Once you’re done, copy the single.php or singular.php file from your parent theme and place it in the child theme’s folder. Create a file called related-posts.php and place the following code snippet within it in the child theme’s root directory. Four related posts are shown in this excerpt, sorted by category. This simple but effective question gets the job done.

<div class=”related-posts”>

<h4>You might also like:</h4>

<?php $related = new WP_Query(array( ‘category__in’ => wp_get_post_categories($post->ID) , ‘posts_per_page’ => 4, // number of related posts to display ‘post__not_in’ => array( $post->ID ) ))

; if ($related->have_posts())

{ while ($related->have_posts())

{ $related->the_post(); ?>

<div class=”related-posts-item”>

<a class=”related-posts-link” href=”<?php the_permalink(); ?>”>

<?php the_title(); ?></a>

<div class=”related-posts-excerpt”>

<?php the_excerpt(); ?></div>

<!– Display excerpt –> </div>

<?php } wp_reset_postdata(); } ?>


Then, in the single.php or singular.php file of your child theme, insert the following code snippet wherever you want related posts to appear. For example, you can put this right before the closing </main> tag.

<?php get_template_part(‘related’, ‘posts’); ?>

Finally, we need to style the new content. In your child theme’s style.css file, add the following code snippet:

.related-posts { margin: 2em auto auto auto; width: 70%; padding-bottom: 35px; text-align: center; }

.related-posts-link { padding: 5px 0; font-size: 1.65em; font-variant: small-caps; font-weight: bold; }

.related-posts-excerpt { margin: auto; padding-top: 10px; width: 75%; }

These styles can be configured to display your related posts however you wish. You have it now! Your theme now has a straightforward related posts functionality. You can change the query to display other content; for example, you could sort by publishing date to reveal the most recent updates or additions to the category’s content.

Erase Thousands of Unfiltered Spam Comments in Seconds

You might think it’s hard to get rid of all of your spam comments (maybe thousands of them) in seconds, but it’s not. WordPress has a built-in spam cleaner which you can easily access via Comments > Spam.

Title Tags and Alt Text

There should be an Empty Spam button in there which when clicked, will delete all spam comments.

Disable Admin Bar Access to all Users

On membership/community websites, the WordPress admin bar would frequently not be altered for end users. It could be required to disable admin bar access in such circumstances. Add the following to your theme’s functions.php file to prevent anyone, including the administrator, from accessing the admin bar: (false) show admin bar; The admin bar won’t show up when a logged-in user sees the front end of your website.

Increase PHP memory

To increase your WordPress site’s PHP memory limit, all you need to do is to edit your website’s wp-config.php file and add the following line right after the line that says

define( ‘WP_DEBUG’, false );

your debug might be set to a different value, but as long as the line says “WP_DEBUG”, it’s the right place.

define( ‘WP_MEMORY_LIMIT’, ‘256M’ );

Title Tags and Alt Text

The second option can be changed to any value you like, followed by the letter “M” for megabytes. For the majority of sites, 256M should be more than enough, but feel free to change depending on your requirements and hosting package. You’ve successfully increased the memory limit for your WordPress website after saving the file.

Disable Checking for Plugin Updates

If, for some reason, you want to disable WordPress plugin update check (maybe for performance reasons), all you need to do is to add the following code snippet to your theme’s functions.php file:

remove_action( ‘load-update-core.php’, ‘wp_update_plugins’ );

add_filter( ‘pre_site_transient_update_plugins’, create_function( ‘$a’, “return null;” ) );

Now you won’t get plugin update notifications anymore.

It’s not a good idea to leave this on for a long time because outdated plugins can put your site’s security at danger. Unless you have other methods for updating your site and reducing such dangers.

Increase/Decrease Maximum Upload Size through Media Uploader

You only need to add the following code to your site’s.htaccess file if you need to boost or decrease file uploads: 64M for the PHP variable upload max filesize 64M for post max size in PHP Your upload size will be increased to 64mb by the code above. You can adjust it to a value of 2M to reduce the upload size to 2MB or a value of 256M to boost it further to 256MB.

Related Post  Dropbox vs OneDrive

Add the following if your uploads fail to complete: max execution time 300 in php max input time 300 in php The default PHP script execution time limit is 30 seconds. PHP terminates scripts that run past the default time and logs an error. The aforementioned code fragments enable PHP scripts to run for up to 300 seconds. If you raise the upload size cap to a yet bigger file size, you might need to change it.

Redirect to a Maintenance Page

To inform visitors that your site is being updated or maintained, you might wish to redirect everyone to your maintenance page if you need to put it in maintenance mode. If your maintenance page is at, for instance, you must add the following code to your.htaccess file: # Send all visitors to the maintenance.html file

RewriteEngine on RewriteCond %{REQUEST_URI} !/maintenance.html$

RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123 RewriteRule $ /maintenance.html [R=302,L]

Everyone will now be sent to your maintenance page as long as this code is active in your.htaccess file. Don’t forget to take this out once your maintenance is over!

Custom Error Pages

All you have to do to make your own unique error pages is alter your.htaccess file to include a reference to them. /directory/your-error-file.html ErrorDocument # Change # to the error code, /directory/ to the location of your error file, and your-error-file.php to the filename of your error file. The code snippets below, for instance, declare specific error pages for 403, 404, and 500 problems.

Since there is no location specified and the files have the name “XXX-error.html,” it is assumed that they are located in the website’s root directory. # Error 403, 404, and 500 specific error pages 404-error.html in the error document 403-error.html is the error document. 500-error.html is the error document.

Highlight Author Comments

Sometimes, you want to make author comments stand out among the rest. All you need to do is to add a custom CSS via Appearance > Customize > Additional CSS: .bypostauthor { background: #eee; }This will highlight the author’s comment with a grey background. You can change it with whatever color you want and add additional styling.

Stay Logged-in for a Long(er) Period

WordPress automatically logs you in for two weeks if you click the “Remember me” box when checking in. For a year-long login session, add the following piece of code to the function.php file of your theme. If you want a time to be longer or shorter, you can convert any time to seconds and change as necessary. stay logged in for 1 year(); function return 31556926; / 1 year in seconds; add filter(‘auth cookie expiration’,’stay logged in for 1 year’);

Enable Shortcodes on Widgets

Shortcodes work out of the box on many widgets, but not all. To make sure that your widgets properly handle shortcodes, add the following code snippet to your theme’s functions.php file: add_filter( ‘widget_text’, ‘do_shortcode’ );

Change Excerpt Length

By default, the size of the excerpts in WordPress is 55 phrases. To change it, add the next code snippet in your theme’s features.php file: operate custom_excerpt_length( $size ) { return 20; } add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 ); This will change your theme’s excerpt size to twenty phrases as indicated by the road that claims return 20; however you possibly can change it to any quantity you want.

Display Most Commented Posts via Shortcode

Adding the following code snippet to your theme’s function.php file will allow you to display a list of your most-commented posts anywhere on your website.

function display_most_commented_posts()

{ // start output buffering ob_start(); ?> <ul class=”most-commented”>

<?php // Run WP_Query //

Change posts_per_page value to limit the number of posts //

Set ignore_sticky_posts value to 1 to not include sticky post //

this is because even if it has 0 comment, it will always appear on top //

if you wish to include sticky post, remove the parameter or set it to 0

$query = new WP_Query(‘ignore_sticky_posts=1&orderby=comment_count&posts_per_page=10’);

//begin loop while ($query->have_posts()) : $query->the_post(); ?>

<li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>

<?php the_title(); ?></a> <span class=”dmcp-comment-count”>

<?php comments_popup_link(‘No Comments;’, ‘1 Comment’, ‘% Comments’); ?></span></li>

<?php endwhile; // end loop ?> </ul> <?php // Turn off output buffering $output = ob_get_clean(); //Return output return $output; }

// create the shortcode add_shortcode(‘dmcp_most_commented’, ‘display_most_commented_posts’); //

be sure widgets settle for/parse shortcodes correctly add_filter(‘widget_text’, ‘do_shortcode’); Once you’ve added the code snippet and saved the file, now you can use the shortcode: [dmcp_most_commented]…anyplace in your web site and the list of the top 10 (or no matter worth you set to posts_per_page) most commented posts will likely be displayed.

Customize Texts After the Comment Form

Add the next code to your theme’s capabilities.php to customise the textual content after the remark kind. Replace the textual content with your personal most popular textual content. operate collectiveray_comment_text_after($arg) { $arg[‘comment_notes_after’] = “<div id=’cmtnotes’>We enjoy your constructive comments but please comment responsibly. Trolling, harassment or otherwise abusive behaviour will not be tolerated and further action will be taken as necessary.</div>”; return $arg; } add_filter(‘comment_form_defaults’, ‘collectiveray_comment_text_after’); The above instance will appear like this:

Title Tags and Alt Text

Identify Unused Tags

If you manually deleted posts utilizing SQL queries, the tags you used on these posts will stay in your database and grow to be unused. To determine your whole unused tags, run the next SQL question: SELECT * FROM wp_terms wterms INNER JOIN wp_term_taxonomy wttax ON wterms.term_id = wttax.term_id WHERE wttax.taxonomy = ‘post_tag’ AND wttax.depend =0; NOTE: should you use a unique database prefix in your WordPress web site (the default is wp_), be sure you change the above code snippet accordingly (particularly the wp_terms and wp_term_taxonomy phrases). Running the above question will return a list of all unused tags. You can then delete them safely out of your WordPress dashboard.

Remove Help and Screen Options from Dashboard

This WordPress trick removes unwanted clutter from your admin dashboard. The “help” and “screen” choices are located in the upper right corner of your WordPress dashboard.

Title Tags and Alt Text Add the following code snippets to your theme’s functions.php file to remove these items from the dashboard.

add_filter( ‘contextual_help’, ‘wpse_25034_remove_dashboard_help_tab’, 999, 3 );

add_filter( ‘screen_options_show_screen’, ‘wpse_25034_remove_help_tab’ );

function wpse_25034_remove_dashboard_help_tab( $old_help, $screen_id, $screen )

{ if( ‘dashboard’ != $screen->base ) return $old_help; $screen->remove_help_tabs(); return $old_help; }

function wpse_25034_remove_help_tab( $visible )

{ global $current_screen; if( ‘dashboard’ == $current_screen->base ) return false; return $visible; }

Show Popular Posts in the Sidebar

Place the code below in your theme’s sidebar.php file to display the five most popular posts based on the number of comments. If you wish to display a number greater than or less than 5, simply replace the value 5 in the $result line with the desired number.

<h3>Popular Posts</h3> <ul>

<?php $result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 5″);

foreach ($result as $post) { setup_postdata($post); $postid = $post->ID; $title = $post->post_title; $commentcount = $post->comment_count;

if ($commentcount != 0) { ?>

<li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”>

<?php echo $title ?></a> {<?php echo $commentcount ?>}</li> <?php } } ?> </ul>


Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge