Tag - Custom

How to Create Custom Permalinks in WordPress


Do you want to create custom permalinks in WordPress for posts, pages, and other post types?

Recently one of our readers asked if it was possible to create their own custom permalinks aka page URL structure in WordPress.

In this article, we will show you how to create custom permalinks in WordPress without affecting your SEO.

Creating custom permalinks in WordPress

Since this is a comprehensive tutorial on creating custom permalinks in WordPress, we have created an easy to navigate table of content:

Permalinks are the permanent URLs of your individual blog posts, pages, and other archive pages on your WordPress site. Custom permalink is basically a URL structure applied to a specific page in WordPress without affecting the rest of your URL structure.

WordPress comes with an SEO Friendly URL structure which allows you to use an easy to understand URL structure for both humans and search engines.

For example: https://example.com/best-refrigerators-for-tiny-kitchens/

This is much better than URLs from the old days: https://example.com/index.php?p=4556

WordPress provides website owners with multiple options to choose from. You can view them by visiting Settings » Permalinks page.

Select permalink structure

Aside from changing the main permalink structure, WordPress also offers ways to customize the individual URLs of posts, pages, categories, tags, and other areas of your website.

You can also use WordPress plugins to create completely custom permalinks for specific sections of your website that overrides the default WordPress settings.

Let’s take a look at all the options one by one. We’ll start with the default built-in options that come with your WordPress website.

If you want to change the whole URL generation scheme for your website, then go to Settings » Permalinks page.

Select permalink structure

Simply select a URL structure for your individual posts. You can also use the tags shown on the screen to create a custom structure for your WordPress URLs.

Don’t forget to click on the Save Changes button to store your changes.

We recommend using a URL structure that includes the post name in the URL. This makes your URLs more SEO friendly and meaningful.

Note: You should change to a SEO friendly permalinks for all new WordPress blogs and websites. However, if you have an existing website that’s already getting traffic from search engines, then changing permalinks can affect your SEO rankings.

How to Change the Category and Tag URL Prefix in WordPress

By default, WordPress uses /category/ as the base for your category URLs and /tag/ for the tags pages. For example:

https://example.com/category/technology/
https://example.com/tag/fintech/

Category and tag base

You can change these base prefixes from the Settings » Permalinks page to anything that you like. For example,

https://example.com/topics/technology/ (for category pages)
https://example.com/hashtag/fintech (for tag pages)

Once you have the permalink structure setup, WordPress uses that as a template for all links on your site. However, you do have the option to modify the URL slug aka keywords inside the URL structure for individual posts, pages, and custom post types.

You can customize the slug part of the URL from the post edit screen inside the WordPress content editor.

Simply edit the post, page, or custom post type and click on the title field. You’ll notice the Permalink field appears on top of it.

Edit post slug to create custom URL

Go ahead and click on the Edit button next to it, and then change the URL slug to a custom permalink. Once you are done, click on the Save button to store the new permalink.

Customize post permalink

You can use this method for all post types including WooCommerce products, MemberPress courses, etc.

In the earlier step, we showed you how to modify the category and tag base prefix in WordPress. In this step, we will show you how to change the URL keywords for an individual category or tag.

Simply go to Posts » Categories page and click on the Edit link below the category you want to customize.

Editing a category details in WordPress

WordPress will now load the category details. From here, you can change the category slug to customize its permalink.

Change category slug to customize permalink

Similarly, you can edit an individual tag by visiting Posts » Tags page.

Edit a tag

You can also edit any custom taxonomies using the same method.

WordPress automatically adds the ‘/author/’ base to URLs leading to author archive pages. For example:

https://example.com/author/jsmith/

The problem is that WordPress does not come with an option to change the author URL base or the slug.

Luckily, as the saying goes, there is a plugin that can help.

Simply install and activate the Edit Author Slug. For details, see our step by step guide on how to install a WordPress plugin.

Upon activation, go to Users » All Users page. Next, click on the ‘Edit’ link below a username.

Editing a user details in WordPress

On the next page, scroll down to the Edit Author Slug section, and you will be able to choose an author slug or add your own. Don’t forget to click on the save changes button to store your settings.

If you want to change the author permalink base, then simply head over to the Settings » Edit Author Slug page. Here you will see an option to change the author base and even choose different author bases for users with different user roles.

Change author base

For more details, see our guide on how to change author URL slug and base in WordPress.

All the above methods allows you to customize WordPress permalinks to a certain extent. However, they cannot help you create completely custom permalinks.

That’s because WordPress by default doesn’t offer this functionality.

Luckily, there’s a plugin that can help. If you want to override the default WordPress URL structure for specific sections on your site, then follow the steps here.

The first thing you need to do is install and activate the Custom Permalinks plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to edit the post where you want to create a custom permalink. Instead of editing the permalink field at the top, you’ll find the option to create a custom permalink below the editor.

Creating a completely custom permalink for a post

Similarly, you can also create custom permalinks for categories. Go to Posts » Categories page and click on the edit link below the category that you want to change.

Editing a category details in WordPress

On the category details page, you’ll find the option to create a custom permalink for that particular category. You can even create a URL without the category base prefix.

Editing the category permalink

You can manage and disable all your custom permalinks by clicking on the ‘Custom Permalinks’ menu in the admin sidebar.

Manage your custom permalinks

Simply select the custom permalinks you want to delete and then click on the Bulk Actions menu to select ‘Delete permalinks’ option.

After that click on the ‘Apply’ button and the plugin will remove those custom permalinks. The deleted permalink will be replaced by your default WordPress permalink scheme.

WordPress automatically handles changes made to post and page URLs. However, it may not set up redirects for your custom author permalinks or completely customized permalinks.

In that case, you’ll need to set up proper redirects to avoid 404 errors on your website.

First, you need to install and activate the Redirection plugin.

Upon activation, you need to visit Tools » Redirection page to set up redirects. You need to add the old link in the ‘Source URL’ field and the new URL in the ‘Target URL’ field.

Setup redirects

After that click on the ‘Add redirect’ button to save your changes. For more details, see our beginner’s guide to setting up redirects in WordPress.

We hope this article helped you learn how to create custom permalinks in WordPress. You may also want to see our ultimate WordPress SEO guide to get more search traffic to your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Create a Custom Home Page in WordPress


Often users ask us if it’s possible to create a custom homepage in WordPress.

By default, WordPress shows your blog posts on the homepage. However as a business website, you may want to create a more engaging homepage that helps users find what they need and boost your sales conversion.

In this article, we will show you how to easily create a custom homepage in WordPress. We will show multiple methods, and you can choose the one that’s easier for you.

Creating a custom homepage in WordPress

What is a homepage?

A homepage is a default introductory page or the frontpage of a website. It is the page that appears when someone enters your website’s domain name in their browser’s address bar.

Homepage example

The main purpose of the homepage is to introduce users to your website or business. Ideally, it should provide users essential information about your business, so they can continue exploring other pages on your site.

By default, WordPress displays your recent blog posts on the homepage. This is not good as it only shows a few of your current articles.

If you run a business website, then the default homepage does not tell users about your business, products or services. It also doesn’t provide users a way to contact you.

The good news is that WordPress already comes with a built-in functionality to create custom home page.

Selecting a Custom Page to be Used as Homepage in WordPress

WordPress allows you to easily use any page on your website as your homepage. You can simply go to Pages » Add New page inside WordPress admin area to create a new page.

Let’s give this page a title ‘Home’ and publish it. You will use this page as your custom homepage.

Don’t worry about layout or design at the moment. We will show you how to design your homepage later in this article.

Now, if you want to run a blog on your site, then you need to create a separate blog page to display your posts.

Once again, go to Pages » Add New page and create a page titled ‘Blog’. Go ahead and publish the blank page.

After creating the pages, you need to visit Settings » Reading page in your WordPress admin. From here select ‘A static page’ option under ‘Your homepage displays’ section.

Select home and blog pages

Next, you need to select the homepage and the blog pages you created earlier.

Don’t forget to click on the ‘Save changes’ button to store your settings.

Now that you have set up a page to be used as your custom homepage, let’s start designing the custom home page for your WordPress site.

Method 1. Create a Custom Homepage in WordPress using Gutenberg

WordPress introduced a new block-based eidtor called Gutenberg in December 2018. This new editor allows users to not just write content but create beautiful layouts as well.

It uses blocks for each content element which enables you to organize content blocks to create a page structure that you like.

WordPress includes blocks that can be used for design purposes like cover images, columns, tables, text and media, galleries, and more.

Editing your custom homepage layout using Gutenberg

Each block comes with its own settings, which allows you to customize its appearance to meet your design requirements.

You can extend available blocks with Gutenberg block plugins to add more blocks to your arsenal. These plugins allow you to use advanced elements like testimonials, sliders, services, and other common design features.

Using advanced block library plugins to make homepage layout

You can also use Gutenberg ready WordPress themes which give you more flexibility to work with blocks.

We recommend using Astra, it comes with Gutenberg website templates that you can install using their Astra Starter Sites plugin.

Once you import a template, you can edit it using the default WordPress editor and create a highly professional looking homepage for your website.

Method 2. Create a Custom Homepage in WordPress using Page Builders

This method is very easy and does not require any coding or design skills. For this method, you will be using a WordPress page builder plugin.

A page builder plugin allows you to easily create custom page layouts by using a simple drag and drop interface.

We recommend using Beaver Builder because it is the most beginner-friendly page builder plugin on the market. It comes with dozens of custom homepage templates that you can install with a single click.

Once installed, you can edit the template using point and click tools. You can replace content and images with your own content, and even extend the template by adding more modules, widgets, and sections.

Creating a custom homepage using Beaver Builder

Beaver Builder also gives you access to Beaver Themer, which allows you to make your own custom WordPress theme without writing any code.

For more details, see our guide on how to easily create custom WordPress layouts using Beaver Builder.

As an alternative, you can also try Elementor. It is also an immensely popular WordPress page builder plugin. It also comes with drag and drop templates and an easy to use interface.

Creating a homepage layout using Elementor

For details, see our tutorial on creating custom page layouts with Elementor.

Method 3. Manually Create a Custom Homepage in WordPress (Coding Required)

This method is not recommended for beginners as it requires coding. You need to be familiar with the WordPress coding practices, PHP, HTML, and CSS to use this method.

Let’s see how this works.

Your WordPress theme is made up of different files. Some of these files are called templates and control the display of certain areas of your website. See our WordPress template hierarchy cheat sheet for more details.

One of these templates is called front-page.php. If your theme has this template, then WordPress will automatically use it to display your custom homepage.

front-page.php template

However, if your theme does not have it, then you can create one for yourself/

Simply create a blank file and save it as front-page.php. After that you need to upload it to your current theme’s folder on your WordPress hosting account using FTP.

As soon as you upload this file, WordPress will start using it to display your homepage. However, since this file is completely empty, you will see a blank white page.

To fix this, you can start adding your HTML code to display contents of your custom homepage. An easier approach is to use the existing code and templates in your WordPress theme.

For example, you can use the same header and footer. WordPress makes it super easy to include those templates.

Here is a sample code where we removed the content and sidebars while preserving the header and navigation templates from the theme.

<?php /* 
This page is used to display the static frontpage. 
*/ 

// Fetch theme header template
get_header(); ?>
	<div id="primary" <?php astra_primary_class(); ?>>

	<div class="custom-homepage-container"> 

	You custom homepage code goes here

	</div> 

	</div><!-- #primary -->
//Fetch the theme footer template 
<?php get_footer(); ?>

Tips on Making an Effective Custom Homepage in WordPress

Your website’s homepage is the most important page on your website. Users look at it to learn more about your business, products, and services.

We recommend keeping your homepage design as simple as possible. On our own websites, we have learned that our users find simpler layouts more helpful.

Try to avoid clutter, but don’t hide important information that your users would want to see on the homepage. You also need to prioritize which content appears first in your layout.

Write down the goals you want to achieve before making a custom homepage for your website. This exercise will help you come up with a clear design goal.

For most businesses and blogs, the number one goal is to convert website visitors into customers. To achieve this, you’ll need OptinMonster.

It is the best WordPress popup plugin and lead generation software. It helps you convert website visitors into subscribers and paying customers.

Next, you would want to track how your custom homepage is performing. For this, you need to install Google Analytics on your website. It helps you see where your users are coming from and what they do on your website.

You would also want to make it easier for your users to contact you. For this, you will need the WPForms plugin which is the best WordPress form plugin on the market.

You can also add a click to call button your website, so people can easily call your business phone.

Lastly, we recommend you to look around at your competitors and other popular sites in your industry/niche. We are not asking you to copy their design, but to learn from their best practices and then apply it on your own homepage layout.

We hope this article helped you easily create a custom homepage in WordPress. You may also want to see our proven tips to increase your blog traffic.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom Home Page in WordPress appeared first on WPBeginner.



Source link

How to Add a Custom Scrollbar in WordPress


Do you want to add a custom scrollbar in WordPress? Changing the appearance of scrollbar can help you stand out specially when making a custom theme for your website.

In this article, we will show you how to easily add a custom scrollbar in WordPress. We will show you two solutions and you can choose one that works best for you.

Adding a custom scrollbar in WordPress

Issues with Custom Scrollbar Colors

By default, CSS does not come with a ruleset that would let you change scrollbar properties. There are some proposals to add this, but they are not supported by most browsers at the moment.

To overcome this, designers and developers use browser-specific pseduo elements or JavaScript to override default scrollbar appearance.

We will show you both techniques. However, keep in mind that you must test your site with different browsers and devices to ensure it works properly on all browsers.

That being said, let’s take a look at how to add custom scrollbar colors in WordPress.

Method 1. Add a Custom Scrollbar in WordPress with a Plugin

This method is easier and recommended for most users. However, it does not support mobile browsers.

First, thing you need to do is install and activate the Advanced Scrollbar plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to head over to Settings » Custom Color Scrollbar Settings page to configure plugin.

Scrollbar color and background settings

From here, you can change the scrollbar color and the scrollbar rail background colors. You can then select the mouse scroll step, which is the scrolling speed of the mouse wheel.

You can also select whether you want to auto-hide the scrollbar or always display it.

You have the option choose ‘Cursor only’ option which would display the scrollbar rail but not the button.

Scroll options

Below that, you will find options to set the scroll speed, change rail alignment (left or right), and enable touch behavior.

Don’t forget to click on the save changes button to store your settings.

You can now visit your website to see your custom scrollbar colors in action.

Custom scrollbar colors preview

Method 2. Add Custom Scrollbar Colors in WordPress using CSS

This method uses CSS to style your scrollbar, which is faster than using jQuery.

However, it only works on desktop browsers using WebKit rendering engine like Google Chrome, Safari, Opera, and more.

It will not have any effect on mobile browsers or Firefox and Edge on desktop computers.

You will need to add the following custom CSS to your WordPress theme.


::-webkit-scrollbar 
    -webkit-appearance: none;

::-webkit-scrollbar 
  width: 10px;


::-webkit-scrollbar-track 
  background: #ffb400; 
	border:1px solid #ccc;


::-webkit-scrollbar-thumb 
  background: #cc00ff; 
	border:1px solid #eee;
	height:100px;
	border-radius:5px;


::-webkit-scrollbar-thumb:hover 
  background: blue; 


Feel free to change colors and other CSS properties.

Once you are satisfied, don’t forget to save your changes. After that, you can preview it in a supported browser.

This is how it looked on our demo website while viewing on Google Chrome on a Mac computer.

Scrollbar custom colors preview

We hope this article helped you learn how to add a custom scrollbar in WordPress. You may also want to see our guide on how to easily create a custom WordPress theme without writing any code.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.



Source link

How to Create a Custom Gutenberg Block in WordPress (Easy Way)


Do you want to create a custom Gutenberg block for your WordPress site? After the WordPress 5.0 update, you need to use blocks to create content in the new WordPress block editor.

WordPress ships with several useful blocks that you can use when writing content. Many WordPress plugins also come with their own blocks that you can use.

However, sometimes you may want to create your own custom Gutenberg block to do something specific.

If you’re looking for an easy solution to create custom Gutenberg blocks for your WordPress site, then you’re in the right place.

In this step by step tutorial, we’ll show you the easy way to create a custom WordPress block for Gutenberg.

Creating a custom WordPress block for Gutenberg

Note: This article is for intermediate users. You’ll need to be familiar with HTML and CSS to create custom Gutenberg blocks.

Step 1: Get Started

The first thing you need to do is install and activate the Block Lab plugin.

It’s a WordPress plugin that allows you to create custom blocks from your admin panel without much hassle.

Block Lab WordPress Plugin

To install the plugin, you may follow our beginner’s guide on how to install a WordPress plugin.

Once the plugin is activated, you can proceed to the next step of creating your first custom block.

Step 2: Create a New Block

For the sake of this tutorial, we will build a ‘testimonials’ block.

First, head over to Block Lab » Add New from the left sidebar of your admin panel.

On this page, you need to give a name to your block. You can write any name of your choice in the “Enter block name here” textbox.

Enter Custom Block Name

We will name our custom block: Testimonials.

On the right side of the page, you’ll find the block properties. Here you can choose an icon for your block and select a block category from the Category dropdown box.

The slug will be auto-filled based on your block’s name, so you don’t have to change it. However, you may write up to 3 keywords in the Keywords text field, so that your block can be easily found.

Custom Block Properties

Now let’s add some fields to our block. You can add different types of fields like text, numbers, email, URL, color, image, checkbox, radio buttons, and much more.

We’ll add 3 fields to our custom testimonial block: an image field for the image of the reviewer, a textbox for the reviewer name, and a textarea field for the testimonial text.

Click on the + Add Field button to insert the first field.

Image Field Options

This will open up some options for the field. Let’s take a look at each of them.

  • Field Label: You can use any name of your choice for the field label. Let’s name our first field as Reviewer Image.
  • Field Name: The field name will be generated automatically based on the field label. We’ll use this field name in the next step, so make sure it’s unique for every field.
  • Field Type: Here you can select the type of field. We want our first field to be an image, so we’ll select Image from the dropdown menu.
  • Field Location: You can decide whether you want to add the field to the editor or the inspector.
  • Help Text: You can add some text to describe the field. This is not required if you’re creating this block for your personal use.

You may also get some additional options based on the field type you choose. For example, if you select a text field, then you’ll get extra options like placeholder text and character limit.

You can click on the Close Field button once you’re done with the image field.

Following the above process, let’s add 2 other fields for our testimonials block by clicking the + Add Field button.

Final Custom Block Fields

In case you want to reorder the fields, then you can do that by dragging them using the hamburger icon on the left side of each field label.

To edit or delete a particular field, you need to hover your mouse over the field label to get the edit and delete options.

Once you’re done, click on the Publish button, present on the right side of the page, to save your custom Gutenberg block.

Step 3: Create a Block Template

Although you’ve created the custom WordPress block in the last step, it’ll not work until you create a block template named block-testimonials.php and upload it to your current theme folder.

Create a Block Template

The block template file will tell the plugin how to do display your block fields inside the editor. The plugin will look for the template file and then use it to display the block content.

If you don’t have this file, then it’ll display an error saying “Template file blocks/block-testimonials.php not found”.

Let’s create our block’s template file.

First, go ahead and create a folder in your desktop and name it blocks. You’ll create your block template file inside this folder and then upload it to your current WordPress theme directory.

To create the template file, you can use a plain text editor like Notepad.

Every time you add a new field to your custom block, you need to add the following PHP code to your block template file:

<?php block_field( 'add-your-field-name-here' ); ?>

Just remember to replace add-your-field-name-here with the field name.

For example, the name of our first field is reviewer-image, so we will add the following line to the template file:

<?php block_field( 'reviewer-image' ); ?>

Simple, isn’t it? Let’s do the same for the rest of our fields:

<?php block_field( 'reviewer-image' ); ?>
<?php block_field( 'reviewer-name' ); ?>
<?php block_field( 'testimonial-text' ); ?>

Next, we’ll add some HTML tags to the above code for styling purposes.

For example, you can wrap the reviewer image inside an img tag to display the image. Otherwise, WordPress will display the image URL which is not what you want, right?

You can also add class names to your HTML tags and wrap your code inside a div container to style your block content (which we’ll do in this next step).

So here’s our final code for our block template:

<div class="testimonial-block clearfix">
	<div class="testimonial-image">
		<img src ="<?php block_field( 'reviewer-image' ); ?>">
	</div>
	<div class="testimonial-box">
		<h4><?php block_field( 'reviewer-name' ); ?></h4>
		<p><?php block_field( 'testimonial-text' ); ?></p>
	</div>
</div>

Finally, name the file as block-testimonials.php and save it inside the blocks folder.

Step 4: Style Your Custom Block

Want to style your custom block? You can do that with the help of CSS.

Open a plain text editor like Notepad and add the following code:

.testimonial-block 
	width: 100%;
	margin-bottom: 25px;


.testimonial-image 
	float: left;
	width: 25%;
	padding-right: 15px;


.testimonial-box 
	float: left;
	width: 75%;


.clearfix::after 
	content: "";
	clear: both;
	display: table;

Once done, name the file as block-testimonials.css and save it inside the blocks folder.

Step 5: Upload Block Template File to Theme Folder

Now let’s upload the blocks folder containing our custom block template file to our WordPress theme folder.

To do that, you need to connect to your WordPress site using an FTP client. For help, you may check out our guide on how to upload files to your WordPress site using FTP.

Once you’re connected, go to the /wp-content/themes/ folder. From here you need to open your current theme folder.

Enter Theme folder using FTP

Now upload the blocks folder, containing the block template file and the CSS file, to your theme directory.

Once done, you can proceed to the final step to test your custom block.

Note: Block Lab plugin allows you to create theme-specific blocks. If you change your WordPress theme, then you need to copy the blocks folder to your new theme directory.

Step 6: Test Your New Block

It’s time to test our custom testimonials block. You can do this by heading over to Pages » Add New to create a new page.

Next, click on the Add Block (+) icon and search for the Testimonials block. Once you find it, click on it to add the custom block to your page editor.

Add Custom Block to Page Editor

You can now add a testimonial to this page using your custom block. To add more testimonials, you can always insert new testimonial blocks.

Once you’re done, you can preview or publish the page to check whether it’s working properly or not.

That’s all! You’ve successfully created your first custom WordPress block for your site.

Did you know that you can save time with reusable blocks in your editor? Check out our guide on how to easily create reusable blocks in the WordPress block editor and use them on other websites.

You may also want to see our guide on how to create a custom WordPress theme without writing any code.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Create a Custom Gutenberg Block in WordPress (Easy Way) appeared first on WPBeginner.



Source link

How to Easily Create a Custom WordPress Theme (without Any Code)


Do you want to create a custom WordPress theme from scratch?

In the past, you had to follow the WordPress codex and have a decent coding knowledge to build a custom WordPress theme. But thanks to new WordPress theme generators, now anyone can create a completely custom WordPress theme within an hour (no coding knowledge needed).

In this article, we will show you how to easily create a custom WordPress theme without writing any code.

Creating a custom WordPress theme without writing any code

Creating a Custom WordPress Theme for Beginners

Unlike static HTML sites, WordPress themes are a set of template files written in PHP, HTML, CSS, and JavaScript. Typically, you would need to have a decent understanding of all these web design languages or hire a web developer to create a custom WordPress theme.

If you hired a developer or agency, then the cost of a custom WordPress theme can reach thousands of dollars.

Since many small business owners couldn’t afford the high costs of a custom WordPress theme, a lot of them just settled for the default themes that came with WordPress.

Those who didn’t want to settle and wanted customizations either used a drag & drop WordPress page builder, or they used a theme framework to build a custom theme.

While WordPress theme frameworks made building a WordPress theme easier, they are a solution for developers, not an average website owner.

On the other hand, WordPress page builder plugins made it super easy to create custom page layouts using a drag & drop interface, but they were limited to layouts only. You couldn’t build custom themes with it.

Until Beaver Builder, one of the best WordPress page builder plugins decided to solve this problem with their add-on called Beaver Themer.

Beaver Builder best WordPress page builder plugin

Beaver Themer is a site builder add-on that allows you to create custom theme layouts using a drag and drop interface and without learning to code.

Let’s take a look at how to use Beaver Themer for easily creating a WordPress theme.

Setting up Beaver Themer to Build a Custom Theme

Beaver Themer is an add-on plugin for Beaver Builder, so you will need both plugins for this article.

First, you need to install and activate the Beaver Builder and Beaver Themer plugins. For more details, see our step by step guide on how to install a WordPress plugin.

Beaver Themer allows you to create a custom theme, but you will still need a theme to start with. We recommend using a light-weight theme that includes a full-width page template to act as your starter theme.

You can find many such themes in WordPress.org theme directory. Most modern WordPress themes include a full-width template. Our top picks are:

  • Astra – A free light-weight all-purpose WordPress theme that comes with built-in support for Beaver Builder.
  • OeanWP – Another popular free multi-purpose WordPress theme that comes with full page builder support.
  • StudioPress themes – All of their themes are compatible with Beaver Builder and would work great with Beaver Themer.

For the sake of this tutorial, we will be using Astra, which is light-weight and easy to customize WordPress theme.

Setting up Your Theme for Beaver Themer

When building a custom WordPress theme with Beaver Themer, it’s important to make sure that Beaver Themer has access to the full body of the page (from edge to edge).

This is the default Astra layout. As you can see that this layout includes a sidebar which can be difficult to work with when using Beaver Themer.

Default theme layout with a sidebar

You can change that by visiting the admin panel of your website and then navigate to Appearance » Customize page. From here, you need to switch to the Layout » Sidebars tab.

Turning off sidebars in your theme

Once there, simply select ‘No Sidebar’ under the default layout option and click on the Publish button to save your changes.

Your theme will now start using a layout with no sidebars. This is the best layout to use with Beaver Themer.

Theme layout with no sidebars

This full-page layout allows Beaver Themer to use every inch of the screen, so you can create a beautiful end-to-end visual experience.

Most WordPress themes include a template file for full-width pages. If you are using some other theme, then you may find an option to remove sidebars in your theme settings.

If you cannot find it, then contact your theme developer and they may be able to help you with that.

Once you have set up your theme to a full-width layout, you are ready to create your custom WordPress theme using Beaver Themer.

Quick Beaver Themer Fundamentals

Beaver Themer works on top of Beaver Builder. As a page builder plugin, Beaver Builder allows you to drag and drop items to a page to create custom layouts.

It has the following items that you can use in your layouts:

  • Template: A collection of columns rows, and modules that make up an entire page layout.
  • Columns: Vertical layout modules that help align content horizontally.
  • Rows: Horizontal collection of multiple modules
  • Module: An item that outputs specific information such as title, text block, table, gallery, etc.

Simply edit a page in Beaver Builder and then click on the add button at the top right corner. You can then drag and drop columns, rows, modules, to your page and start editing them right away.

Using Beaver Builder

If you don’t want to start from scratch, then select from a list of pre-made templates to begin with.

Beaver Builder templates

Beaver Builder also allows you to save your layouts and then use them later as templates.

To learn more see our article on how to create a custom page layout using Beaver Builder.

However, we don’t just want to create page layouts. We want to create a complete custom theme.

This is when Beaver Themer comes in.

It adds another item to Beaver Builder called ‘Themer Layout’.

Themer Layout

Themer layouts allow you to create custom layouts for the header, footer, content areas, 404 page, and other template parts.

These are the building blocks of all WordPress themes and by using them you’ll be able to create a custom theme that fits your needs.

Using Beaver Themer Templates to Create a Custom WordPress Theme

In the following instructions, we’ll walk you through the steps it takes to build the most popular custom theme elements. By the time you’re done, you’ll have completely transformed your base theme into a fully custom WordPress child theme.

Building a Custom Header for Your Theme

Let’s start with your website’s header area. A custom header is an essential component of a theme and building one can be tricky using traditional methods.

Luckily, Beaver Themer has header features built in. You can either use the pre-created template or use the menu and image modules with a two-column layout.

In order to get to this header area, first, we’ll need to set up a header layout in Beaver Themer. Visit Beaver Builder » Add New page and provide a title for your header.

Creating a custom header layout

After that, select ‘Themer Layout’ as the type and ‘Header’ as the layout option. Once you’re done click on the ‘Add Themer Layout’ button to continue.

This will bring you to the layout settings page. From here you need to select ‘Entire Site’ as the location where the header template will be displayed on.

Layout settings

Next, click on the ‘Launch Beaver Builder’ button to open the builder interface.

Beaver Builder will launch with a basic single column and two-row header layout as a starting point.

Header layout

You can use the same Beaver Builder drag and drop tools to change the background, colors, text, etc. You can also add other modules, load pre-made templates, and add rows / columns by clicking on the add button at the top right corner.

Once you are satisfied with the design, click on the Done button to save or publish your layout.

You can now visit your website to see your custom theme header in action. As you can see, we have applied the header layout to our custom theme.

Custom header in your custom theme

Aside from the header, it will not you show any content yet, and you will likely see your base theme’s footer area.

Let’s change this.

Building a Custom Footer for Your Theme

You can create a custom footer for your theme using the Beaver Themer just like you created a custom header.

Head over to Beaver Builder » Add New page and provide a title for your footer layout. Next, select ‘Themer Layout’ as the type and ‘Footer’ as the layout option.

Footer layout

Click on the ‘Add Themer Layout’ button to continue.

This will bring you to the layout settings page. From here you need to select ‘Entire Site’ as the location that the template will be displayed on.

Footer layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

Beaver Builder will launch with a footer layout using three columns. You can use this layout as a starting point and start editing.

Editing your footer layout

You can add modules, text blocks, or anything else you want. You can always change colors, fonts, add a background image, and more.

Once you are satisfied with the design, click on the Done button to save or publish your layout.

Building Content Area for Post and Pages

Now that we’ve created headers and footers for every page and post on the website, it’s time to build the post or page body (the content area).

We’ll start off in much the same way that we built the header and footer by adding the ‘Singular’ layout in the Add New page.

Creating posts and page layouts

Next, you will choose where to display this layout. You can choose singular to use it for all single posts and pages, or you can choose posts or just the pages.

Singular layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

Editing singular layout

Beaver Builder will load a sample singular layout with post/page title at the top, followed by content, author bio box, and comments area.

You can point and click to edit any of these items or add new modules, columns, and rows as needed.

Once you are satisfied with the layout, click on the Done button to save and publish your changes.

You can now visit your website to see it in action.

Theme layout with content

Creating Archive Layouts for Your Custom Theme

Now that your custom theme has started to shape up, you can move on to creating layouts for other parts of your website. Archive pages are where WordPress displays your categories, tags, author, and monthly archives.

Let’s create a layout for archive pages in your custom theme.

You’ll start by visiting Beaver Builder » Add New page and providing a title for your archive layout.

Creating an archive layout for your custom theme

After that, select ‘Themer Layout’ as type, and ‘Archive’ as the layout option. Click on the ‘Add Themer Layout’ button to continue.

This will bring you to the layout settings page. From here you need to select ‘All Archive’ as the location that the template will be displayed on. You can also create separate layouts for each individual archive type like date, search results, category, tags, etc.

Archive layout settings

After that click on the ‘Launch Beaver Builder’ button to open the builder interface.

Beaver Builder will launch with a basic single column archive layout. It will display archive title at the top, which is followed by posts.

Editing Archives layout for your theme

You can point and click on any item to edit its properties. You can also add new modules, rows, and columns as needed.

After that, click on the ‘Done’ button to save and publish your changes.

Creating Other Layouts for Your Custom WordPress Theme

Beaver Themer also allows you to create layouts for other pages in template hierarchy, for example, 404 page, template parts, search results page, and more.

Using the built-in drag and drop functionality of Beaver Builder, you can easily create your own custom WordPress theme from scratch without ever writing code. This is truly the most beginner friendly WordPress theme development method in existence.

We hope this article helped you learn how to create a custom WordPress theme without learning to code. You may also want to see our guide on how to speed up your WordPress website for better SEO and user experience.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Easily Create a Custom WordPress Theme (without Any Code) appeared first on WPBeginner.



Source link

How to Move Custom Domain Blogger Blog to WordPress (Updated)


Do you want to move your custom domain Blogger blog to WordPress? Blogger is a free blogging platform that has been around for a very long time.

Normally, a free blog on Blogger has blogspot.com in their website address. For example, myblog.blogspot.com.

In our main Blogger to WordPress migration tutorial, one of our readers asked us for step by step instructions on moving custom domain blogger website to WordPress.

That’s because Blogger also allows users to connect custom domain names to their blogs such as myblog.com.

If you have a custom domain Blogger blog, and you want to move it to WordPress, then this tutorial is for you.

In this step by step guide, we will show you how to easily move a custom domain blog from Blogger to WordPress.

Moving custom domain Blogger blog to WordPress

Note: If you’re looking for moving a normal Blogger subdomain blog to WordPress, then see our guide on how to switch from Blogger to WordPress.

Following are the steps we will cover to help you move your custom domain blog from Blogger to WordPress.

  1. Getting started
  2. Change DNS settings
  3. Remove domain redirect
  4. Install WordPress
  5. Export content from Blogger
  6. Import content in WordPress
  7. Setup Permalinks
  8. Redirect Blogger feeds to WordPress
  9. Customizing WordPress
  10. Extending your WordPress site

Step 1: Getting Started

Before we start, it is important to note that this guide is for the self-hosted WordPress blog. See our guide on the difference between self hosted WordPress.org site vs WordPress.com blog.

In order to get started, you will need a WordPress hosting provider to set up your self hosted WordPress website.

We recommend Bluehost because they are an officially recommended WordPress hosting company, and they are giving WPBeginner users exclusive 60% discount + free domain and SSL.

Basically, you can get started for $2.75 / month.

→ Click Here to Claim This Exclusive Bluehost Offer ←

If you want a Bluehost alternative, then take a look at Siteground. They also have a special offer for WPBeginner users.

Step 2: Change DNS Settings

Blogger allows you to use any domain name registered by a 3rd party. U.S. based users can also use a domain registered with Google Domains.

When you first setup the domain pointing to your Blogger blog, you were asked to add CNAME and A records to your domain’s DNS settings.

These domain name records help browsers decide where to direct users when they enter your domain name. See our guide on domain names and how they work)

You will need to delete those old records and add your new WordPress host’s DNS settings.

You can get DNS settings required by your WordPress hosting company from their documentation or support websites. A typical DNS nameserver looks something like this:

NS1.Bluehost.com
NS2.Bluehost.com

In this guide, we will show you how to update DNS settings in Godaddy. However the basic settings are the same across all popular domain registrars.

Changing DNS Settings in GoDaddy

You need to Login to your Godaddy account and click on the manage button next to domains. After that you need to click on the gear icon next to your domain and then select manage DNS.

Launch DNS management in GoDaddy

You will see your domain information page. Next, you need to click on the DNS Zone File. This is where all the DNS level records for your domain are stored.

Edit DNS zone file in GoDaddy

On the DNS Zone File page, you need to locate the A record and CNAME aliases you added for your Blogger blog and delete them.

Don’t forget to click on the save changes button to apply your changes.

The next step is to setup nameservers for your WordPress hosting provider.

Go back to manage DNS page for your domain and then click on ‘Manage’ under the namservers section.

Manage nameserver settings

On the next page, you need to click on ‘Custom’ and then click on edit nameservers link to add your new WordPress hosts nameservers.

Adding nameservers

Click on the save button to make your DNS changes go live.

Important: DNS changes may take anywhere between a few hours to one or even two days to fully propagate. During this time, you can access your Blogger blog by logging into your account.

Step 3: Remove Domain Redirect

Your Blogger blog’s original blogspot.com address is redirecting users to your custom domain. Since we have changed the domain settings, we need to remove this from Blogger too.

Simply log into your Blogger account and go to Settings » Basic page. Under the publishing section, click on the cross icon to cancel the redirect.

Remove custom domain redirect from Blogger

Step 4: Install WordPress

If your domain’s DNS has propagated now, then you can install WordPress on your hosting provider.

If your domain is registered on a 3rd party service other than your web host, then you will need to add the hosting for the domain.

For example, in Bluehost you will add your domain as an Addon domain through cPanel unless it is the main domain on your account.

Adding a domain name to your hosting account

After adding domain to your new host, the next step is to install WordPress. Most hosting companies have simple 1-click WordPress installers that you can use to quickly install WordPress.

If you need more help, then follow the instructions in our complete WordPress installation tutorial.

After successful installation of WordPress on your custom domain, you will be ready to import content from your Blogger blog.

Step 5: Export Content From Blogger

Before you can import content into WordPress, first you need to export it from your Blogger blog.

Blogger allows you to export content in an XML file.

Simply login to your Blogger blog and visit Settings » Other page. Under the blog tools, click on the Backup Content link.

Export blog posts from Blogger

This will bring up a popup where you need to click on the ‘Save to your computer’ button.

Depending on the file size, it may take a few seconds or a few minutes. Once you have your data, it is time to import it into your WordPress site.

Step 6: Import Blogger Blog into WordPress

Login to your WordPress admin area and visit Tools » Import page. There you will see a list of importers for different services. You need to click on Blogger to install the Blogger importer.

Install Blogger importer tool for WordPress

WordPress will now download and install the Blogger Importer plugin for you. Once it is finished installing the plugin, you need to click on Run Importer link to continue.

Run Blogger importer

On the Import Blogger screen, WordPress will ask you to upload the XML file. Simply click on choose file button and upload the XML file you downloaded earlier. Click on the Upload file and import button to continue.

Upload file to import

WordPress will now import your blog posts from Blogger, once it is finished you will be asked to assign an author to the imported posts. You can assign your blogger posts to an existing author or create a new one.

Congratulations! you have successfully imported your Blogger blog into WordPress.

However, you still need to make sure that you don’t lose any search rankings by redirecting search engines and visitors to the same content on your new WordPress powered website.

WordPress comes with a feature that allows you to set up SEO friendly URL structure.

However, since you are importing content from Blogger, you would want your permalink structure to be as close to your Blogger URL structure as possible. To set permalinks you need to go to Settings » Permalinks and paste this in the custom structure field:

/%year%/%monthnum%/%postname%.html

Change permalinks

Setp 8: Setup Feed Redirects

You have successfully redirected your Blogger blog to WordPress. However, users who have subscribed to your Blogger RSS feed will stop receiving updates.

You need to redirect feed requests to your WordPress feeds. This can be easily achieved by editing the .htaccess file in your WordPress site’s root folder.

If you can’t find your .htaccess file, then see this tutorial.

Start by connecting to your WordPress site using an FTP client. You will need to enable ‘Show Hidden Files’ option in your FTP client settings. If you are using Filezilla, you will find this option under Server menu.

Show hidden files in FTP

Once you are connected to your website, you will find the .htaccess file in your WordPress site’s root directory. You need to edit this file and paste the following code before any other code in the file.

<IfModule mod_rewrite.c>
   RewriteEngine on
   RewriteRule atom.xml /feed? [L,R=301]
   RewriteRule rss.xml /feed? [L,R=301]
   RewriteRule ^feeds/posts/?.*$ /feed? [L,R=301]
   RewriteRule ^feeds/comments/?.*$ /comments/feed? [L,R=301]
</IfModule>

Don’t forget to save your changes and upload the .htaccess file back to the server. Your Blogger feed subscribers will now be redirected to your WordPress site’s feed.

Step 9. Customizing Your WordPress Site

Themes control the appearance of your WordPress site. You can use them to change your website’s colors, layout, navigation menus, and more.

WordPress themes

By default, WordPress comes with a very simple theme that doesn’t offer many features.

Luckily, there are thousands of WordPress themes available that you can choose from.

Following are a few of our showcases with our expert-pick of best WordPress themes in different categories.

Here are a few tips that you should consider when looking at these themes.

  • Simplicity is the best design. Look for a simple theme with flexible features.
  • You will not find a theme exactly as you had on Blogger, but you can look for a theme with similar layout and color choices
  • Make sure that the theme you are choosing looks good on mobile devices
  • Only install a theme from reliable sources like WordPress.org or one of the top WordPress theme shops.

Once you have found a theme, you can go ahead and install it. See our beginner’s guide on how to install a WordPress theme for step by step instructions.

Note: You can also use one of these drag & drop WordPress page builders to create completely custom website designs without writing any code.

Step 10. Extending Your WordPress Site

WordPress plugins

One of the top reasons for using WordPress is the large number of plugins that you can use. Plugins are like apps for your WordPress site. You can use them to add new features and extend WordPress functionality.

Now, as a beginner, you may be wondering how to start using these plugins? Which plugins you should try first?

Don’t worry we got you covered there as well. Check out our expert selection of the essential WordPress plugins that you should install first.

Next, you should know that WordPress is not just limited to blogs. You can use it to create any type of website you can imagine.

Finally, as a new WordPress user, you may need help now and then. WPBeginner is the largest WordPress resource site for beginners. See how you can make the most out of WPBeginner’s free resources.

We hope this article helped you move your custom domain blogger blog to WordPress. You may also want to see our list of 40 useful tools to manage and grow your WordPress blog.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Move Custom Domain Blogger Blog to WordPress (Updated) appeared first on WPBeginner.



Source link