Author: yogesh.akyinnovative

If you’re looking to customize your WordPress site, adding custom code can help you enhance its functionality and appearance.
You can do it without plugins by modifying files like functions.php, or you can use plugins for a more user-friendly experience.
In this guide, we’ll walk you through both methods so you can choose the best option for your needs!

What is Custom Code in WordPress?

WordPress custom codes are added to modify the functionality or appearance of your site beyond what is provided by themes and plugins.

These also typically refer to custom PHP code, CSS, or JavaScript. Adding these codes to your WordPress website can be difficult sometimes, especially if you are new to all of these.
But there is no need to worry about that because here we are with some common ways to add custom code in WordPress.

There are typically two main questions that arise when you want to add Custom code in WordPress that are;

• 
  
  Can I add custom code to WordPress without plugins?
  
• 
  
  Can I add custom code to WordPress using Plugins?
  

Here, in this blog, we will tell you both ways so that you can decide for yourself what suits you the best.

Can I Add Custom Code to WordPress Without Plugins

Yes, you can add your own code to WordPress and do that without using plugins, such as directly modifying your theme or using custom functions.

Here are a few methods you can use to add custom code in WordPress without plugins.

• Modify the functions.php file in your theme. It allows you to add custom functions and code snippets that affect your site’s behavior. Be cautious of syntax errors, as they can break your site.

• Create a custom page template to add custom code in WordPress, create a customized page template. This method enables you to design unique page layouts with specific code and features. Assign the template to a page through the WordPress editor.

• Use custom hooks and filters in functions.php. Hooks and filters let you modify or extend WordPress functionality without altering core files, providing a flexible way to integrate custom code.
• Add custom shortcodes in functions.php. Shortcodes allow you to insert dynamic content into posts and pages using simple tags. Define them in functions.php and use them within the WordPress editor.
• Use code Block in WordPress This feature in the Gutenberg editor lets us add and display custom code snippets, like HTML, JavaScript, or CSS, directly in our posts or pages. It is useful for embedding code examples or containing custom functionality and ensures the code is generated correctly without being executed.

Can I add custom code to WordPress using Plugins

Yes, we can definitely do that with plugins, too, and there are lots of plugins available to choose from. Here, we will show you one of the best WordPress custom code plugins.

Directly modifying themes or core files can cause issues if not done correctly, potentially breaking your site.

To protect your site, there are plugins that we can use to add custom code in WordPress.

Code Snippets

Add this WordPress custom code plugin, which is used to manage custom code snippets without modifying your theme’s functions.php file. It’s user-friendly and provides a safe way to add code snippets.

Features:

• Add, edit, and delete code snippets
• Activate or deactivate snippets easily
• Group snippets for better organization
• Import/export snippets

Now that you have read both ways to add custom code in WordPress, you can choose what is more convenient for you.

But there is one more way to that, which is by using Elementor.

Customize WordPress Code using Elementor

Inserting code in WordPress with plugins or without them requires a lot of effort and experience.

But then, we have one more option,

That is the easiest and likely the most convenient one, and you can use a Page Builder.
And more specifically, Elementor Page builder because it is undoubtedly one of the best in its game.

There are two ways to add custom code in WordPress with the help of Elementor, that is, by using its free or paid variant. Here are the features of both.

Elementor Free Version

Elementor Free might not be as flexible as the Pro, but this is how you can add custom code in WordPress. Here are the features:

HTML Widget allows you to add custom HTML code directly to your pages.

Features

• Ideal for embedding custom HTML elements or third-party integrations.
• Does not support direct JavaScript or CSS code embedding.

Elementor Pro Version

Elementor Pro has more advanced features than the free one, obviously because it is paid. Here are a few ways you can add Custom Code in WordPress through Elementor Pro :

Custom Code Feature lets us add custom JavaScript, CSS, and HTML code that can be applied globally or to specific pages/posts.

Features:

• Apply code globally or conditionally on specific pages/posts.
• Includes syntax highlighting and code error checking.
• Managed directly within Elementor’s interface.

Theme Builder allows you to create and customize theme templates (headers, footers, single post templates, etc.) using Elementor’s visual editor.

Features:

• Comprehensive control over site-wide templates.
• Integration with Elementor’s design and customization tools.

Conclusion

As we mentioned in this blog, there are different ways you can add custom code in WordPress. You can choose what is best for you, and if you know coding, you can definitely add it via manual method without any plugins.

You can use plugins to be on the safer side, and if you opt for convenience with better results, you go with Elementor. Hence, the choice totally depends on your requirements.😊

The Navigation Menu in WordPress is one of the most essential features of a website. As the name suggests, it helps in navigating the users to the place they want to visit on the site.

It helps make the site more appealing, and without the navigation menu, every website looks incomplete and bland.

So, if you want to add a navigation menu in WordPress and you do not have any idea about how to do that, there is no need to worry.

Here, we will show you how you can add a Navigation Menu to your WordPress Website.

There are a total of three ways to add a navigation bar to a WordPress website that are:-

• 
  
  How to Create a Menu in WordPress without Plugins
  
• 
  
  How to add Menu in WordPress Plugins
  
• 
  
  How to Create Menu in WordPress using Elementor
  

Let’s go ahead with this and understand these methods and how they will be able to help us make our site more appealing.

How to Create Navigation Menu in WordPress without Plugins?

Positioned under Appearance & Menus , this section lets you create menus, add items, and build up menu locations without any additional tools or plugins.

You can use the built-in Customizer (Appearance > Customize > Menus) to create and manage menus. This provides a live preview of changes as you make them.

Features

• Create simple navigation menus using existing pages, posts, categories, and custom links.
• Assign menus to predefined locations in your theme (e.g., primary, footer).
• Adjust menu item order and hierarchy with drag-and-drop functionality.

How to add a Menu in WordPress with Plugins

Creating a Navigation Menu in WordPress with plugins gives you more flexibility than doing without plugins. You can add different styling options, effects, elements, icons, etc. There are a number of plugins to choose from.

Here, we have a few for you, and you can read what features they provide and choose from them.

Max Mega Menu

Creating a mega menu in WordPress enhances the capabilities of standard default menus already present on the site. You can include multiple columns, icons, and advanced styling options.

Provides extensive styling options for submenus, including background colors, borders, and hover effects, drop-down menu, etc.

UberMenu

Provides extensive customization options, including responsive design, advanced styling, and integration with custom post types.

Customize multi-column mega menus with detailed content control. Customize submenu appearance and set conditions for display based on criteria like user roles or specific pages.

WP Mega Menu

It supports various menu layouts and styles and includes advanced submenus styling, such as background images, hover effects, and typography settings.

Supports adding interactive elements like widgets, forms, and icons to submenus.

If Menu

This lets you create conditional menus and submenus based on user roles, specific pages, or other criteria.

Provides options to hide or show submenu items based on conditions (e.g., user roles, pages).

How to Create Menu in WordPress using Elementor

Now that you have understood both methods of adding a navigation menu in WordPress with or without plugins, we will now jump on the Real Deal, which is adding the Elementor Navigation Menu Widget to your website,

This is the best way for you if you’re a beginner in content creation but want to make your website look more professional.

There are two ways to add a navigation menu in WordPress through Elementor, with Elementor FREE and PRO.

Here, we present you both ways.

Elementor Free

As this version of Elementor is free, it has only limited features, but you can still definitely try it. Go PRO once you are satisfied with the page builder.

Here are the features mentioned that Elementor provides its free users to add a navigation menu in WordPress;

Its free version is a basic custom  NAV menu WordPress plugin that allows users to integrate and style WordPress menus within Elementor’s visual editor.

You can place this widget anywhere on a page or template. It also has basic styling options available, such as changing colors, typography, and spacing.

However, it does have some limitations, like Design Control not supporting advanced features like multi-column layouts or mega menus and the lack of the Theme Builder feature, which means you cannot create or customize headers and footers site-wide.

Elementor Pro

 Here, we present you all of its features and elements so that you can decide for yourself why one needs to have the Pro version if they want to add a navigation menu bar on their site.

• All Free Features
• Advanced Widgets & Pro Templates
• Theme Builder
• Advanced Responsive Design
• Custom Fonts & Advanced Typography
• Global Settings

As Elementor is one of the best page builders out there, it is quite evident that its Pro version will naturally be one of the best ways to add a Navigation menu in WordPress.

Advanced NAV Menu Options

An enhanced version of the navigation menu in WordPress offers more advanced features for adding a custom menu in WordPress options. 

It provides extensive styling options, including custom fonts, colors, spacing, and hover effects. This allows users to create visually rich and highly customized menus.

It also supports advanced menu layouts, including horizontal and vertical alignments and multi-level dropdowns.

Theme Builder

This feature allows you to design custom headers and footers, which can include menus. It enables you to create a uniform and fully customized navigation menu in WordPress that lets your users experience your site.

Dynamic Content

You can integrate dynamic content with your menus, allowing you to include site-wide elements and custom conditions.

Elementor Pro supports more complex dropdown menus with customizable styles and layout options, including full-width dropdowns and mega menus. It also has an advanced drag-and-drop editor for designing menus with live previews.

Key Features

It is also a WordPress responsive menu plugin that allows different types of menus to appear on different devices, like WordPress mobile menu, WordPress tablet menu, etc., to ensure a responsive and user-friendly design.

Conditional logic for showing or hiding menu items based on user roles, pages, or other criteria. Includes animation effects for menu transitions and interactions, enhancing user engagement.

Conclusion

• As we understood in the blog, adding a navigation menu in WordPress is important for improving the user experience and making it look professional.
• Now, whether you use the built-in Customizer, plugins for additional flexibility, or Elementor for advanced customizing features, each method offers different benefits to fit your needs, some better than others.
• Explore these options to find the best fit for your website and enjoy a seamless navigation experience!

Custom icons in WordPress enhance your website’s visual appeal and user experience. They align with your branding and design, improving navigation and highlighting key features.

By replacing generic icons with unique symbols, you represent your content more effectively and improve accessibility.

Additionally, custom icons ensure that visuals scale properly across different devices and screen sizes.

What are SVG Custom Icons in WordPress?

SVG (Scalable Vector Graphics) are graphic elements defined using SVG markup. They allow you to create vector-based icons that are resolution-independent and scalable.

Creating custom SVG icons can be fun and rewarding, as can tailoring your design to fit your specific needs. SVG (Scalable Vector Graphics) is a versatile format that allows for high-quality graphics of any size.

To add SVG custom icons to your WordPress, you need to download SVG files. To do this, you need to make your WordPress site supportable for SVG files. Here is how you would do that.

How to make a WordPress website supportable for SVG Files?

There are two ways to add custom SVG icons to WordPress. You can do it with or without the help of plugins here, and we will tell you both ways.

How do you enable SVG upload WordPress without Plugins?

We can manually add SVG support to WordPress with custom codes. Here is how.

If you prefer to add SVG support manually without using a plugin, you can modify your theme’s functions.php file to allow SVG uploads. Be watchful and ensure your SVG files are sanitized to avoid security vulnerabilities while adding custom icons in WordPress.

1. Add Code to functions.php

Open your theme’s functions.php file (located in wp-content/themes/your-theme-name/functions.php) and add the following code:

				
					// Allow SVG uploads
function add_svg_mime_types($mimes) {
 $mimes['svg']='image/svg+xml';
 return $mimes;
}
add_filter('upload_mimes', 'add_svg_mime_types');
// Ensure the SVG file is sanitized
function sanitize_svg($file) {
 if ($file['type']==='image/svg+xml') {
     $svg = file_get_contents($file['tmp_name']);
     $svg=preg_replace('/<?xml.*??>/','', $svg); // Remove XML declaration
     $svg = preg_replace('/<!DOCTYPE.*?>/','', $svg); // Remove DOCTYPE declaratio|
     $file['tmp_name'] = tempnam(sys_get_temp_dir(), 'svg') . '.svg';
     file_put_contents($file['tmp_name'], $svg);
     $file['size']=filesize($file['tmp_name']);
 }
 return $file;
}
add_filter('wp_handle_upload_prefilter', 'sanitize_svg');
				
			

This code snippet does two things.

• Allows SVG files to be uploaded.
• Sanitizes SVG files by removing XML and DOCTYPE declarations to reduce potential security risks.

2. Update .htaccess for Security (Optional but Recommended)

To prevent direct access to SVG files which might contain scripts, you can add the following lines to your .htaccess file (usually located in the root directory of your WordPress installation):

				
					# Block direct access to SVG files
<FilesMatch ".svg$">
    Order Allow,Deny
    Deny from all
</FilesMatch>
				
			

This process of making a WordPress website supportable for SVG Files won’t be as safe as using a plugin, and for that, you can use this method instead.

How do you enable SVG to upload WordPress with Plugins?

There are a lot of plugins that can help you quickly enable SVG support and add custom icons in WordPress website.

SVG Support is a popular plugin that allows SVG uploads and provides options to enable inline SVG rendering.

Here are the steps to enable it in your WordPress.

1. Go to Plugins > Add New in your WordPress dashboard.
2. Search for “SVG Support.”
3. Install and activate the plugin.
4. Go to Settings > SVG Support to configure the plugin’s settings.

How do you add a custom Dash icon in WordPress?

Dash icons are a font-based icon set used in the WordPress admin interface to enhance the user interface with visual cues.

1. Register Your Custom Icon: To add this code, place it in your theme’s functions.php file or in a custom plugin.

				
					// Hook into the admin menu to register the custom icon
add_action('admin_menu', 'register_custom_dashicon');
function register_custom_dashicon() {
    // Register the custom menu item with a Dashicon
    add_menu_page(
        'Custom Page Title',   // Page Title
        'Custom Menu Title',   // Menu Title
        'manage_options',      // Capability
        'custom_page_slug',    // Menu Slug
        'custom_page_callback',// Function to display the page content
        'dashicons-admin-generic', // Dashicons class name for the custom icon
        6                      // Position
    );
}
// Callback function for the custom page content
function custom_page_callback() {
    echo '<h1>Custom Page</h1>';
    echo '<p>This is a custom admin page with a custom Dashicon.</p>';
}
				
			

2. Use Your Custom Icon: You can now use your custom Dashicon class (dash icons-custom) in HTML:

Replace f101 with the Unicode of your chosen Dash icon from the Dash icons library.

How to add custom icons in WordPress using Elementor?

Now, after learning and understanding how to add dash icons in WordPress, you should know how to add custom icons in elementor with the help of plugins.

Here is how you’d add a custom icon in Elementor, free or paid;

Adding a Custom Icon in Elementor Free

Adding custom icons in WordPress using a page builder provides you with the flexibility to add icons easily. To add custom icons in Elementor free, you can opt for these two methods:

1. Using an Image Widget

• Ensure your icon is in a suitable format (SVG, PNG, etc.) and uploaded to your WordPress Media Library.
• Edit the page or post where you want to add the custom icon with Elementor.
• From the Elementor panel on the left, drag the Image widget to the section where you want to place your icon.
• Click on the Image widget to open its settings.
• In the Image field, click Choose Image and select your custom icon from the Media Library.
• Adjust the size, alignment, and other styling options to fit your design needs.
• Once satisfied with the appearance, click Update to save your changes.

2. Using the HTML Widget

• Ensure your icon file (especially if it’s SVG) is ready and available.
• Edit the page or post with Elementor.
• Drag the HTML widget from the Elementor panel to your desired location.
• If you’re using an SVG file, you can embed it directly. Paste the SVG code into the HTML widget.
• Use inline CSS or custom CSS (if supported) to adjust your icon’s size, color, and other styling aspects.
• Click Update to save your changes.

Adding a Custom Icon in Elementor Pro

Elementor Pro offers more flexibility with Custom icons in WordPress, including its Icon Library and advanced widgets. You can use custom icons in several ways:

Using the Icon Box Widget

1. Upload your custom icon to the Media Library if it’s not already there.
2. Please edit the page or post it using Elementor Pro.
3. Find the Icon Box widget in the Elementor panel and drag it to your section.
4. In the Icon field, click on the icon to open the icon library.
5. Click on the Upload tab or choose an SVG icon if available.
6. Alternatively, you can use the Icon Library if your icon is included.
7. Adjust the icon’s size, color, and other styling options within the Icon Box settings.
8. Update the title, description, and other elements as needed.
9. Click Update to save your changes.

Using the Image Widget

1. Ensure your custom icons in WordPress are uploaded to the Media Library.
2. Please edit the page or post it using Elementor Pro.
3. Drag the Image widget to your desired location on the page.
4. Click on the Image field and choose your custom icons from the Media Library.
5. Customize the size, alignment, and other styling settings as needed.
6. Click Update to save your changes.

There are lots of plugins out there to choose from if want to add custom icons in WordPress, but Elementor is undoubtedly the best. It has a free and pro set of custom icons to choose from. You can choose from either as per your preference, but it is quite evident that the paid one will be superior to the free one.

Benefits of using custom icons in WordPress website

There are several benefits of using custom icons on a WordPress website, such as

1. Custom icons in WordPress help reinforce your brand identity and create a unique visual style.
2. They ensure design uniformity and alignment with your website’s aesthetic.
3. Custom icons can make navigation and content more intuitive, enhancing user interaction.
4. Tailored icons can better represent specific functions or features unique to your site.
5. VG icons are scalable and often lighter than image files, improving load times and responsiveness.
6. Custom icons in WordPress can be styled and adjusted easily with CSS, offering greater design control.
7. Also, the icon loading speed is very fast, which provides better UX.

Custom Icon Libraries for Your Widgets

Elementor Pro’s custom icon libraries feature allows you to upload your custom icons in WordPress from the leading icon library fun generators that are:

• Fontello Icon Set: Fontello is a web font generator that lets users create custom icon fonts by combining different existing icon sets in CSS and SVG formats, making it a flexible choice for web design.
• Icomoon Icons: Icomoon offers a library of vector icons and a tool for creating custom icon fonts, SVG sprites, and CSS sprites. It is famous for its user-friendly interface and wide icon collection.
• Fontastic Icon SVG: Fontastic creates icon fonts and SVG sprites from custom collections for web projects, focusing on performance and compatibility with modern web technologies.

These custom icons in WordPress are available in the icon library, so you can use them within any widget elements that use them.

Conclusion

Incorporating custom icons in WordPress enhances your site’s design and functionality. Whether using SVGs or plugins, custom icons improve branding, user navigation, and overall visual appeal.

By using these icons in WordPress, you ensure a distinct and interesting user experience, strengthening your website’s identity and effectiveness.

Want to make your WordPress site more interactive and engaging? Adding a simple button can be something you need.

And with Elementor, you can create buttons that not only look great but also function seamlessly.

In this guide,show you step-by-step instructions on how to add a clickable button to your WordPress site using Elementor.

How to add a clickable button in WordPress?

Here is a step-by-step guide for you all, especially beginners, on how to add a button with Elementor to your WordPress website.

Open Elementor Editor: First step in order to add an elementor Button widget Go to your WordPress dashboard.

Navigate to the post or page to add the button.

Then, click Edit with Elementor” to open the Elementor editor.

Add a New Section (if needed): If you don’t have a section where you want to place the button, you’ll need to add one.

Click the “+” button to add a new section. Choose a structure for your section (e.g., single column, two columns).

Drag and Drop the Button Widget: In the Elementor editor, look for the “Button” widget in the left panel.

You can find it by either scrolling through the widgets or using the search bar.

Drag the Button widget and place it in the desired section.

Configure Button Content: With the Elementor Button widget selected, you’ll see options in the left panel under the “Content” tab.

• Text: Enter the text to display using the button (e.g., “Click Me).

• Link: Add the URL where you want the button to redirect. You can also set this to link to a section within the same page or open a popup.

Customize Button Appearance: Switch to the “Style” tab to customize the button’s appearance.

• Button Text Color: Select the color you want for the text on the button.

• Background Color: Select the button’s background color. You can also set a gradient if you prefer.

• Border Type: To customize the border of a button in Elementor, you can choose the border type (solid, dashed, dotted, etc.), set the border color, and adjust the border width to your desired thickness.

• Border Radius: Adjust the roundness of the button’s corners.

• Padding: Set the space inside the button around the text.

Once you’re satisfied with the button’s design and functionality, click “Update” to save your changes and make the button live on your website.

How do you change the button shape and size in Elementor?

In the “Layout” section under the “Advance” tab, you can adjust the button’s size, alignment, and spacing. You can also set the width of the button to be full width, inline with text, or custom width.

Set Button Hover Effects: Switch to the “Hover ” tab under the “Style” section to set the appearance of the button when users hover over it.

Customize the hover color, background color, and other styling options to create a dynamic effect.

Responsive Settings: Check the button’s appearance on different devices (desktop, tablet, mobile) by using the responsive mode options in the Elementor editor.

Once you’re in Responsive Mode, you can tailor the appearance of the button for each device. Here’s how to adjust button styles for different screen sizes:

Adjust settings as needed to ensure the button looks good on all screen sizes.

Preview and Publish: Select the eye icon at the top of the Elementor panel to preview your changes.

If everything looks good, click “Publish” or “Update” to save the button style in Elementor and WP, and you can apply your changes to the live site.

Here, you have added a Button to your website page or post with the help of the elementor button widget.

Conclusion

In summary, adding a clickable button to your WordPress website is a straightforward process using the Elementor Button widget. This widget allows for extensive customization of button text, appearance, and link behavior.

By following this step-by-step guide, you can effectively utilize the Elementor Button widget to enhance user navigation and interaction on your site, making it a crucial element for any modern web design.