These options are specific to Genesis themes that include the accessible navigation menu, and the CSS was intended for themes that prioritise desktop display. I always use genesis sample theme, as opposed to pre built genesis themes, but these classes should work on most Genesis themes.

You will use a CSS class to specify which menu elements function as mega menu dropdowns. This allows the flexibility of having some normal menu items and some mega menu items. If your theme is NOT mobile-first, you will add a function to functions.php to limit the menu’s depth before adding CSS for the mega menu on large and small displays. You can determine how many columns your menu items require. Obviously, additional colour schemes can always be added.

How to edit the CSs file in your Genesis theme.

If you are logged into the WordPress dashboard, you can go to appearance – theme-file-editor and edit the files there. Make 100% sure you have a backup of your site, and even better yet, clone you site to a staging domain and work there.

If you search for “accessibility” in your theme’s functions.php file, you will find a section that appears like this:

Restrict the sub menus to a single level.

The first thing you should do is restrict submenus to a single level. Thus, you will have a total of two menu levels: the visible main level and one sub-menu. We are adding two levels to the primary menu. In the prototype theme, the depth of the secondary menu is already limited to 1.

If you are the only user of your website and you limit your mega menu items to two levels, you can omit this step.

Add the code below to your functions.php file. The end is acceptable. Utilise a text editor and make sure to create a backup before making any changes.

<?php // Do not include this

// Reduce the depth of the principal navigation menu to two levels.
add_filter(‘wp_nav_menu_args’, ‘genesis_sample_primary_menu_args’);if (‘principal’ does not equal $args[‘theme_location’) { return $args; }$args[‘depth’] equals 2return $args; }

Add the Mega menu class to the menu items

You’re going to add a class to the menu items that you want to behave as mega menu items.

1. Inside your WordPress dashboard, go to Appearance > Menus.
2. Select one of the top level menu items that you want to use as a mega menu.
3. In the CSS Classes field*, add megamenu.
4. Save the menu.

Add CSS for desktop

You’’re going’ll need to add some styles to your style.css file now. Use a text editor and be sure to save a backup first.

In style.css, find the following selector:

.genesis-nav-menu .sub-menu .sub-menu {
	margin: -56px 0 0 199px;
}

Note that the numbers may be different, depending on your theme.

Just below the selector above, add:

/* Added for Mega Menu */
	.genesis-nav-menu .megamenu .sub-menu {
		background-color: #fff; /* same color as .genesis-nav-menu .sub-menu a */
		border: 1px solid #eee; /* optional */
		height: auto;
		width: 610px; /* make width needed plus 10px */
		column-count: 3; /* optional to change the order of the items to be vertical */
		column-gap: 0; /* optional to change the order of the items to be vertical */
	}
	
	.genesis-nav-menu .megamenu.move .sub-menu {
		right: 0;
	} /* optional to right align the sub-menu */
	
	.genesis-nav-menu .megamenu .sub-menu a {
		border: 0; /* optional */
		width: 200px; /* 1/3 width for 3 columns */
		/* width: 300px; /* 1/2 width for 2 columns */
	}

Add media queries for mobile and ipad

As I mentioned I use Genesis Sample, but use the pre built defaults to build your media queries. In Genesis Sample this is 380px for mobile and 780px for ipad, but you can edit these in your core theme.scss file, or if you re using a modern WordPress stack your theme.json file.

Need help with youe Mega Menu? Please get in touch.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart. Have a project in mind? Contact me here.

The post How to create a mega menu in Genesis appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

So I was working on some updates for a client Megan Jordan and she wanted a fourth footer widget area added to her site for an acknowledgement to country. I built her site using the Genesis sample SCSS theme by Cobalt apps which by default comes with 3 footer widget areas. To add a fourth you have to find the template where the number of widget areas are declared, and modify it.

HOW TO ADD A FOURTH FOOTER WIDGET TO GENESIS SAMPLE

1. In your admin dashboard go into appearance- theme editor – config – theme supports.php and scroll down to the rule for genesis-footer-widgets and change it from 3, to 4.

2. Go into your style.css sheet from the theme file directory, and edit the footer-widget-area section on line 1726. Change it from width: calc(100%/3) to width: calc(100%/4)

3. Now go into your appearance – widgets area, and you can see the 4th footer widget area is available in the widget options:

4. Now, go to the front end of your site and click on the customiser. Once you select widgets you can also see the 4th widget area here, and now you can add any element you want – text, html, image etc.

There are much more complex ways to achieve this, but overall something simple effective and repeatable is the way to go. It saves the client development time, and it saves you from building even more custom functions on your WordPress project.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post How to add additional footer widgets to any Genesis theme appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

When you upload a favicon image in the WordPress customizer, it provides a helpful preview to see how your favicon will appear in browsers using light or dark mode.

When the favicon color doesn’t work well with dark mode, a common fix is to replace the transparent PNG with a JPG that has a white background, but then you end up with a white square in dark mode.

Alternatively, you can use an SVG for the favicon and modify the favicon styling based on the color scheme.

You can see this in use in the recent NerdPress redesign we just launched.

Create SVG favicon

Create a square SVG with your desired icon. It will look something like this:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<path fill="#0F145B" d="......" />
</svg>

Remove any styling from the shapes in the SVG (so the fill and stroke attributes) and add those styles with inline CSS.

You can use @media ( prefers-color-scheme: dark ) to style the dark mode version differently. Here’s what my SVG now looks like:

<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
	<style>
		path {
			fill: #0F145B;
		}
		@media ( prefers-color-scheme: dark ) {
			path {
				fill: #43C1C5;
			}
		}
	</style>
	<path d="....." />
</svg>

Add SVG favicon to your theme

I added my favicon.svg to my theme’s /assets/images/ directory, but you can add it anywhere in your theme.

Add the following code to your theme’s functions.php file to include the SVG favicon.

/**
 * SVG Favicon
 */
function be_svg_favicon() {
	echo '<link rel="icon" href="' . esc_url( get_stylesheet_directory_uri() . '/assets/images/favicon.svg' ) . '" type="image/svg+xml">';
}
add_action( 'wp_head', 'be_svg_favicon', 100 );

It seems that the SVG favicon is prioritized over the WP generated one regardless of whether it appears before or after it in the page markup, but I have the priority set to 100 so it will appear after, just in case.

Even with this approach, you should upload a JPG version of the favicon in the WordPress customizer. There are still many browsers that don’t support SVG favicons so you’ll want a fallback.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Change Favicon Colour for Dark mode appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

Genesis Framework and Underscores are two popular WordPress platforms that allow their users to enjoy better flexibility and have full control over their sites.

These platforms have varying approaches when building WordPress themes, making it difficult to know which is the best for you.

Genesis Framework relies on child themes for design while ensuring it has all core functionalities. Underscores is the bare coding of a WordPress theme meant to be developed from the ground up.

Though both platforms require proper knowledge and experience, Underscores is more technical.

There are other factors that you need to know about Genesis Framework and Underscores before you can make an informed decision.

Quick Navigation

• Comparison
• User Experience
• Pricing
• Final Thoughts
• Conclusion

In this article, we will cover all of them in great detail, from user experience to pricing, in order to help you find the platform for your business.

Genesis Framework vs Underscores: Comparison

Genesis Framework vs. Underscores is an interesting comparison because they are very similar in many ways but present two very different approaches to building WordPress themes.

Before we go through the in-depth discussion on both these options, it would be best to get a snapshot of what they are and what they can do for WordPress developers.

What Does Genesis Framework Do?

If this snapshot seems a bit confusing, let’s address each of them one-by-one, starting with what you can get from Genesis Framework and what it can do for your website.

In essence, Genesis is just a framework that you-or anyone in the community – can use to develop a child theme.

You can either use it solely for your business or sell it to other Genesis users while providing the support it needs.

It is a very useful feature because both new and experienced WordPress users can take advantage of the lightweight and secure coding that Genesis Framework offers.

Developers can build a theme around the framework, and new WordPress users can choose from any of the child themes available for the community.

You want to have a child theme on top of a parent theme because it helps you future-proof your website while keeping it secured from any loopholes.

Most WordPress updates will require an update from the theme you are using, and some may cause issues with your site’s design and functionalities.

However, if you are building your website on a child theme, it will be easier to update WordPress and your parent theme without affecting how your site looks or functions.

Aside from this, you can take advantage of the clean coding that doesn’t slow down your site, and you get to keep your site secured from any loopholes that may be present with your current WordPress version.

Genesis Framework is the most popular and robust parent theme that you can use, and you have hundreds of different options for the designs to use on your website.

Aside from this, it also unlocks the limitless potential of WordPress because you can develop any child theme from scratch.

What Does Underscores Do?

Underscores is similar to Genesis Framework but also different at its core. For starters, it is not a framework, parent theme, or child theme-it is a starter template.

It will provide you with the bare essentials that you need to start building a functional WordPress theme.

The simplest way to explain what Underscores can do is turning an HTML prototype into a WordPress theme.

You can also build a WordPress theme for other people using the same toolkit without going through all the steps you need to build one.

It reduces the time you need to build WordPress themes, and you don’t even have to worry about the coding because Underscores has a deep integration with the Automattic team and the Gutenberg editor.

These are two reasons why it is one of the most popular starter themes available.

You will likely want to use Underscores instead of Genesis Framework because it doesn’t depend on any development from the company or community.

Though it may be hard to imagine that StudioPress will discontinue its developments, in a hypothetical world where Genesis Framework stops its development, your child theme will eventually become obsolete because it is connected to the parent theme.

On the other hand, Underscores doesn’t rely on any entity, company, or community. You develop your theme with your own rules, and it is meant for development right from the start.

It is a standalone theme that solely relies on all of your developments.

User Experience of Genesis Framework and Underscores

The user experience is where the biggest difference between the two lies. Although both Genesis Framework and Underscores will let you build your “own” WordPress themes, this similarity only applies to web developers and experienced WordPress builders.

Users who have limited coding knowledge may not be able to take advantage of what Underscores can do.

Genesis Framework User Experience

The biggest advantage of Genesis Framework over Underscores -or any other starter theme or framework -is the community behind it.

With hundreds of developers designing their child themes and selling them to the community, even new users can take advantage of what it has to offer.

The truth is, WordPress frameworks may discontinue their development at any time. Still, with the massive support from its community, it is highly unlikely that StudioPress will stop developing the Genesis Framework.

This usability and theme availability are some reasons why more WordPress users may find the Genesis Framework easier to use than Underscores.

Anyone can pick any theme, as they would with any other WordPress theme, and enjoy the perks of using the Genesis Framework.

Underscores User Experience

Underscores is a much better option for experienced developers because it doesn’t rely on any company or community for its development.

If you are thinking about getting the Genesis Framework to develop your “own” theme, Underscores will provide you with better future-proofing and security.

It has all the steps you need to build a functional WordPress theme, allowing you to focus on the design. Plus, it has deep integration with the Automattic team and Gutenberg, making it even easier and more secure for you to build your site around.

New WordPress builders who are looking for themes using Underscores may find it difficult, but it is no different than looking for any other WordPress theme that is available.

Pricing of Genesis Framework and Underscores

Genesis Framework costs $59.95 for an unlimited license, while Underscores is free to download.

You also don’t have to go through many things to get your hands on Underscores -just give your theme a name, and you can start designing on top of it.

It is a bit different for Genesis Framework, and one could argue that it is also confusing. After all, you have the option to get the framework or the framework with a child theme.

You can also opt for StudioPress membership (Genesis Pro) to get your hands on everything you will need for your site.

The three Genesis Framework options are:

1. Genesis Framework: if you want to build a child theme on top of the Genesis Framework, this option lets you do just that. It is also the option most comparable to what Underscores can do-a framework or starter theme for experienced developers.
2. Framework + Theme: this option is for newer WordPress builders who don’t want to build their themes or don’t have enough coding experience. The price also varies depending on the child theme you want to use and where you are getting it.
3. Genesis Pro: if you are a developer or a new user who plans to build multiple WordPress sites on top of the Genesis Framework, this option is the best for you. It includes the framework, every StudioPress theme, support, and updates for $360 a year.

Final Thoughts on Underscores vs Genesis Framework

Like every decision with WordPress, choosing what is better for you depends on what you want to have and what you are trying to achieve.

Even everything that we have discussed so far, it can be daunting for some to pick one over the other. So, let’s summarize the basics to help you understand which of these two is better for you.

Why Should You Choose the Genesis Framework?

Genesis Framework is a more popular option because it caters to the needs of both the average and experienced WordPress users.

However, it is not always the best option, and many may not even find it a viable option for them. Here are some instances where using Genesis Framework will be beneficial for you:

• You want to build a child theme on top of a parent theme that gets a lot of support from its community.
• You are confident that StudioPress will keep developing the Genesis Framework, and it won’t make your child theme obsolete.
• You would rather pick a theme that works and take advantage of the security and simplicity that Genesis Framework offers.
• You want to save time updating your framework whenever WordPress releases a new update and just focus on developing your child theme.

You can get many other advantages from using the Genesis Framework, but most of them will only be beneficial if you fall into one of these instances.

It would be best to get a clear picture of what you really want to achieve before you start investing in this framework.

Why Should You Choose Underscores?

Underscores is the bare bones of WordPress themes. It is not as popular as the Genesis Framework, but it has been available to developers since 2010.

It was only after the Gutenberg release that it gained more traction for users. Here are the instances where using Underscores will be beneficial for you:

• You want full control over your theme without relying on a company or community for the development.
• You have enough experience in building themes, and you only need a toolkit that will help you build one efficiently.
• You want to develop a unique theme for your business that isn’t available to any WordPress user.
• You want to explore the real potential of WordPress and have functionalities that aren’t available to the existing themes.

Underscores may seem a bit more complicated, but that’s the goal of this starter theme – it gives you everything you need for a functional WordPress theme and lets you decide how it looks and functions.

It only provides a toolkit that makes it easier for developers to design their WordPress sites.

Conclusion: Genesis Framework vs Underscores

Genesis Framework and Underscores are very powerful platforms that you can use to build unique WordPress themes.

However, the advantages they offer will depend on what you want your website to have and what you are trying to achieve for it.

If you want a more streamlined approach that includes everything you need to build your sites quickly, Genesis Framework works best.

However, if you prefer full control over your theme’s development, Underscores would be the better option. Just remember that it is a bit more complicated and may not be a viable option for newer WordPress users.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Genesis Framework vs Underscores 2021: The Best Way to Build Themes appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

Genesis Framework and Underscores are two popular WordPress platforms that allow their users to enjoy better flexibility and have full control over their sites.

These platforms have varying approaches when building WordPress themes, making it difficult to know which is the best for you.

Genesis Framework relies on child themes for design while ensuring it has all core functionalities. Underscores is the bare coding of a WordPress theme meant to be developed from the ground up.

Though both platforms require proper knowledge and experience, Underscores is more technical.

There are other factors that you need to know about Genesis Framework and Underscores before you can make an informed decision.

Quick Navigation

• Comparison
• User Experience
• Pricing
• Final Thoughts
• Conclusion

In this article, we will cover all of them in great detail, from user experience to pricing, in order to help you find the platform for your business.

Genesis Framework vs Underscores: Comparison

Genesis Framework vs. Underscores is an interesting comparison because they are very similar in many ways but present two very different approaches to building WordPress themes.

Before we go through the in-depth discussion on both these options, it would be best to get a snapshot of what they are and what they can do for WordPress developers.

What Does Genesis Framework Do?

If this snapshot seems a bit confusing, let’s address each of them one-by-one, starting with what you can get from Genesis Framework and what it can do for your website.

In essence, Genesis is just a framework that you-or anyone in the community – can use to develop a child theme.

You can either use it solely for your business or sell it to other Genesis users while providing the support it needs.

It is a very useful feature because both new and experienced WordPress users can take advantage of the lightweight and secure coding that Genesis Framework offers.

Developers can build a theme around the framework, and new WordPress users can choose from any of the child themes available for the community.

You want to have a child theme on top of a parent theme because it helps you future-proof your website while keeping it secured from any loopholes.

Most WordPress updates will require an update from the theme you are using, and some may cause issues with your site’s design and functionalities.

However, if you are building your website on a child theme, it will be easier to update WordPress and your parent theme without affecting how your site looks or functions.

Aside from this, you can take advantage of the clean coding that doesn’t slow down your site, and you get to keep your site secured from any loopholes that may be present with your current WordPress version.

Genesis Framework is the most popular and robust parent theme that you can use, and you have hundreds of different options for the designs to use on your website.

Aside from this, it also unlocks the limitless potential of WordPress because you can develop any child theme from scratch.

What Does Underscores Do?

Underscores is similar to Genesis Framework but also different at its core. For starters, it is not a framework, parent theme, or child theme-it is a starter template.

It will provide you with the bare essentials that you need to start building a functional WordPress theme.

The simplest way to explain what Underscores can do is turning an HTML prototype into a WordPress theme.

You can also build a WordPress theme for other people using the same toolkit without going through all the steps you need to build one.

It reduces the time you need to build WordPress themes, and you don’t even have to worry about the coding because Underscores has a deep integration with the Automattic team and the Gutenberg editor.

These are two reasons why it is one of the most popular starter themes available.

You will likely want to use Underscores instead of Genesis Framework because it doesn’t depend on any development from the company or community.

Though it may be hard to imagine that StudioPress will discontinue its developments, in a hypothetical world where Genesis Framework stops its development, your child theme will eventually become obsolete because it is connected to the parent theme.

On the other hand, Underscores doesn’t rely on any entity, company, or community. You develop your theme with your own rules, and it is meant for development right from the start.

It is a standalone theme that solely relies on all of your developments.

User Experience of Genesis Framework and Underscores

The user experience is where the biggest difference between the two lies. Although both Genesis Framework and Underscores will let you build your “own” WordPress themes, this similarity only applies to web developers and experienced WordPress builders.

Users who have limited coding knowledge may not be able to take advantage of what Underscores can do.

Genesis Framework User Experience

The biggest advantage of Genesis Framework over Underscores -or any other starter theme or framework -is the community behind it.

With hundreds of developers designing their child themes and selling them to the community, even new users can take advantage of what it has to offer.

The truth is, WordPress frameworks may discontinue their development at any time. Still, with the massive support from its community, it is highly unlikely that StudioPress will stop developing the Genesis Framework.

This usability and theme availability are some reasons why more WordPress users may find the Genesis Framework easier to use than Underscores.

Anyone can pick any theme, as they would with any other WordPress theme, and enjoy the perks of using the Genesis Framework.

Underscores User Experience

Underscores is a much better option for experienced developers because it doesn’t rely on any company or community for its development.

If you are thinking about getting the Genesis Framework to develop your “own” theme, Underscores will provide you with better future-proofing and security.

It has all the steps you need to build a functional WordPress theme, allowing you to focus on the design. Plus, it has deep integration with the Automattic team and Gutenberg, making it even easier and more secure for you to build your site around.

New WordPress builders who are looking for themes using Underscores may find it difficult, but it is no different than looking for any other WordPress theme that is available.

Pricing of Genesis Framework and Underscores

Genesis Framework costs $59.95 for an unlimited license, while Underscores is free to download.

You also don’t have to go through many things to get your hands on Underscores -just give your theme a name, and you can start designing on top of it.

It is a bit different for Genesis Framework, and one could argue that it is also confusing. After all, you have the option to get the framework or the framework with a child theme.

You can also opt for StudioPress membership (Genesis Pro) to get your hands on everything you will need for your site.

The three Genesis Framework options are:

1. Genesis Framework: if you want to build a child theme on top of the Genesis Framework, this option lets you do just that. It is also the option most comparable to what Underscores can do-a framework or starter theme for experienced developers.
2. Framework + Theme: this option is for newer WordPress builders who don’t want to build their themes or don’t have enough coding experience. The price also varies depending on the child theme you want to use and where you are getting it.
3. Genesis Pro: if you are a developer or a new user who plans to build multiple WordPress sites on top of the Genesis Framework, this option is the best for you. It includes the framework, every StudioPress theme, support, and updates for $360 a year.

Final Thoughts on Underscores vs Genesis Framework

Like every decision with WordPress, choosing what is better for you depends on what you want to have and what you are trying to achieve.

Even everything that we have discussed so far, it can be daunting for some to pick one over the other. So, let’s summarize the basics to help you understand which of these two is better for you.

Why Should You Choose the Genesis Framework?

Genesis Framework is a more popular option because it caters to the needs of both the average and experienced WordPress users.

However, it is not always the best option, and many may not even find it a viable option for them. Here are some instances where using Genesis Framework will be beneficial for you:

• You want to build a child theme on top of a parent theme that gets a lot of support from its community.
• You are confident that StudioPress will keep developing the Genesis Framework, and it won’t make your child theme obsolete.
• You would rather pick a theme that works and take advantage of the security and simplicity that Genesis Framework offers.
• You want to save time updating your framework whenever WordPress releases a new update and just focus on developing your child theme.

You can get many other advantages from using the Genesis Framework, but most of them will only be beneficial if you fall into one of these instances.

It would be best to get a clear picture of what you really want to achieve before you start investing in this framework.

Why Should You Choose Underscores?

Underscores is the bare bones of WordPress themes. It is not as popular as the Genesis Framework, but it has been available to developers since 2010.

It was only after the Gutenberg release that it gained more traction for users. Here are the instances where using Underscores will be beneficial for you:

• You want full control over your theme without relying on a company or community for the development.
• You have enough experience in building themes, and you only need a toolkit that will help you build one efficiently.
• You want to develop a unique theme for your business that isn’t available to any WordPress user.
• You want to explore the real potential of WordPress and have functionalities that aren’t available to the existing themes.

Underscores may seem a bit more complicated, but that’s the goal of this starter theme – it gives you everything you need for a functional WordPress theme and lets you decide how it looks and functions.

It only provides a toolkit that makes it easier for developers to design their WordPress sites.

Conclusion: Genesis Framework vs Underscores

Genesis Framework and Underscores are very powerful platforms that you can use to build unique WordPress themes.

However, the advantages they offer will depend on what you want your website to have and what you are trying to achieve for it.

If you want a more streamlined approach that includes everything you need to build your sites quickly, Genesis Framework works best.

However, if you prefer full control over your theme’s development, Underscores would be the better option. Just remember that it is a bit more complicated and may not be a viable option for newer WordPress users.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Genesis Framework vs Underscores 2021: The Best Way to Build Themes appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

In theory, you would upload your logo to your header image, and Genesis would call in both the Title title AND the header image and display both. Except in Genesis it doesn’t.

I searched far and wide for a solution, and couldn’t find one so after some time playing around with my dev tools, I came up with a workable solution and that is using a pseudo element in CSS.

A Pseudo element is used to style specified parts off an element, eg. Before, first-line, first-child and so on.

Using pseudo elements in CSS allows us to further customise our Genesis theme without having to copy markup in the parent theme files, altering it, and adding a copy of that file to our child theme.

The specific pseudo element that I used to add my logo to my site title in Genesis, was the ::before selector. I targeted my .site-title a element, and added a ::before pseudo class to add an image above my site title.

You can see the result at the top of my page, and you can copy the markup on Github. Whilst I could have only shared the site-title a with the pseudo element, I added all my site-title CSS in as well in case it is different from yours, depending on which theme you are using.

I hope this solution works for you, and please leave a comment and let me know if you need any help.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Add a logo on top of your site title in Genesis appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

In fact 35% of the worlds websites run on WordPress, including these top international and Australian brands:

• The Walt Disney Company
• 7 Plus
• Sony Music
• Techcrunch
• Goop
• Bloomberg
• Variety
• News.com.au

There are SO many plugins in the WordPress repository these days, and whether you are starting out or a seasoned user it can be overwhelming to know which plugins are worth having on your site and which aren’t benefiting your business enough to keep them installed.

Having alot of plugins installed on your site significantly slows your site speed down, and also increases the chance of having it break. So you want to operate with high quality plugins that are well maintained (my rule is if there isn’t an update at least every 3 months, do not use it) but also a minimal amount, with these two points in mind.

I am constantly looking for ways to reduce my website plugin dependency, and whilst a few are a work in progress, there are 5 plugins that as a developer or a user you absolutely MUST have in 2021.

1. Sucuri.

Sucuri is a cybersecurity company that specialises in WordPress security and they protect your site from ddos attacks, malware, hackers and bot traffic. When you install this plugin, all of your site traffic goes through their firewall, and all the malicious activity is blocked before they enter your website. This ensures your site has only real customers, and no bots or hackers. Does this slow down my site speed? No not at all, they use a CDN, which I use alongside WP Rocket anyway to increase site speed.

One of the un-sung benefits of Sucuri is that this provides more transparency in your google analytics regarding your website traffic. I mean 40k visitors in a month looks great, until you realise they were mostly bots and your site is now compromised. Do you want to spend hours, days trying to figure out why your site is broken? Thousna d of dollars in lost business? Yeah, i didn’t think so.

The best part is the Sucuri wordpress plugin is FREE to everyone, so even if you’re not transacting online, I cannot think of any reason as to why you wouldnt install this plugin. An absolute MUST for E Commerce merchants.

2. Antispam Bee

Antispam Bee blocks spam comments on your WordPress posts, and also helps keep your google ranking in tact by not having spammy comments and links to spell casters in your website. I’ve chosen Antispam Bee over Akismet, purely because the Bee is free, and when you have a free plugin that does as good a job as a paid plugin, I’d always recommend the free one to keep costs down.

Spam comments don’t just look tacky, they fill your database with comments you don’t need or want, and if you allow these comments to continue then over time you are bulldozing your brand integrity as well as slowing your site down.

The backend options of Antispam Bee let you choose basic or advanced filters for spam protection such as trust commenters with Gravatars, trust approved commentors, and also to delete spam comments automatically after a period of time. You definitely want to have this, it will save you time and money later on.

3. Yoast SEO

Yoast SEO is a well loved plugin in the WordPress community and for good reason. According to yoasts website, yoast will bring your more visitors, attract more visitors from social media, and increase your readers engagement. Sounds awesome right?

I use Yoast on my site, as well as client website to ensure each page has the right keywords to maximise its visibility in search engines, and I can tell you there is a big difference in the before and after, although the results take time – 6-8 weeks usually.

Heres what Yoast looks like under the hood. Each tab gives you tasks to work on to improve the keywords and readability of your site. Yoast is user friendly, and hugely popular because anyone can do it. The premium plan suggests popular search words and related keyphrases for you to add in, to increase your Google visibility.

It’s super easy to use, you won’t regret it.

4. WP Rocket

WP Rocket is the only paid plugin on this list, but it is SO worth it. WP Rocket is a caching plugin, that minifies all your CSS + JS files, lazyloads images, clears old database files, and spins up your website through a CDN for faster loading time.

WP Rocket is $49 a year- but that is a small price to pay for the results. As you know, how quickly your site loads affects your google ranking. But, it also impacts on your user experience. If clients come to your site and it’s loading slowly, they are likely to leave and well we don’t want that. If you don’t believe me, here is a before and after of this site, after I analysed it through GTMetrix.

I did all of the above, plus I deleted any unused media files, and cut down my plugin usage to reduce lag time. I also deleted some JS scripts and JQuery scripts that came with my Genesis child theme, that I wasn’t using. Now, bear in mind it is very difficult to get an “A” score on GTmetrix, in fact I’ve never seen it. If anyone has, please link it in the comments below.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post The 4 best plugins you need in 2021 for your WordPress website appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.

If you’re starting out on WordPress, you have most likely fallen into the “more is better” trap and installed every plugin that sounds great you can get your hands on. This is a very bad idea. I’ll attempt to explain why:

Why’s that? Each plugin is build and maintained by a different developer/company. This means they all have different code structures, and some are built on http1, and newer plugins support http2, some of them are built on HTML, and others HTML5, Some do not support CSS3 and so on. On top of this, these plugins are also developed for certain versions of PHP and WordPress. Installing so many plugins without reading the docs first and referring back to your owns sites versioning of PHP and WordPress, there is likely to be a conflict between two plugins who are targeting the same WordPress core hooks, which will usually result in your site going down, or breaking in some way.

So, if you find yourself in the unsavoury position of your WordPress site breaking or not functioning as it should, here’s a walkthrough on how to troubleshoot that. Note this is a beginners guide; we will not be diving into the theme files or showing you how to debug in WordPress, as that is more advanced and most definitely not for a WordPress user.

Checking plugin conflicts, using a plugin

After ranting on about how you shouldn’t just install plugin willy nilly, and how they can break your site I’m going to….ask you to install another plugin. LOL. Let’s do this.

1. Deactivate all your WordPress plugins. You can bulk deactivate them from the installed plugins menu like so:

2. Change your theme to the Twenty Twenty or Twenty Twenty one default theme.

By deactivating your current theme, we are excluding all of the files and functions that could be contributing to your site breaking, and my process of elimination, we will ascertain whether a plugin has broken your site or if it’s part of your theme files.

3. Install the Health Check & Troubleshooting plugin in your plugin repository

Click on plugins, add new, and search for Health Check & TroubleShooting in the wordpress plugin repository. You can also download it here and upload the zip file.

4. Activate the plugin, and then navigate to ‘Tools’ and ‘Site health’

5. Click on the troubleshooting tab, and enter troubleshooting mode.

6. Check the warnings you are given in troubleshooting mode.

If there are none that are obvious, then navigate to the front end of your site and see if the error is happening. If it is, then move on to Step 7.

7. Reactivate the plugins, one by one and check the front end of your site until the error is reproduced.

This is tedious, but it’s likely we will find the plugin that is causing issues for you, or if the error is not happening then we will know it’s code in your theme files.

8. If you have found the plugin causing issues, delete it, and reinstall your theme.

Once your working theme is reinstalled and the plugin has been deleted, your site should be working perfectly! Congratulations! At this stage I would search and test an alternative plugin to the one that was causing issues, and if that is not an option, I would log a ticket with the plugin developer and ask them to assist you in figuring out why this plugin is breaking your site. They may or may not be able to get to the root of the issue, but most will be helpful and try to assist you in anyway they can.

9. If you have arrived at step 9, then there is an issue with one of your theme files.

Most likely your style.css file of functions.php file if you have been making edits to your child theme directly from the wordpress dashboard. If this is the case, you need to contact your hosting provider, and ask them to reinstall the latest backup of the site from when the site was working. If you’re unsure I would go 7 days back, reinstall the files and see if it is functioning properly.

So if you made it through this tutorial, and you gave this a go, please let me know in the comments how it worked out for you, or what additional steps you took to find the source of your site errors.

Jane James is a WordPress web developer based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

The post Fix your broken wordpress site by troubleshooting plugin conflicts appeared first on Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |.