How to Format Hyperlinks in WordPress | Underline | Change Color | Change Hover Color

How to Format Hyperlinks in WordPress

If you are looking on how to format hyperlinks in WordPress, you have come to the right post. This post will give you all the information on how to format and change the appearance of the hyperlinks on WordPress website – whether it is underlining the hyperlink, changing its color or changing the hover color.

Hyperlinks are an important element in any blog post. They can be used to give your users easy access to great content both from within your website (internal links) or even on same page and externally. They also have SEO benefits.

However, many people don’t get the formatting right when it comes to hyperlinks. The thing about the hyperlink is that it should produce clicks. And the way to do this not only use them at the right place with the right anchor text, but also make sure they stand out from the other content on the page. You can use a couple of cool formatting options like change their color, underline, bold etc. to do this.

So how to format hyperlinks in WordPress? You can format hyperlinks either manually in WordPress editor or automate this by using a CSS. Moreover, your WordPress theme may also give you some ready made formatting options when it comes to way the hyperlinks appear on your website.

Let’s talk about this in detail-

First of all, it is helpful to understand some basic information about Hyperlink element in HTML (even if you don’t know anything about HTML, this is just a context)

Any link that you create in WordPress is represented by <a> tag and has the following HTML code

<a href=”URL”> Link Text (also called Anchor Text )</a>

where

  • the URL is the destination URL where the user will jump to on clicking the link
  • the anchor text is the text which is used for the hyperlink. For e.g. “Click here”

If you don’t understand this, don’t worry. Just keep in mind that any link is represented by “a” element.

Formatting Hyperlinks using CSS

CSS is the code that controls the way the content is displayed of the webpage. You don’t need to understand HTML code to execute CSS. It’s mostly a copy paste job, but understanding HTML gives you a context and can helps to customize this code further.

As explained above, since the hyperlinks are represented by “a” element. That’s why any CSS we apply to format hyperlinks uses the “a” syntax.

Note: The CSS that I have mentioned in this post works fine on Generate Press and few other themes. And this CSS formats hyperlinks on any WordPress Post (you will see .single-post in the code) and not for pages. However, you can customize this CSS to make it work for your theme.

The way to add CSS is same for most websites and is very easy.

Just go to Appearance tab on WordPress Dashboard and Select Customize. Then select the “Additional CSS” option and copy paste the relevant CSS code

Underlining your Hyperlinks

You can underline your hyperlinks either manually by just selecting the text of the hyperlink and pressing CTRL + U. This is similar to formatting that you do on Google Docs or Microsoft Word.

However, if you want to automate this, you can underline hyperlink by using below CSS:

.single-post .entry-content a {
text-decoration: underline;
}

Remember, that the above code works for your blog posts and NOT on pages like About, Privacy page etc.

You can add this CSS by going to Appearance (on WordPress Dashboard)-> Customize > Additional CSS

Simply copy paste the above code and save it. See the magic as you will find every link you create on the post is now underlined automatically.

Changing Color of Hyperlinks

Now changing the color of hyperlink is similar to changing the color of any normal text. You can select the text of the hyperlink and change the inline text color by using a simple plugin called “Advanced Rich Text Tools for Gutenberg

Alternatively, you can also use the CSS below to automate the color of every hyperlink. The below CSS applies a dark blue color to hyperlink. You can change the color ‘darkblue’ to any other color of your choice

.single-post .entry-content a {
color: darkblue,
}

Example of a website which does this really well is Yoast.com which has all its hyperlinks underlined and formatted in blue color which stands out from the text.

Note that in some themes like GeneratePress, you get a default option to change the color of any hyperlink. You can do this by following the path below:

Appearance -> Customize-> Color->Link Color

Changing the Hover Color of Hyperlinks

Hover color is the color you see when you move your mouse cusor over the hyperlink. It can be the same color as th text of your hyperlink or any other color,

Usually, people like to have a different hyper color to draw attention to hyperlink.

.single-post .entry-content a:hover {
color: red,
}

Note that in some themes like GeneratePress, you get a default option to change the color of any hyperlink. You can do this by following the path below:

Appearance -> Customize-> Color->Link Hover Color

Changing the Color of Clicked Hyperlink

You may also want to apply a different color for a hyperlink when it is clicked. This helps a visitor to understand the links which he has already visited.

For this, you will have to use a CSS as below, This changes the color of the link once clicked to red. You may choose to use any other color of your choice.

.single-post .entry-content a:visited {
color: red,
}

Changing the Color of Clicked Hyperlink

You may also want to apply a different color for a hyperlink when it is clicked. This helps a visitor to understand the links which he has already visited.

For this, you will have to use a CSS as below, This changes the color of the link once clicked to red. You may choose to use any other color of your choice.

Making Hyperlink Bold

You may also want to make your hyperlink bold in some situations.

For this, you can use a CSS as below:

.single-post .entry-content a {
font-weight: bold;
}

How to remove underline from hyperlinks

You may face an issue that your WordPress theme applies a default underline to hyperlinks.

In such situations, you can use the CSS below to remove underline and other formatting from the hyperlink.

.single-post .entry-content a {
text-decoration: none;
}

Wrap Up

You can use the above options to format an style your hyperlinks to make them stand out . A little bit of CSS is all it takes to automate the formatting and make it consistent across your website.

How to Add Menu in WordPress 2020 [Easy Guide]

How to Add Menu in WordPress

A menu is one of the most basic things to have on your website. This simple guide will walk you through the steps on how to add a Menu to your WordPress website.

Menu (also called as Navigation Menu) makes it easy for your website visitors to find important pages on your website.

How to add menu to WordPress? You can add menu by going to the Menus in the Appearance section of your WordPress Dashboard.

We will walk you through the complete details on how to go about setting the menu.

Usually, the menu is added to the header section of your website which is the main navigation menu and consists of links to your website content.

A menu can consists of different items like the different pages on your website e.g. Home, About , Contact Page etc. You can also display categories in your menu like a Free Download section or a Blog section in case of Local Business Website.

The common pages of website to have one the menu are the Home, About, Contact, Privacy Policy, Disclaimer pages etc. whose links you will find in most navigation menus.

You can also display certain menu items in the footer instead of having it in the main navigation menu.

Now before going ahead to add a menu, make sure that you have created these items first which are to be shown on your menu i.e.

  • For Pages-Make sure you have created the Home Page, About, Contact pages
  • For Categories- Make Sure you have created the categories

Note for this guide, I am using the free standard WordPress Twenty Twenty Theme but these steps usually work for most of the themes.

Steps to Add Menu in WordPress

Let’s see the detailed steps on how to add a menu to your WordPress Website (the images are displayed below for easy reference):

  1. Click on Appearance Section on WordPress Dashboard and select “Menus” from the list of options
  2. In the next screen, fill in the “Menu Name” (for e.g. Main Menu) as per your choice and click on “Create Menu”
  3. Next add the items to be displayed on the Menu. You can add items from the Pages, Posts, Categories section on the left. In our example, we are adding only pages. So click on “View All” under the Pages section on the left which shows all the pages you have created.
  4. Select the required items to be displayed on the menu by checking the box and click on “Add to Menu” to show them in the Menu Section. You can drag the items up and down to change the order (if required)
  5. You can also make any item appear as sub-item of the item above it (as a Drop-Down) by dragging the item slightly to the right. This is usually used if you have different groups or content categories on your website e.g. you may have a Download Category under which you want to show some pages or a Coupons category for free deals etc.
  6. Scroll down and check the “Desktop Horizontal Menu” in the Display location which is the standard menu layout. This is will display the menu items on the header section in horizontal format.
  7. Click on “Save Menu” to complete the process and you will see a confirmation message that Menu has been created or updated.

Illustration Images for all the steps in the process

Step 1- Go to the Appearance section on WordPress Dashboard and select “Menus” from the list

Step 2- Give Menu Name and click on ‘Create Menu’

Step 3- Click on ‘View All’ to see list of items which can be added

Step 4- Select the desired items and click on “Add to Menu”

Step 5- Check the items appearing in the Menu in the right order. Drag up or down to change the order

Step 6- To make an item as a Sub-Item of the one above it, drag it slightly to the right

Step 7- Click on “Desktop Horizontal Menu” as display location to display menu items in horizontal format and click “Save Menu”

Now in case of the WordPress Twenty Twenty Theme, one peculiar thing I have noticed that it will still show all pages you have created in header menu by default, in case you don’t have any menu active with display location as “Desktop Horizontal Menu”. So make sure you have created a menu with the display location “Desktop Horizontal” to show only the selected items there. In case you want to show certain pages in the footer section, create another menu with display location as the “Footer menu” for these items.

Also, in case you don’t want to display anything on the header, you still need to create a separate menu with with display location as “Desktop Horizontal Menu” and don’t add any item to that. This will give you a blank display at the header.

You will see a confirmation that the Menu has been updated

Note, that in case of WordPress Twenty Twenty Theme, the menu automatically changes to condensed form (with items visible only on drop-down) when you are viewing the website on a mobile or tablet screen. This is more to adjust with the space and responsiveness.

Also, if you want to customize the menu like change its color, the option to do so is under Appearance-> Customize-> Color. Then change the color of the Header & Footer field. This will change the color of the Header and the Footer. WordPress Twenty Twenty Theme does not give you the option to have separate colors for header and footer although most themes do have these features.

Also, the WordPress Twenty Twenty Theme displays a Search Option by default in the Header. You can remove this by going to Appearance-> Customize-> Theme Options. Uncheck the box “Show search in header” to make it go away.

How to Add a Sub-Item in the Menu

As explained in step 6, you can also make any item appear as sub-item of the item above it (hierarchical structure) by dragging the item slightly to the right. This is usually used if you have different groups or content categories on your website e.g. you may have a Download Category under which you want to show some pages or a Coupons category for free deals etc.

Wrap Up

As you see, its easy to set up the menu in WordPress website. However, the first thing is make sure that you give a good thought as to what items you want to display on the menu. You can also edit the menu in the future by going through the same path.

How to Align Text beside Image in WordPress

How to align image and text in WordPress

By now, you’ve probably struggled to get your media file (images, videos, etc) aligned beside text in WordPress. Not anymore. With Gutenberg Update, you have a lot of options in aligning image and texts side-by-side. This can be achieved simply by changing alignment of the image block above the text or using a new block like ‘Media & Text Block’ available in WordPress.

So how do you align text beside image in WordPress? To align or wrap text beside an image, change the alignment of the image block to the left or right which automatically brings the text below it to the side of image in alignment. Alternatively, you can use the media and text block to align text and image side by side.

Let’s see the details of how to do this-

Way 1- Changing the alignment of image block

WordPress has different blocks for text i.e paragraph block or list block and image block to hold images. When you use an image block to add image, the image has a default center alignment. This alignment can be changed easily using the block options to either align left or align right. Once you do this, the text block below the image jumps next to it in alignment with the image.

Note: The image must be placed above the text for this method as text below it will jump up

The easy steps to align text with image are explained below:

  1. Add an image block above the text which needs to be aligned with it
  2. Upload the image in this image block
  3. Align the image using the image block alignment options to the right or left depending on which side you want it w.r.t the text
  4. Once you align the image, the text below it automatically jumps next to the image. If the image is too large, you need to just reduce the image size a bit so as to accommodate the text next to it.

You can see the illustration of image and text in 2nd para of this post which was done using this method.

Way 2: Use a Media & Text Block

This is a new block introduced in WordPress which is a default option to place media i.e. image, video etc. and text together in one block. Unlike the previous way where you are using 2 different blocks, this method uses only one combined block called the Media & Text Block.

Media & Text Block is a unique block in WordPress Editor, which allows you to place media and texts side-by-side in an easy and well formatted way. It is a combination of the media and text block.

How to add Media & Text Block

You can add ‘Media & Text Block’ to your WordPress content by simply clicking on the ‘+’ icon and then choosing the “Media & Text” block.

What’s more in Media & Text Block

Using the media text block, you can not only the align text and image horizontally but also vertically. It also allows having full width for the media&text together.

The ‘Media & Text Block’ toolbar also gives you an option to align the image either left or right of the text. Like an Image Block, you can also resize the media. In the block sidebar panel, you can also set the background color. It also has a responsive option to stack the media and text on mobile devices.

There are also some additional formatting options available in ‘Media & Text Block’ like

  • You can vertically align text at middle, bottom or top of image
  • You can also have full-width for the media & text combination\

See images below-

Vertical align options

Width adjustment options

Final Thoughts

So you can use any of the ways above to align text beside image in same line (side by side). The WordPress Blocks update has made this quite convenient to do this without using any complicated CSS or plugin.

How to Cite a Website in APA [7th Edition With Examples]

Cite website in APA

When you use a website for your academic research, many times you will have to cite the website reference in APA style. And often there are a lot of challenges in getting this right, due to missing information like no author or no date available. This complete guide will help you to cite a website in APA with some useful tips.

Citation is a way of giving credit to the source of information i.e. author or publication. Citation guidelines like APA or MLA help to present the source information in a consistent and structured format.

The APA (American Psychological Association) style of referencing is a widely used way of citing the source of information in academic documents like journals and research papers.

APA style guidelines also get updated from time to time, although not that frequently. The last update i.e. APA 7th edition was introduced by APA in October 2019. It replaces the APA 6th edition which was introduced way back in July 2009.

For this post, we will use the latest APA 7th edition guidelines. With that context, let’s now answer the core question on how to cite websites using APA style.

How to cite a website in APA? To cite a website in APA style, you need to mention the webpage elements in the following format : Author. (Publication Date). Title of web-page. Website Name. URL

Now before we jump further into details, an important point to note here is that not all online content is a website. APA style also has different citation guidelines for News websites which in addition to offering articles online have their print version such as The New York Times or The Washington Post. Also, there are separate formats for other types of online content like journals, research papers etc. You can also check the detailed guidelines for all types of citations in APA manual (available on Amazon).

So coming back to our main topic -citation of website. We require information on 5 key elements to properly cite the source content.

These five key elements need to be mentioned while referencing any website in APA style. The elements need to be separated by a period i.e. a full stop. These elements are-

  • Author
  • Publication Date
  • Title of Page
  • Website Name (also called Source Element)
  • Website URL

Let’s see this in more detail- what are the expected formats, where can we find this information and more important-how to cite if we don’t find information on any of these elements.

1. Author

The author of content is the first element to be quoted in APA style citation. There are some specific guidelines on how you can format the name of the author.

If the article is written by an individual author, mention the last name of the author, followed by the first and middle initial (if available).

Author’s Last Name. First Initial. Middle Initial (if Given).

e.g. Hardy, K.

If a surname or last name is hyphenated, just mention the hyphenated name as is.

Also, if an author has two names as their surname, include both names.

What if there is no author mentioned?

It can often be difficult to find the author of the webpage. It is important to note that the author can also be a corporation or group, not only a specific person.

For example- If you refer to a page on a government website or an organization’s website WITHOUT individual authors, use the name of the government agency or organisation responsible for the webpage as the author. 

In the example below- National Institute of Mental Health is the government agency or organisation that can be taken as the author.

National Institute of Mental Health. (2018, July). Anxiety disorders. U.S. Department of Health and Human Services, National Institutes of Health. 
https://www.nimh.nih.gov/health/topics/anxiety-disorders/index.shtml

If the author of the content is mentioned to be ‘Anonymous,’ then use the word “Anonymous” as the author’s name.

In some cases, you may also find the Author information in the “About Us” or “Author” section on a website.

What if the author can still not be identified?

If you still can’t identify the author even after all attempts, you can omit this element altogether. In such cases, start the citation with the title followed by the publication date and other elements.

Title of page. (Publication Date). Website Name. URL

2. Publication Date

Publication date needs to be entered in the below format with parenthesis-

(Year, Month Day)

e.g.

(2019, December 29)

NOTE: Publication date is the date when the webpage was created or it was last updated. Usually, it is mentioned below the title of the article. Sometimes, you may find it on the footer or bottom of the webpage.

However, note that this should not be confused with the Copyright date for the website which is usually just the year. In the case of a newspaper website, provide the specific date the story was published. 

Provide a specific date to the extent possible for the webpage.  In case you are not able to find the complete date, mention the information to the extent available say only the year or year and month etc.

Some online sources mention the date when the content was last updated. You can mention the updated date in the citation if this date applies to the specific content you are citing and not if it is just for the overall website

Also, you need to ignore the date of the last review (if mentioned) for the purpose of reference. For the simple reason- if content has been reviewed, it does not mean it was changed or updated.

What if there is no date available?

If the publication date is not available or cannot be identified, then use the abbreviation “n.d.” with parenthesis in the citation- which stands for no date . Format as below-

Author. (n.d.). Title of page. Website name. URL

3. Title of Web-page

Next important element is the title or heading of the article.

Article title needs to mentioned in Sentence Case and in Italics

Sentence case is the normal way of using capital letters i.e. capitalizing only the first word and any proper nouns in a sentence.

If the website has a print version like in case of newspaper website, then you DON’T need to italicise.

4. Website Name

Website Name needs to mentioned in Title case.

Title case means that the first letter of each word is capitalized, except for certain small words, such as articles and short prepositions.

The names of parent agencies not present in the author element can appear in the source element (in the example, the U.S. Department of Health and Human Services, National Institutes of Health).

National Institute of Mental Health. (2018, July). Anxiety disorders. U.S. Department of Health and Human Services, National Institutes of Health.
 https://www.nimh.nih.gov/health/topics/anxiety-disorders/index.shtml

You must include the site name in your citation unless its a corporate or organisation website where the website name is the same as the author, to avoid repetition. In the example below, the name of the organisation is omitted from the source element to avoid repetition.

World Health Organization. (2018, May 24). The top 10 causes of death.
https://www.who.int/news-room/fact-sheets/detail/the-top-10-causes-of-death

5. URL

Last comes the URL.

This needs to be in the form of a clickable hyperlink.

You can also use a URL-shortening service if the link is too long and doesn’t look good on the eyes. Some URL Shortner websites that you can use for this purpose:

It is important to note that you DON’T add a full stop or period after the URL.

URLs are no longer preceded by “Retrieved from,” unless a retrieval date is needed. This was the requirement earlier in APA 6th style.

Now it is applied only in case of certain websites, only when needed.

For e.g- In the case of websites, where the information is subject to frequent change, you also need to mention the date when you retrieved the information in the format “Retrieved date from” before the URL- See example below

U.S. Census Bureau. (n.d.). U.S. and world population clock. U.S. Department of Commerce. Retrieved January 9, 2020, from https://www.census.gov/popclock/

Some Helpful Videos on APA Style Referencing

Types of Citations- In-Text vs References

Citations are usually of 2 types i.e. In-Text or in References

In-text/Parenthetical citations: 

  • Citations included in the body of a project
  • Added when using a direct quote or paraphrase from a source
  • Generally contain the name(s) of the author(s), date, and page number(s), if applicable

References: 

  • Citations included in the final part of a project
  • Included in the reference list (sometimes called APA works cited by some teachers) at the end of the assignment.
  • Contains the complete list of all sources used in a project
  • References contain the author’s name, date published, title, publisher, URL, and other key pieces of information.

Examples of APA style referencing

Example 1- Citation of webpage from a News website

Gallagher, J. (2015, November 1). Antibiotic apocalypse. BBC News.
http://www.bbc.com/news/health-21702647

2. Example – Citation of web-page on a website with a government agency group author

National Institute of Mental Health. (2018, July). Anxiety disorders. U.S. Department of Health and Human Services, National Institutes of Health.
 https://www.nimh.nih.gov/health/topics/anxiety-disorders/index.shtml

  • Parenthetical citation: (National Institute of Mental Health, 2018) 
  • Narrative citation: National Institute of Mental Health (2018)

3. Example- Citation of web-page of a website with an organizational group author

World Health Organization. (2018, May 24). The top 10 causes of deathhttps://www.who.int/news-room/fact-sheets/detail/the-top-10-causes-of-death

Center for Disease Control and Prevention. (2018, January 23). People at high risk of developing flu-related complications. https://www.cdc.gov/flu/about/disease/high_risk.htm

4. Example – Citation of web-page with an individual author

Giovanetti, F. (2019, November 16). Why we are so obsessed with personality types. Medium. https://medium.com/the-business-of-wellness/why-we-are-so-obsessed-with-personality-types-577450f9aee9

Chi, C. (2018, July 30). 4 management styles to strive for, and 4 to avoid. HubSpot.
https://blog.hubspot.com/marketing/management-styles

5. Webpage on a website with a retrieval date

When contents of a page are designed to change over time but are not archived, include a retrieval date in the reference.

U.S. Census Bureau. (n.d.). U.S. and world population clock. U.S. Department of Commerce. Retrieved January 9, 2020, from https://www.census.gov/popclock/

How to Add a Sticky Header in WordPress

Looking to have a sticky header for your WordPress website? It’s not that difficult to do this. In this post, we will walk you through the steps on how to add a sticky header to your WordPress website.

Having a sticky header is growing as a popular trend with most websites. A sticky header makes a part of your WordPress area i.e. the header (which carries the logo and site title) and primary navigation will always be visible even if the visitor scrolls down your blog post.

A sticky header helps the user to easily navigate your website. It can also improve the visibility of the brand as your logo always remains in view as your user is scrolling through your website content.

Now many themes like Generatepress do give you an option to make your header sticky as a part of the theme. However, if you are using a theme that does not have a built-in option to make the header stick, worry not. There are some easy solutions.

How to add a sticky header to WordPress? You can create a sticky header on your website using either CSS or a plugin

I tested a few plugins to see which one helps you make the sticky header. I really liked the plugins “Sticky Menu (or Anything!) on Scroll”.

You can also use the plugin- mystickymenu, which is also quite popular. Both the plugins are easy to use and do the job.

How to Add Sticky Header to WordPress using Plugin

You can follow the steps below to add a sticky header to your WordPress website:

  1. Click on plugins-> Add New Plugin- > Search for the Plugin: “Sticky Menu (or Anything!) on Scroll” by WebFactory Ltd. This is a very popular plugin that has 100,000+ active installations and awesome 5-star reviews.
  2. Activate the plugin
  3. Go to the Plugin settings – > Basic Settings Page – > Fill in the name of the Sticky Element which is simply “#site-header” for most themes including Twenty-Twenty Theme by the WordPress Team (more on this in the details)

Some more important information on using this plugin

While using this plugin is a breeze, some bloggers may face difficulty in making this plugin work. Now, this confusion is mainly on what to fill in the field “Sticky Element”.

Now, what is an element? In the crudest sense, an element is a part of the webpage. In our case, the target element which we want to make sticky is the Header.

But in this plugin, it has to be identified or called out either by its Class name or its ID.

So when we want to make the Primary navigation or Site Header sticky, we need to use either its Class or ID. This is the name that needs to be entered into the field “Sticky Element”.

Now the problem arises if you don’t what is the technical name i.e. Class or ID of the header as applicable for your theme. For most themes including the Twenty Twenty provided by WordPress, the header ID that can be entered in Sticky Element Field is #site-header.

Now if this does not work for you, probably your theme has a different class or ID for its header. You can identify the name simply by right-clicking on your site header and click “Inspect” which will open the elements tab. Here, search for the element header id and see what it is equal to.

Another thing to note that when filling the Site Element field is that if you use the class name, it has to be preceded by a dot (e.g. “.main-menu”).

If you identify the element using its ID (e.g. site-header above), then it has to be preceded by a pound/hash/number sign (e.g. “#main-menu”).

Important: Make sure there is only ONE element on the page with the selector you’re using. If there is none or more than one element that matches your selector, nothing will happen.

After following through the steps, make sure you check if the sticky header is working properly on both mobile and your laptop.

The Sticky Menu (Or Anything) On Scroll plugin for WordPress is a great plugin that can not only make the header sticky but also make other elements such as a sidebar, a logo, etc. on your pages “sticky” when you scroll down.

However, the limitation of this plugin is that it can be used to make only ONE element sticky at present. They do intend to offer the option to make more than one element sticky in a later update.

Sometimes a simple selector like “nav”, “#main-menu”, “.menu-main-menu-1” is enough. Other times you will have to be more detailed and use a more specific selector such as “header > ul:first-child” or “nav.top .menu-header ul.main”.

How to make the Sticky Header Transparent (Sticky Header CSS)

After adding a header, you may also want to make it transparent for a more appealing effect. So how to do this?

You can also make the sticky header transparent by using a simple CSS.

  • Step 1– Add a New Plugin– “Simple CSS” by Tom Usborne. This is an awesome plugin whose author is also the creator of the highly popular Generate Press Theme (PS: We use the same theme on our website)
  • Step 2– In the WordPress Dashboard, click on “Appearance” ( the one with the paintbrush symbol)
  • Step 3– You will see an option “Simple CSS”. Click on it and a black screen appears. You simply need to Paste the CSS below on the black screen and click on the button “Save CSS”. That’s it. As simple as that.

site-header {
opacity: 0.5
}

If you are using the plugin mystickymenu, it gives you the option to control the opacity of the header.

How to make the header sticky if you are using Generatepress Theme

The Generatepress theme has a built-in option to make the header sticky. For this, go to the following path-

Customizer > Layout > Sticky Navigation.

How to Change Logo on WordPress 2020 [Easy Guide]

how to change wordpress logo

If you are looking to add or change the logo on your WordPress website, this guide will help you with the details. We will walk you through the steps on how to add a customized logo on your website header, change logo size etc.

Having a professional logo on your blog not only helps in website branding but also enhances its look and feel. But often it does not get the attention it deserves. By default, WordPress does not apply a logo to your website. It only shows your website Title in the header space of your blog.

But you can easily add or change the logo by following some simple steps.

How to change the Website Logo in WordPress? In most themes, you can change the logo by going to the Appearance section in the WordPress dashboard and selecting Customize. Here, you get a tab called “Site Identity” which has option to change the logo by uploading an image from your computer or selecting an existing image from your media library.

Let’s go into these steps in detail:

How to Change Logo on WordPress

The option to change the WordPress Logo changes from theme to theme. However, most themes give you an option to change the logo in the “Appearance” section on your WordPress dashboard.

Here are the standard steps to change in the WordPress logo:

  • Step 1- Log in to WordPress Admin. On the dashboard-Left pane, click on Appearance (paintbrush icon) from the list of options – and select Customize
  • Step 2- Click on the tab- Site Identity which gives you the option to change the logo and also change the Site title
  • Step 3- Click on Change Logo and upload the image which you want to use as the site logo
  • Step 4-Click on Save and Publish

Note: In case these steps don’t work for you or you are not able to find these options, it’s probably because of your theme. Some themes may have a different path to change the logo. For this, just google how to change the logo for the xxx theme (your theme name) or check on the support section of your WordPress theme.

The “Site Identity” tab also gives you the options to change Site Title and Site Icon

Let’s look at what these terms mean and how to access them:

Meaning of different terms – Logo, Site Title and Site Icon

  • Logo is an image that appears on the Header section of the website and is visible on all its pages. It can simply be the name of your blog i.e. text or symbol or combination of both in image format.
  • Site Title is the name of your blog which appears next to the logo in the header section. You can choose to hide the site title and keep only the logo
  • Site Icon also called favicon is the image which appears next to the url of your website in the browser

What Size of Logo to Use

Getting the right image size for your WordPress website can be a bit of trial and error.

The theme you use also has an important role here.

Generally, an image size of 250 px (width) x 100 px (height) works well for most blogs.

It also depends on the choice of logo style- horizontal or vertical.

Here are some sizes you can consider for the logo you choose to use on your header

For horizontal layout:
– 250 px x 150 px
– 350 px x 75 px
– 400 px x 100 px
For vertical (square) layout:
– 160 px x 160 px

How to Design your Site Logo

The logo you use for your website can be either a word, symbol or combination of both. Think about what is the feeling you want to leave with your visitors.

You can draw inspiration from the logos of the top brands that you use. The choice of colours, symbol etc. should flow from the theme of your website.

You may need a little help here.

So let’s see some great tools to help you with the logo making exercise.

You can make a professional logo for free by using a great online tool Canva.com. The website has a lot of ready to use logo templates which you can customize based on your site requirements

Canva – A Great Resource to Create Your Website Logo

Some things to keep in mind while making a logo for your blog:

  • Make it unique- Stand out from the crowd
  • Make good use of colours and fonts. You can use a combination of colours and fonts.
  • Keep it simple, don’t go overboard
  • Make it memorable

Some other resources that can be used to create a website logo include Adobe Spark and Logaster.

How to Create a Favicon for your Website

Favicons are the tiny icons that are displayed before the URL of your site in a browser’s address bar. 

The favicon also appears when your website is ranking in the search results on google. So having an attractive favicon does also a bit in getting a better click-through rate. Thus, it helps with your website’s SEO.

Make sure you at least have a favicon for your website and not leave it empty. People tend to respond more positively to images than text. The absence of favicon in your website when it is displayed on Google search results can cause some visitors to ignore your page.

The favicon is also visible next to post or page name on the browser tab making it easier to identify and navigate on your website.

Many brands use a favicon which is simply a micro version of the logo.

Here are some common examples of favicon for amazon.com, youtube.com:

Favicon Example

Resources to create a Favicon

There are some helpful websites you can use to quickly create a favicon

You can choose to keep the favicon image same as your logo.

How to change Site Title on WordPress

You can change the site title of your blog by going to

Settings -> General -> Site Title

[Guide] How to Justify Text in WordPress Gutenberg? -With CSS, Plugin

If you have been using the WordPress Gutenberg editor, you would have trouble in finding the justify text option. Because there is no such default option or shortcut for this in WordPress (yes it is difficult to digest). But don’t worry, in this article, you will find 2 simple ways (CSS as well as plugin) in which you can justify align text in Gutenberg Editor.

One of the reasons given by WordPress Team for not having the justify text option is that it does not really help content readability and useful only in certain situations. It is more like an extended feature that can be achieved using any plugin.

However, many bloggers do love to justify text and that may not be a good enough reason for them.

Fortunately, there are some easy methods to justify text in WordPress rather than avoiding the Gutenberg editor altogether.

So how do you justify text in WordPress Gutenberg?

You can justify text using any of the two methods:

Both these methods are very easy to implement, even if you don’t know much about WordPress. You can see the details on how to use both these methods:

Method 1: Justifying text using CSS

Fortunately, you can easily justify all your text in Gutenberg using a simple CSS. Now if you are worried about CSS or have never used CSS before, don’t worry. It is really simple. Just follow the steps below:

How to justify text using CSS in Gutenberg?

  • Step 1– In the WordPress Dashboard, Go to Plugins and add a New Plugin“Simple CSS” by Tom Usborne. This is an awesome plugin whose author is also the creator of the highly popular Generate Press Theme (PS: We use the same theme on our website)
  • Step 2– Now in the WordPress Dashboard, hover your mouse to “Appearance” ( the one with the paintbrush symbol)
  • Step 3– You will see an option “Simple CSS”. Click on it and a black screen appears. You simply need to Paste the CSS below in the black screen and click on the button “Save CSS”. That’s it. As simple as that.

Here is the CSS that needs to be pasted in Simple CSS (under Appearance):

.type-post
p {text-align: justify;
}

Paste the above CSS in the Simple CSS black screen and click on “Save CSS” (
see image below)

The good thing about this method is that it automatically applies the ‘Justify’ formatting to any post that you create on WordPress.

Method 2: Justifying text using the Plugin Option

You can also use a new plugin “Gutenberg Page Building Toolkit ” which has this feature to justify your text. This plugin also gives you a bunch of other options to format text in addition to the justify feature. It gives you much better control over formatting WordPress content with options like justify, highlight, underline, superscript, subscript, etc

The good thing about this plugin is you can justify text at a paragraph block level. So if you just want to justify a particular paragraph in your blog post and not the entire content, then this plugin will easily do that for you.

How to justify text using this plugin?

  • Step 1- In the WordPress Dashboard, Go to Plugins and add a New PluginGutenberg Page Building Toolkit,
  • Step 2- Click on any block in Gutenberg editor and you will see a new arrow drop-down (See image below) in the formatting options which will say “More Rich Text Tools” when you hover it. Here you will find an option to Justify Text.
Justify Text in WordPress Gutenberg

You should note that the justify option is Not available for a list block.

Related Queries

Check Other common queries on WordPress like how to change the logo or how to highlight text in WordPress.

How to add Pros & Cons Table in WordPress

Pros and Cons Table Wordpress

A Pros & Cons Table gives a quick summary view of advantages and disadvantages of a product. It is especially useful in review posts where you are giving your opinion on any product or service.

You can see many popular review blogs like 10beasts.com use these tables to give you a quick summary of products. It not only acts a good content break but also helps hook the reader to the post.

Let’s see how you can get such table for your website.

How to add a Pro & Con Table in Gutenberg

You can now add a Pro & Con Table in Gutenberg WordPress very easily using a simple plugin- Mighty Pros and Cons. This plugin provides a custom Gutenberg block which helps you create highly responsive and attractive Pros and Cons table in your WordPress blog post or page.

  • Step 1- In the WordPress Gutenberg Editor, go to Plugins
  • Step 2- Click on “Add New Plugin” and search for the plugin “Mighty Pros and Cons”. Install and activate the plugin
  • Step 3- Go to the WordPress Post where you want to add Pro & Con Table, click on “Add new block” and search for “Mighty Pro & Cons” Block. Insert this block and you will find a cool Pro & Con Table Below

Pros

    Cons

      This is the default style, which is circular. You also get 2 other style options like this:

      Style 2- Curved Rectangle

      Pros

        Cons

          Style 3- Straight Rectangle

          Pros

            Cons

              It’s quite simple and easy to use UI which allows you to create the responsive table easily. You just need to add the values and you’re done. You don’t require to have any specific technical skills to use this plugin.

              Following are the features of Mighty Pros and Cons table:

              1. It’s highly responsive.
              2. It contains three predefined templates.
              3. It provides an option to change the background color.
              4. It provides an option to show or hide the title and button.
              5. It provides an option to select the border type, border color or even the border size.
              6. It provides an option to select the HTML tag for Title of the table in order to make it more SEO friendly.
              7. There is option to ‘Open Link’ in New Tab and add ‘No Follow’ tag on Button link.
              8. It’s lightweight, and not adding any additional useless code to your website.
              9. It’s let’s you to create rounded, square or round call to action button.

              How to Highlight Text in WordPress 2020 [Gutenberg + Classic Editor]

              Highlight Text in Wordpress

              If you are looking to find the highlight text button in WordPress Editor, you may be surprised to find there is no default option for it. But don’t worry, there are a bunch of ways to highlight text in WordPress. I will explain a simple method to achieve this.

              You may note that while this post is updated for New WordPress Gutenberg Editor. But even if you are using the old Classic editor, I have a method for that as well.

              If you are looking to highlight text in the WordPress (Gutenberg Editor), you can do this easily by using a simple plugin called “Advanced Rich Text Tools for Gutenberg”. It is really simple to use and just adds 2 simple formatting options to the WordPress Editor (under Block): 

              • Inline Text Background Color Change- To Highlight the Text (change background color) within the block
              • Inline Text Color Change- Which can be used to change the color of Text within the Block

              You will find both these options are not available in the default WordPress Gutenberg Editor.

              In the WordPress Editor, while you can easily highlight a whole block, there are no options to highlight only selected text within the block. This plugin gives you those very options.

              Though this plugin does not have many reviews, most of them are very positive. My take is that you can rely on this plugin as the author-”Ella van Durpe”  is a part of the WordPress Core Team. I wonder why they have not made it part of the default options in Gutenberg.

              Method 1: How to Highlight Text in WordPress Gutenberg?

              1. Download and activate the “Advanced Rich Text Tools for Gutenberg” Plugin
              2. Select the text you want to highlight (within the paragraph block)
              3. On the right-hand side Block Formatting Options, you will find an option Inline Background Color under which you can highlight text by clicking on any of the default colors available or use “Custom Color”. You will find the selected text is highlighted with the chosen color.

              Also Read: How to Format Hyperlinks in WordPress [Cool Tips]

              The Details on these steps are presented below:

              Step 1: Under Dashboard go to Plugins and “Add New Plugin”

              Step 2: Search for “Advanced Rich Text” under Add Plugins, Install and Activate it

              Step 3: Go to the Post or Page where you want to highlight the text

              Step 4: Select the text you want to highlight

              Step 5: Now you will see the 2 additional options “Inline Text Color” and “Inline Background Color”. Using the option “Inline Background Color” you can highlight the text. Chose the color of your choice which will be applied to the selected text. You can also use the Custom Color option to highlight text using any color hex code (check below).

              Another option lacking in WordPress Gutenberg is the ability to justify text. I have written a simple guide on how you can justify text in WordPress new editor. Many people have stopped using Gutenberg because of this. Hope WordPress is listening.

              Some Good Color Hex Codes to Highlight Text 
              You will have better control on colors if you know the hex code of the color. This website can help you with this.

              Some colors which are preferable to highlight text are green, yellow, fluorescent yellow, pink, orange. Choose a color on which the text is easily readable. Here are the hex codes for these colors and a preview of how they look.

              Color Hex Code
              Green#32cd32
              Yellow#ffff00
              Flourescent Yellow#ccff00
              Light Pink#FFB6C1
              Light Blue#87cefa

              Now even if you don’t want to use a plugin, I have a method for this. But it involves just a bit of HTML which may be difficult for non-techies.

              Method 2: How to Highlight Text in WordPress using HTML (without any plugin)

              You can go for this method if you want to avoid plugins and are looking to highlight text only occasionally. This method uses Yellow as the default color to highlight text.

              1. Click anywhere on the Text Block whose text you want to highlight. You will see the 3 dots above the block. Click on it and select “Edit as HTML” from the options. This changes the block view to show it in the HTML Form.
              2. Type in <mark> before the start of the text you want to highlight i.e before the first word
              3. Type in </mark> after the last word you want to highlight
              4. Right-click the 3 dots again and select “Edit Visually” and you will see the text highlighted in yellow color (which is the default color on using mark function)

              Changing the Highlight Color of Text

              Now if you want to change the highlight color from yellow to something else say flourescent yellow whose hex code is #ccff00, you will need to use a CSS.

              Don’t worry. Using CSS is very easy.

              For this go Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS

              mark {
              background-color: #ccff00 ;
              }

              It is important to note that when you change your WordPress theme , you will lose the above CSS formatting.

              To avoid this, use the “Simple CSS” plugin to add this CSS.

              A limitation here is that the CSS will change the highlight color for all places where you use the mark tag. So you cant use different colors for different text.

              Also, if you want to change the background color, you will have to edit the CSS every time. Hence, I am not a big fan of this method.

              Now if you are working with the old Classic WordPress Editor, you can still use this option by switching between the Visual and the Text Tabs to apply the mark code.

              Also, the Text Highlight Options are also available in the TinyMCE Plugin for the Old WordPress Classic Editor.

              Conclusion

              Highlighting Text can be an effective way to emphasize your content on your website. It also helps to get reader engagement. But make sure you use it selectively and the color does not affect the text readibility.

              Summary, to conclude, if you want to highlight text in WordPress

              • For Gutenberg Editor– Suggested Plugin is Advanced Rich Text Tools for Gutenberg
              • For Classic Editor- Suggested Plugin is TinyMCE advanced (highlight function works only for Classic Editor)
              • For Both Gutenberg and Classic Editors – without plugin Use HTML Code- Mark