WordPress Themes - GreenGeeks https://www.greengeeks.com/tutorials/category/wordpress-themes/ How-to Website Tutorials Thu, 22 Dec 2022 23:08:24 +0000 en-US hourly 1 https://wordpress.org/?v=6.2.2 How to Set a Full-Width Theme in WordPress https://www.greengeeks.com/tutorials/full-width-theme-wordpress/ https://www.greengeeks.com/tutorials/full-width-theme-wordpress/#respond Wed, 03 Jun 2020 20:07:09 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=34952 WordPress themes come in all shapes and sizes these days. However, many of them are very unique from one another. A great example is that …

How to Set a Full-Width Theme in WordPress Read More »

The post How to Set a Full-Width Theme in WordPress appeared first on GreenGeeks.

]]>
WordPress themes come in all shapes and sizes these days. However, many of them are very unique from one another. A great example is that every theme does not support a full-width template in WordPress.

The good news is that you can fix this with the right plugin.

As stated, most themes do give you the ability to set a full-width page or post in your theme. However, many themes have their own custom styles and still allow header and footer areas in a full-width theme layout.

This can be annoying, especially if you are trying to create your own headers and footer style within your theme, and then only use them on certain pages.

There are several WordPress page builders that give you canvas-style layouts, as well as the option of a full-width theme style. However, sometimes even those styles can clash with a theme unless you are using a full canvas style page.

This may not be suitable, as canvas-style pages can be tough to build on and properly display in certain formats.

Today, I am going to show you a great plugin I found that will allow you to set a full-width theme in WordPress with just a few clicks of a button. The best part is that the plugin can also be used in conjunction with several of the best WordPress page builders available.

In the demonstration below, I am going to show you how to use this plugin while using the Elementor page builder for WordPress. Let’s take a look at the plugin and see all that it has to offer.

Setting a Full Width Theme in WordPress

Full width templates plugin

Fullwidth Templates is a straightforward and easy-to-use WordPress plugin that does exactly what the title indicates. It gives you the ability to add full-width page templates to any post or page, using any theme.

Furthermore, the plugin works with most WordPress page builders, including Elementor. This means you can bypass certain templates that may not work right when paired with a theme, and design your own full-width Elementor website.

The plugin is packed full of options for page building. It is lightweight, easy to install and use, and fully responsive. You can do a lot with the different full-width templates that become available when you install and activate the plugin.

It comes with the following templates:

  • Blank Template: This removes the header, footer, sidebar, comments, and title section and gives you a blank canvas to work with.
  • Full-Width Template: Removes any sidebar, page title, and comments section. It stretches the layout of your page to full width and is perfect for using with WordPress page builders.
  • No Sidebar Template: Simply removes the sidebar from the page. This is ideal if your current theme does not have an option to delete the sidebar.

As stated above, the plugin works perfectly with the most popular page builders out there. We will demonstrate it using Elementor below, but it also works with Beaver Builder, SiteOrigin, and many of the other popular page builders you may want to try.

Let’s take a look at how to get the plugin installed and activated. Then we will go over how to use it in conjunction with the Elementor page builder.

Step 1: Install the Fullwidth Templates Plugin

In order to start adding full-width theme templates to your website, you first need to install and activate the plugin. You can do this by going to the Plugins page of your WordPress admin dashboard.

Simply search the plugin name and install it from there.

Install and activate full width theme template plugin

Once the plugin has been installed and activated, it is ready to use. There are no settings. After installation, the plugin automatically adds a selection of templates to use that you will find in both posts and pages.

Let’s go over how to access a template and build a free full-width WordPress theme using Elementor.

Step 2: Add a Full-Width Template

A few things you want to remember before you add a full-width text converter or template to your site.

  1. This plugin will work without page builders as well. So you don’t need to use a page builder. It adds the same full-width theme templates to any theme you happen to be using.
  2. Yes, the plugin works just fine with Gutenberg. The selection box exists no matter what editor you use.
  3. If you uninstall the plugin, pages and posts that you have created using it will indeed be affected.

With that info in mind, let’s add a full-width theme template in Elementor together.

At this point, the plugin has been installed. To add a new full-width page click on Pages > Add New.

Click on pages and then add new

This opens up a new page for your site. Since we are using Elementor, you will see the “Edit With Elementor” button within your editor.

Remember, the next move you make is the same, no matter what page builder you are using, and no matter whether you are using the classic editor or the Gutenberg editor.

Scroll down a little and on the bottom right you will see the “Page Attributes” box. Inside that box is the “template” dropdown menu.

Page attributes and template dropdown menu

Go ahead and click on the dropdown menu and select the full-width theme template you want to work with.

Note: You will see that the Fullwidth Templates plugin themes have been added to your page or post. Other template items listed here will be based on what page builder you may be using, as well as what theme templates were already available by default.

Select a full width theme template

Once you select the full-width theme template that you want for that page, click on the “Save Draft” button on the top right of your editor.

Save draft

Step 3: Open Elementor Page Builder

At this point, the template will take hold, and you are good to go to start editing and building your page. Go ahead and give the page a title, and then click on the “Edit With Elementor” button to open the Elementor page builder and start building the page how you see fit.

Edit with elementor

When you click the “Edit With Elementor” button, the page builder launches.

Elementor full width theme page builder template

Simply build and edit how you want. As long as you save your changes as you go, the template you chose remains. You can build your entire site using full-width theme templates.

That’s it! You have successfully installed the plugin and are now building full-width template pages on your WordPress website. Repeat this process as many times as you want to add new pages or posts.

Note: The process is the same for adding full-width posts.

Final Thoughts

Are you tired of trying to code new full-width templates? Or are you tired of trying to look for themes that give you this option? If so, then using the Fullwidth Template plugin is a great choice.

Not only is there zero coding involved, but you have the ability to add full-width theme templates to any theme and page builder. The plugin is also good whether you use the classic editor or the Gutenberg editor.

I hope this tutorial gave you easy-to-understand instructions and showed you how simple it is to get a full-width theme template into your WordPress website.

Have you ever used this plugin? Do you prefer to use it without a page builder or with a page builder?

The post How to Set a Full-Width Theme in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/full-width-theme-wordpress/feed/ 0
How to Add a Custom Sidebar to Any WordPress Theme https://www.greengeeks.com/tutorials/custom-sidebar-wordpress-theme/ https://www.greengeeks.com/tutorials/custom-sidebar-wordpress-theme/#comments Mon, 27 Apr 2020 14:00:00 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=34145 If you’ve ever wished you could add a custom sidebar to WordPress, now you can. Not only can you create as many sidebars as you’d …

How to Add a Custom Sidebar to Any WordPress Theme Read More »

The post How to Add a Custom Sidebar to Any WordPress Theme appeared first on GreenGeeks.

]]>
If you’ve ever wished you could add a custom sidebar to WordPress, now you can. Not only can you create as many sidebars as you’d like, but you can also place them on any page or post.

Do you have a page that needs a sidebar that’s different from the other pages on your site? No problem. I’m going to show you how to add custom sidebars anywhere.

The trend in website design is toward mobile-friendly single column layouts and away from sidebars. You may have noticed that WordPress hasn’t offered a default theme with a sidebar in several years.

Not to worry. In a theme without a sidebar, the widget areas are in the page footers. The plugin we’re going to use works on those as well as multi-column themes.

To more easily illustrate this tutorial, I’ll be using a theme (Friendly Lite) with a right sidebar.

And to work our sidebar magic, we’ll use the SMK Sidebar Generator plugin. The plugin generates sidebars that replace your theme’s default sidebar. So if you have sidebar widgets in place already, you’ll have to add them to the newly created sidebar(s).

Why Would You Want to Replace the Default Sidebar?

If you use the same sidebar everywhere on your site, there’s no need to replace your theme’s default sidebar. The plugin we’re going to talk about gives you the option of creating many different sidebars and using them wherever you’d like.

Use it if you want the sidebar on your pages to be different than the sidebar on your posts. Or if you want a unique sidebar on a single page or post. Or a sidebar that only appears on a selected group of pages or posts.

The plugin lets you create unlimited sidebars, giving you endless flexibility that you wouldn’t have without it.

Installing the SMK Sidebar Generator Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter, “SMK Sidebar Generator.”

search for the WordPress SMK Sidebar Generator plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress SMK Sidebar Generator plugin

Finally, click the “Activate” button.

click to activate the WordPress SMK Sidebar Generator plugin

How to Create a Sidebar in WordPress With the SMK Sidebar Generator

The first thing we want to do is create a global sidebar. One that will appear on every page and post where we don’t show a custom sidebar. We have to do that because the plugin replaces the theme’s default sidebar.

For our default sidebar, we’ll show a post calendar. As I mentioned earlier, if you already have sidebar widgets in place on your site, you’ll add them to this new default sidebar. We’ll get to that step after we create the new sidebar.

In the left column navigation, mouse over the “Appearance” link and click the “Sidebar Generator” link.

click the "Sidebar Generator" link

Click the “Add New” button.

click the "Add New" button

In the “Name” field, I’m going to add, “Global sidebar.”

Then in the “Description” field, I’ll enter, “Default global sidebar,” so we can identify it in the sidebars list.

In the “Sidebars to replace” list, we’re going to choose, “Primary Sidebar.”

The final option is the “Enable conditions” box. We’ll get to the conditions in a minute. But since we want this global sidebar to show up everywhere, we won’t check the conditions box.

Click the “Save Changes” button.

sidebar configuration

As you can see, there are options to replace any widget area. In this theme, there happen to be three footer widget areas and the right sidebar. Your theme will likely have different widget areas.

Adding Widgets to the New Sidebar

Now, if we click the “Widgets” link in the left column navigation, we can add our calendar to our new sidebar. Again, if you have to add widgets that were in your default sidebar, here’s where you’ll do it.

click the "Widgets" link

I’ll drag the Calendar widget into the new global sidebar widget area.

drag the calendar into the sidebar

Then I’ll give it a tile and click the “Save” button.

enter a title and click the "Save" button

Now, if we go to the site, we can see our new calendar sidebar replaces the default sidebar.

new calendar sidebar on site

Working With the Conditions in the Custom Sidebar in WordPress

Now let’s look at how we can add a different sidebar and display it wherever we want to.

First, create a new sidebar. We’ll do that the same way we created our global sidebar. Here are the steps again:

  • Click the “Sidebar Generator” link.
  • Click the “Add New” button.
  • Enter a name in the “Name” field. (I’m naming this one “Image sidebar,” since we’re going to use it to display an image.)
  • Enter a description in the “Description” field so we can identify it in the sidebars list.
  • In the “Sidebars to replace” list, choose “Primary Sidebar.”

Now check the “Enable conditions” box. This is where we choose where the new sidebar will be visible.

enable conditions

Click the “Replace if” drop-down.

You can see we have the choice between “Posts” and “Pages.” I want to display an image in the sidebar of some pages of the site. So, I’ll select “Pages” in the drop-down.

choose "pages" from the drop-down

Now the “and is equal to” field is populated with the names of all of our pages.

"and is equal to" field populated with names of pages

  • If we select “All pages,” the image sidebar will be displayed on every page of the site. Posts will still show the global sidebar.
  • If we choose a single page, the sidebar will be displayed on that page only.
  • We can also choose multiple pages by clicking a page name, then holding down the Ctrl key and clicking other pages.

I’ve selected a few pages to show our image sidebar.

Finally, we click the “Save Changes” button.

click the "Save Changes" button

If we selected “Posts” from the “Replace if” drop-down, we would have the same options, but for posts, not pages.

Adding the Image Widget to the New Image Sidebar

Now we’ll click the “Widgets” link in the left column again and drag the image widget into our new sidebar.

drag the image widget into the sidebar

I’ll click the “Add Image” button to upload an image or add one from the Media Library.

click the "Add Image" button

Then click the “Save” button.

Now, if we go to one of the pages we selected in conditions, the image has replaced the calendar.

image sidebar on page

But if we go to a page that we didn’t select in conditions, the calendar is displayed.

calendar on page

Additional Conditions

We chose between pages and posts when we set up our conditions. But it doesn’t have to be either/or. For example, we can show our image sidebar on some posts by adding a condition.

I’ll click the “Sidebar Generator” link in the navigation, then open the image sidebar by clicking on it.

You can see under “Enable conditions,” there’s an “Add Condition” button.

click the "Add Condition" button

If we click it, another condition selection appears. From there, we can choose which posts (or all posts) we add the image sidebar.

additional condition selection

That covers the setup and configuration. I’m sure you can see that the configuration possibilities are extensive. You can add as many conditions as you need to as many sidebars as you need. Pretty cool.

What Happens if You Uninstall the SMK Sidebar Generator Plugin

If you uninstall the plugin, all of your custom sidebars and configuration will be deleted. Pages and posts will revert to the original theme sidebar.

It’s Never Been Easier to Add a Sidebar to WordPress

We’ve gone over how the plugin works and shown you how to customize when and where custom sidebars appear. The SMK Sidebar Generator clearly provides a level of customization that isn’t available in a stock WordPress installation.

Sidebars may not be in style anymore, but maybe that makes them more attractive. In a world with no sidebars, the sidebar is king! But as I mentioned, this plugin can customize any widget area, so it works in footers as well.

Do you still use a theme with a left or right sidebar? Might you consider going back to a sidebar now that you know you can customize its appearance? Let me know in the comments.

The post How to Add a Custom Sidebar to Any WordPress Theme appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/custom-sidebar-wordpress-theme/feed/ 1
How to Remove the Footer Credit in WordPress Themes https://www.greengeeks.com/tutorials/remove-footer-credit-wordpress-themes/ https://www.greengeeks.com/tutorials/remove-footer-credit-wordpress-themes/#comments Fri, 29 Nov 2019 15:00:26 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=30707 There may be times you wish to remove the footer credit from WordPress, either to replace it with your own footer credits or to remove …

How to Remove the Footer Credit in WordPress Themes Read More »

The post How to Remove the Footer Credit in WordPress Themes appeared first on GreenGeeks.

]]>
There may be times you wish to remove the footer credit from WordPress, either to replace it with your own footer credits or to remove it entirely for design or aesthetic reasons. In WordPress, you can change the footer credit rather easily, but if you’ve never done it before, knowing where to go to do it can be a bit tricky.

I’m going to show you two ways to remove the footer credit, first with a plugin called Remove Footer Credit, then manually, by editing a theme file.

How to Remove the Foot Credit in WordPress

Unfortunately, not all themes will let you remove the footer credit from the WordPress customize dashboard. Most premium themes have this feature, but most free versions do not.

One of the easiest ways to remove a credit from a WordPress theme in the footer is by using the Remove Footer Credit plugin.

  1. Install the Remove Footer Credit Plugin
  2. Find Footer’s Code in the Theme
  3. Paste the Code in the Remove Footer Credit Plugin
  4. Add Text and Save

It’s literally that quick and easy to remove the footer credit from a WordPress theme.

Let me break down the steps a bit even further…

Step 1: Install Remove Footer Credit Plugin

Log in to your WordPress admin panel.

In the left column navigation mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Remove Footer Credit.”

search for the WordPress Remove Footer Credit plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Remove Footer Credit plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Remove Footer Credit plugin

Step 2: Find the Footer’s Code in the WordPress Theme

In the left column navigation, mouse over the “Tools” link and click the “Remove Footer Credit” link.

click the "Remove Footer Credit" link

You use the plugin by entering the text or HTML that you would like to find, and the text or HTML that you would like to replace it with.

You can copy and paste the text that you want to remove, but it’s better to copy the underlying HTML. That way, you’re sure that you’re only removing the footer credit, and you won’t inadvertently remove the same text if you use it elsewhere.

Like in a post about removing the footer credit. 😉

So to get to the HTML, we’re going to view the page source for any page or post on your site.

view page source

Search for div class=”site-info” (or just scroll down near the bottom) and copy everything between:

and


copy the code between the highlighted lines

Step 3: Paste the Code into Remove Footer Credit

Go back to Tools > Remove Footer Credit and paste the code you copied into the “Step 1: Enter text/HTML to remove (one per line)” field.

paste code copied from source

Step 4: Add Your Own Text and Save

In the “Step 2: Enter your own footer credit (one per line)” field, enter your new footer credit (or leave it blank to remove the line altogether). In this example, I am simply putting “My blog.”

enter replacement text

Click the “Save” button.

Click the "Save" button

That should remove the footer credit from your WordPress site and replace it with your text or code.

replacement text

Alternate Method: Remove the Credit Line by Editing the footer.php File for Your Theme

Using a plugin is a fast and easy way to replace the footer credit on every page of your site. But it comes at the cost of the resources needed to scan every page that loads looking for the code and replacing it on the fly.

You can avoid that by editing the footer.php file for your theme to make the change. The process is a bit more involved, but it will save the resources used on every page load by plugins such as Remove Footer Credit.

Before We Proceed…

Never edit WordPress core or theme files without creating a child theme first.

Working in the child theme has a couple of advantages. First, if you break something, you can revert to the parent theme until you figure out what went wrong.

Second, and perhaps more importantly, when you make changes to a child theme, they will not be overwritten or erased when you update either your theme or WordPress itself.

Once you have created a child theme, mouse over the “Appearance” link and click the “Theme Editor” link.

click the "Theme Editor" link

Click the “Activate” button for your child theme.

lick the "Activate" button for your child theme

Open up your FTP program or cPanel file editor and copy the footer.php file from your parent theme to your child theme.

In most FTP programs, you won’t be able to copy and paste files, in which case you’ll download footer.php from the parent theme and then upload it to the child theme.

So in my example here, I FTP’ed to:

/wp-content/themes/twentynineteen

downloaded footer.php, and then uploaded it to:

/wp-content/themes/twentynineteen-child

Now in your WordPress admin panel, mouse over the “Appearance” link and click the “Theme Editor” link.

click the "Theme Editor" link

Choose your child theme from the drop-down and click the “Select” button.

choose your child theme

Now, as we did when using the plugin, look for:

in the footer.php file. I’m using a child of the Twenty Nineteen theme, so we’re going to replace:



	,


	

with:

“My blog.”

cut footer credit code
replace footer credit code with text

Click the “Update File” button, and the footer credit link will be changed.

click the "Update File" button
new footer

Going Further

I used text here to simplify the demonstration, but you can replace the default footer credit with more than just text. The fact that you can use PHP in the footer makes some cool things possible. Like automatically showing the current year if you use a copyright notice.

To do that you can use something like:


$thisyear = date("Y");
print (" My blog ©$thisyear by me. ");
?>
a dynamic copyright date

Am I allowed to remove the footer credit from WordPress?

Yes.

WordPress is licensed under GPL (General Public License). One of the freedoms allowed by GPL is the “freedom to change the software to suit your needs.”

So don’t worry, you aren’t going to land in hot water when you remove the footer credit from WordPress.

Have you used other methods to change or remove the footer credits in your theme? Do you use a child theme when you make changes? Let me know in the comments.

The post How to Remove the Footer Credit in WordPress Themes appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/remove-footer-credit-wordpress-themes/feed/ 5
How to Easily Change a Font in Any WordPress Theme https://www.greengeeks.com/tutorials/easily-change-font-wordpress-theme/ https://www.greengeeks.com/tutorials/easily-change-font-wordpress-theme/#comments Mon, 18 Nov 2019 15:00:48 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=30415 The technology for the use of web fonts goes back to the 90s, but they didn’t come into common use until 2010. Before that, it …

How to Easily Change a Font in Any WordPress Theme Read More »

The post How to Easily Change a Font in Any WordPress Theme appeared first on GreenGeeks.

]]>
The technology for the use of web fonts goes back to the 90s, but they didn’t come into common use until 2010. Before that, it was possible to change the font in WordPress, but it was a complicated and challenging task, and not every browser would cooperate.

Now you can use custom fonts in WordPress and even pull web fonts from the same server your site lives on. But the most common use of web fonts is to call them from the source, which is usually Google or Adobe.

In this tutorial, I’m going to talk about Google Fonts, since they’re free to use and they provide hundreds of great fonts to choose from. A lot of people add Google Fonts manually, and you can certainly do that. You don’t need a plugin to do the job.

All you have to do to change the font in WordPress is go to Google Fonts and select the font along with the styles and character sets you think you might use, edit the functions.php file to “enqueue” (huh?) the stylesheets with wp_enqueue_style, reference the fonts in your theme’s CSS file, etc., etc…

While the manual techniques for using web fonts are viable, why go through all that? The easiest way to control WordPress font size (and color and decoration) is with the Easy Google Fonts plugin.

The ability to change fonts in WordPress without a single manual file edit? It’s a theme tweaker’s dream come true.

I’m a fan of anything that makes managing a website easier, and I’m guessing you are too. So let’s take the plugin for a spin and see what it’ll do.

Installing the Easy Google Fonts Plugin

Log in to your WordPress admin panel.

In the left column navigation mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Easy Google Fonts.”

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Easy Google Fonts plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Easy Google Fonts plugin

Using Easy Google Fonts to Change Fonts in WordPress

In the left column navigation mouse over the “Appearance” link and click the “Customize” link.

click the "Customize" link

That takes you to the customization section for your theme. The Easy Google Fonts controls are in the “Typography” section.

the "Typography" section

We Interrupt This Tutorial for a Word About Fonts…

You’re about to see just how easy it is to use any one (or more) of hundreds of different web fonts. But it’s worth remembering that just because it’s easy to use the fonts, they’re not all created equally. Some are better suited to specific uses than others.

If you’ve been to the Google Fonts website, you may have noticed that the fonts are grouped in categories.

the fonts are grouped in categories

The first two categories, Serif and Sans Serif, are where you should look for the main text for your site. They are readable and translate well to large blocks of text. Display, Handwriting, and Monospace are more appropriate for headlines or small bits of text that you want to highlight or draw attention to.

Google has a great article called Choosing Web Fonts: A Beginner’s Guide. It’s worth a read when you want to change the font in WordPress, even if you’re not a beginner when it comes to web fonts.

Remember, the purpose of text is to communicate ideas. Or sell products, enlighten the people of earth – whatever your goal is, the appearance of the text should never distract from the message.

Okay, I now return you to your regularly scheduled tutorial.

Using Web Fonts in Your WordPress Theme

Click the “Typography” link.

the "Typography" section of the theme

Click the “Default Typography” link.

click the "Default Typography" link

The customization options will vary depending on the theme you’re using, but they will always include “Paragraphs” and “Heading 1,” “Heading 2,” etc. The “Paragraphs” option controls most of the text on the site. The various headings are essentially mini-titles throughout your content.

I’m using the default WordPress theme for this demonstration, and in that theme, the post title is h2. So to change all the post titles on the site, I click “Edit Font” under “Heading 2” and make changes.

click "Heading 2"

We’ll go into detail for the controls in a minute, but to show how quickly you can make a change, under “Heading 2,” I’ll click “Font Family” and choose from the Google Fonts in the drop-down.

You can see in the preview pane how the change will look.

see the font change in the preview pane

The same thing applies to the paragraph font. Just click “Paragraph,” and change the font.

see the paragraph font change in the preview pane

When you’re satisfied with the changes, click the “Publish” button.

click the "Publish" button

As you may have noticed, we have a bit of a problem with the paragraph font change. It didn’t change the font for the list in the post.

list font unchanged

I’ll show you how to remedy that, but first, let’s dig into the typography options.

Easy Google Fonts Typography Options

There are a lot of options available when you click the “Edit Font” link. They’re spread across three tabs, “Styles,” “Appearance,” and “Positioning.” If you know your HTML and CSS, you’ll know what most of these do. But let’s go over them anyway.

The Styles Tab

  • Script/Subset
    These are the different language encoding options. For English, you only need “Latin,” but in most cases, I leave this set to “All Subsets.”
  • Font Family
    This is the fun part, where you choose between the different Google Fonts. Remember, you can change this for each heading size too, so you can easily change the header font in WordPress with this setting.
  • Font Weight/Style
    Controls how bold the font is and whether it is italic.
  • Text Decoration
    Underlining, overlining, or strikethrough.
  • Text Transform
    Force all text to be uppercase, lowercase, or capitalized (meaning each word of every sentence is capitalized).

The Appearance Tab

  • Font Color
    Controls the WordPress font color. You can enter a hex value or choose from a color picker.
  • Background Color
    As with the Font Color, here you can choose a background for the paragraph or heading text.
  • Font Size
    Set the font size in pixels. It would be cool if you could toggle this to an em setting. Maybe one day they’ll add that option (hello, Titanium Themes!).
  • Line Height
    Here’s where you control how much space is between the lines of a paragraph. If you pull the slider up and then down, you can get a bit of a setting below “1,” but otherwise, it will only increase the space. This setting is in em values, not pixels.
  • Letter Spacing
    Like the Line Height control, you can pull the slider up and then down to get a negative value here, if you want your letters closer to each other.

The Positioning Tab

  • Margin
    Controls the space around the text by adding space outside of the CSS “box” the text is in.
  • Padding
    Controls the space around the text by adding space inside of the CSS “box” of the text.
  • Border
    Creates a border around the text by controlling the top, right, bottom, and left borders individually.
  • Border Radius
    Use this to round the corners of the border(s).
  • Display
    Block or Inline Block. If you’re not sure how display blocks work in CSS, it’s best to leave this control alone.

How to Change Fonts in WordPress With Custom Font Controls

You’ll have to know a bit about how your pages and posts are made up to take advantage of the Custom Font Controls. But it’s mostly basic HTML kind of things like an unordered list is

    , an ordered list is
    , block quotes are

    – things like that.

    As an example, we’ll use my post from above, where changing the paragraph font showed that the change did not affect the list font. That’s because in the HTML for the page, the list (

      ) appears outside of a paragraph (

      ). Other things will appear outside of paragraphs, like the aforementioned block quotes, etc.

      So to make the text in the list match the paragraph text, in the left column navigation, mouse over the “Settings” link, and click the “Google Fonts” link.

      click the "Google Fonts" link

      Enter a “Control Name” (for this, I’ll use “unordered list”) and click the “Create Font Control” button.

      click the "Create Font Control" button

      In the “Add CSS Selectors” section, enter the HTML tag (without the brackets) for unordered lists, which is “ul.” Then click the “Save Font Control” button.

      click the "Save Font Control" button

      Now when we go back to the theme customizer, you can see a new Typography section: “Theme Typography.”

      new Theme Typography section

      Click that, and you’ll see the controls for the Custom Font Control we just added.

      the controls for the Custom Font Control

      Now, if we change the “Font Family” setting to match the paragraph font, we have a nice cohesive appearance.

      change the ul font to match the paragraph font

      Pro tip: When you’re creating a Custom Font Control, you can add multiple CSS selectors to one control.

      add multiple CSS selectors to one control

      So if you know you want all the text on your site to match, you can load up a single control with all the CSS selectors that your theme uses.

      WordPress Text Size and the Relentless March to Mobile Screens

      We’re friends, so I can be honest with you. I resisted increasing the size of my fonts, web fonts, and regular fonts, for a long time. I stubbornly stuck to forcing outdated pixel sizing because I wanted to control how my websites looked to visitors…regardless of how they chose to view the sites.

      But forcing small font sizes on small viewports, like phones, only hurts the sites. Because when people can’t easily read the text of your content, they leave for easier-to-read pastures.

      As well they should.

      For some time now, the prevailing wisdom has been that mobile traffic will eventually eclipse desktop traffic. But in reality, mobile traffic seems to be holding steady at about 50% worldwide (40% in the U.S.).

      So while we may not have to adopt a “mobile-first” approach to everything on the web, making the size of the font adaptable to the viewing screen size is crucial for half of your audience. So it can’t be ignored.

      All of which is to say, don’t fear a larger font size! Your mobile users will thank you.

      Don’t Let Your Fonts Slow You Down

      Playing around with different fonts is fun, and it can be tempting to incorporate half a dozen different web fonts in your site design. Remember, though, using web fonts adds to page load time. If your font files are large, or you use a lot of different fonts on a page, they will have a negative impact on page load speeds.

      So try to keep it simple with a title font and a font for everything else. Maybe a different blockquote font…you get the idea. Try to keep the web font use to a minimum.

      Have you manually added web fonts to your site? Do you consider page load time increases when looking at web fonts?

The post How to Easily Change a Font in Any WordPress Theme appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/easily-change-font-wordpress-theme/feed/ 2
How to Import Demo Content Into a WordPress Theme https://www.greengeeks.com/tutorials/import-demo-content-into-wordpress-theme/ https://www.greengeeks.com/tutorials/import-demo-content-into-wordpress-theme/#respond Mon, 02 Sep 2019 14:00:40 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=29014 Are you using a theme and would like to add WordPress demo content to it? This will help you view the theme layout and you …

How to Import Demo Content Into a WordPress Theme Read More »

The post How to Import Demo Content Into a WordPress Theme appeared first on GreenGeeks.

]]>
Are you using a theme and would like to add WordPress demo content to it? This will help you view the theme layout and you can use the demo content as an example to build your site around. There is a fantastic plugin that can help you with this.

Using demo (or dummy) content will make developing your theme a little easier, as you will have something to work around. Let’s take a look at how you can easily import demo content into a WordPress theme.

WordPress Theme Unit Test Data for Developers

The WordPress theme unit test data file is an XML data file that contains a bunch of demo content for theme development. It is there so that developers can use it when building and testing the WordPress themes they build.

It is also the tool that is used by the WordPress theme review team for testing and inclusion into the WordPress theme directory. See, when you develop a theme there are a number of things that need to be considered.

These include:

  • Images
  • Links
  • Widgets
  • Post Formats
  • Galleries
  • Lists
  • Comments
  • Page Navigation

The WordPress theme you are developing needs to be ready for all of those elements. The test data file full of WordPress demo content helps you test and get ready for all of this. Using it will allow you to create a theme that will be accepted into the WordPress theme directory.

Creating Websites for Clients

Another reason why you would want to use demo content in WordPress is if you’re building websites for clients. This lets you mock up something that looks and feels real.

Demo content gives you a testing ground while showing clients how the site might appear.

In reality, a client is less likely to let you use their own website and content for “testing.” And many don’t like the idea of copying their content to another domain or WordPress staging area.

This is when WordPress demo content comes in useful.

Add Content Using One Click Demo Import

One click demo import plugin

Now, if you are a user of a theme and you are trying to import WordPress demo content to work around, then I suggest using One Click Demo Import.

This plugin allows theme developers to define specific import files within their themes. However, it allows you to easily import demo content into the theme by simply clicking an “Import Demo Data” button.

There are basically three ways you can import WordPress demo content using this plugin.

  1. Uploading a demo content XML file.
  2. Optional JSON file upload for widgets import. You can create that file using the Widget Importer & Exporter plugin.
  3. Another optional tool that will import the customizer settings using a DAT file. You can generate that from the Customizer Export/Import plugin.

For this demonstration, we are simply going to show you how to use One Click Demo Import to upload the WordPress demo content via an XML file. 

Note: Remember, when you are using any type of WordPress importer or exporter plugin, always make sure you have all the necessary tools available.

Install One Click Demo Import

In order to use this WordPress importer plugin, you need to install and activate it. You can do this from the WordPress admin dashboard.

Install and activate wordpress demo content plugin

Once the plugin has been installed and activated, click on Appearance > Import Demo Data. This will take you to the main screen for importing the relevant files.

Click on appearance then demo data

Import WordPress Demo Content Manually

Once you are on the main WordPress importer page, you will see a few things. If you are using a theme with no “pre-defined” import files, then you are going to need to upload the WordPress theme unit data file from above manually.

Pre defined files

Simply use the upload buttons below to upload your file choice. Again, you can upload the following types of files:

  • XML (for content)
  • WIE or JSON (for widget)
  • DAT (for customizer)

File types for wordpress demo content

Select the file type you want to import and click on the “Import Demo Data” button and you are good to go.

Import WordPress Demo Content Through Theme

Now, if you are running a theme that has demo content pre-defined, then follow these steps.

Click on Appearance > Themes and go to your themes page in the WordPress admin dashboard.

Click on appearance then themes

Now hover over the current theme that is running and click on “Theme Details” to open the detail page up.

Click theme details

At the bottom of the pop-up page you will see a button called “Import Demo Data.” Click on that to import WordPress demo content for the particular theme you are using.

Import wordpress demo data

Note: You may still get a warning that says your theme has no “pre-defined” demo files. You can either download the main WordPress one, or you can ask the theme developer for files.

Final Thoughts

WordPress theme development has come a long way. WordPress is now giving you as many tools as they can, both for developers and users.

Using a solid WordPress importer plugin to import certain types of demo content is a great way to make the process of both developing and using a theme easier.

Have you ever used the One Click Demo Import plugin? Do you prefer importing WordPress demo content a different way?

The post How to Import Demo Content Into a WordPress Theme appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/import-demo-content-into-wordpress-theme/feed/ 0
How to Customize a WordPress Theme with Microthemer https://www.greengeeks.com/tutorials/customize-wordpress-theme-microthemer/ https://www.greengeeks.com/tutorials/customize-wordpress-theme-microthemer/#respond Wed, 21 Aug 2019 14:00:14 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=28869 Have you ever wondered how much easier it would be to customize a WordPress theme with CSS and see those changes on the fly? Well, …

How to Customize a WordPress Theme with Microthemer Read More »

The post How to Customize a WordPress Theme with Microthemer appeared first on GreenGeeks.

]]>
Have you ever wondered how much easier it would be to customize a WordPress theme with CSS and see those changes on the fly? Well, there is an excellent WordPress theme customization plugin called Microthemer that allows just that!

Oftentimes you need to make code changes and then publish them to see how they turned out. With Microthemer you can visually edit CSS code and see the changes as you make them. Needless to say, this makes the process of adding CSS to your WordPress theme much easier.

What is a WordPress Theme?

When someone thinks of a WordPress theme they usually think of a preset look, with a preset layout, colors, and style. However, what exactly is a theme in WordPress.

Simply put, a WordPress theme changes the design of your website. It also changes the layout such as the use of sidebars, footers and headers.

Changing your theme changes how your site looks on the front-end. In other words, it changes what the site visitor sees when they come to your website.

Using Microthemer to Edit WordPress Themes

There are several really good WordPress page builders available for you to develop inside themes. However, Microthemer is a little different than that.

Microthemer is a visual CSS editor plugin that allows you to see any changes you make to your website as you make them. Its intuitive interface brings the CSS code to the front-end.

Microthemer plugin

What this means is that all you have to do is move page elements around with your mouse. The sticking point of Microthemer is that the plugin allows you to see all CSS changes as you make them

This means you can see exactly what you are doing and how it will look before publishing the CSS code updates.

This WordPress visual editor plugin will give you all the tools you need to make CSS code changes anywhere on your website and see the changes in real-time.

Let’s take a quick look at how to customize a WordPress theme using Microthemer.

Note: This plugin is going to be tough to use for beginners, or for anyone not familiar with CSS coding. However, it offers near-absolute control of your theme’s appearance, which may make learning the tool worth the effort.

Install Microthemer

To use the Microthemer WordPress theme customization plugin, you have to install and activate it. You can do this from the plugin repository in your admin dashboard.

Install and activate customize wordpress theme plugin

Once the plugin has been installed and activated, click on Microthemer > Preferences, and give the plugin preferences a look. If you want to change and tailor them to what you need, this is where you would do it.

Click microthemer then click preferences

When you get to the preferences page you will see 4 tabs. They are:

  • General
  • CSS/SCSS
  • Language
  • Inactive

General

Click on the “General” tab. Here you will be able to set up some quick and general preferences the way you want.

General tab

CSS/SCSS

Now move to the CSS/SCSS tab. These are all the CSS style settings that you can input accordingly. You will also be able to set fonts, shadowing, position, gradient, and much more.

Css and scss tab

Language

Now go on to the “Language” tab and set the CSS syntax property how you want it.

Language tab for the plugin

Inactive

Finally, the “Inactive” tab gives you the option of deleting all Microthemer data if you uninstall the plugin. You can also see all the plugin code from this tab.

Inactive tab for customize a wordpress theme plugin

Customizing Your WordPress Theme

When you are ready to customize a WordPress theme, click on the “Microthemer” tab on the left menu in your WordPress admin dashboard.

This will open up your theme inside the plugin and present you with all the tools this particular WordPress theme customization plugin comes with.

Open microthemer plugin

On the top left, you’ll see the tabs that you can click through to view what your site looks like on different screen sizes and devices. The tabs are titled:

  • All Devices
  • Large Desktop
  • Desktop & Tablet
  • Tablet & Phone
  • Phone

Click through these to view your site as you work and see how your changes look on different certain devices. Keep in mind, it is important to make sure your website is mobile-friendly.

Device and screensize tabs

On the top right, you will see a menu providing a lot of different options. How you use all of them is up to you.

You will also see both “Unlock” and “Buy” buttons. This is because Microthemer has a pro version of the plugin. You can access all of that and the pro updates by clicking on those buttons.

Main menu

Target

The black “Target” button on the top left makes it very easy for you to target specific elements and change them. Simply click on it to use it.

Target button

Once the button has been clicked, drag your mouse around the theme and sections of it will automatically highlight.

Highlight sections so you can customize

Existing Selectors

Finally, in order to manage existing selectors, click on the “Selectors” link on the top left and a dropdown menu will appear. You will see all your current theme selectors there, and you can manage them however you want.

Help Menu Tab

This could be the most important tab for you for a while. Remember, this WordPress theme customization plugin is not easy to use for beginners.

That being said, Microthemer offers quite a few help docs and other helpful resources. You will find all of that under this menu tab.

Help tab for customizing a wordpress theme

You will find videos, tips, references and other tutorials to help you through the process of trying to customize a WordPress theme.

Advantages of Using Microthemer

One of the biggest advantages of using this plugin to customize a WordPress theme is the amount of control you have. Instead of sifting through lines and lines of code in the style sheet of your theme, specific elements are easily clickable.

This means you can directly affect changes to headers, fonts and how the sidebar appears all from the live preview screen without spending time going through the stylesheet.css file.

Microthemer also works on all themes. This means you can make visual changes to the CSS code to any theme you have installed.

And although the plugin does have a bit of a learning curve, you don’t truly need to understand everything about CSS to use it. For example, it has a visual color picker if you want to change the appearance of your font.

But, it is exceptionally beneficial if you at least know a little about CSS before jumping into Microthemer. You can easily learn the basics from sites like W3Schools.com.

Final Thoughts

When you customize a WordPress theme with CSS code, it can be difficult to get the results you want. You have to continually go back and forth between live and draft versions of a WordPress theme.

While Microthemer is not good for beginners, it does give developers and others a chance to easily change and update CSS code on the fly. I recommend trying the plugin out for yourself to see how you like it.

Have you tried other custom CSS styling WordPress theme customization plugins? Do you have a favorite, or did Microthemer do the trick for you?

The post How to Customize a WordPress Theme with Microthemer appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/customize-wordpress-theme-microthemer/feed/ 0
How to Create a Child Theme in WordPress with a Plugin https://www.greengeeks.com/tutorials/how-to-create-a-child-theme-in-wordpress-with-a-plugin/ https://www.greengeeks.com/tutorials/how-to-create-a-child-theme-in-wordpress-with-a-plugin/#respond Wed, 31 Jul 2019 16:49:45 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=28439 There is a lot of thought given to WordPress child themes nowadays. While it isn’t overly difficult to create a child theme manually, you do …

How to Create a Child Theme in WordPress with a Plugin Read More »

The post How to Create a Child Theme in WordPress with a Plugin appeared first on GreenGeeks.

]]>
There is a lot of thought given to WordPress child themes nowadays. While it isn’t overly difficult to create a child theme manually, you do have to know code and have access to an FTP login client and understand how that works. So using a child theme WordPress plugin is much easier.

In year’s past, you dealt with simply modifying a parent theme. And when you made code adjustments to it, any type of WordPress core update would erase everything.

Enter a WordPress child theme.

Aside from being more flexible in design and giving you more freedom, WordPress child themes hold on to any and all design and code changes you make, even after updates.

What is a WordPress Child Theme?

Simply put, a WordPress child theme is a theme that inherits all of its functionality from another theme called, “the parent.” The parent theme is usually based on a certain type of framework, and the child theme attaches to it and offers you a lot more design freedom.

A child theme is most often used when you really want to stretch the design process in WordPress without having to use a lot of code. Furthermore, one of the biggest benefits of using a child theme is the ability to upgrade and update WordPress without losing any design, code, or styling options that you have worked on.

Benefits of Using a Child Theme

As I stated, arguably the biggest benefit of using a WordPress child theme is the ability to make whatever design and code changes you want and then keeping them when updating.

Other main benefits of a WordPress child theme include:

  • Easy to Modify and Extend: This is especially true if you are using a solid, well-known WordPress framework.
  • Code Fallback: If you mess something up or get stuck, you can always fall back to the failsafe parent theme and see where you went wrong.
  • Design and Layout Options: Most child themes come with a prebuilt design and layout that you can easily manipulate and make your own.

In this tutorial, I will show you how to use a plugin to create a WordPress child theme.

Child Theme Configurator Plugin

There are a few choices available when it comes to child theme WordPress plugins. After narrowing it down some, I decided on using the Child Theme Configurator plugin.

Child theme configurator plugin

Simply put, the Child Theme Configurator plugin is a fast and easy method that allows you to analyze any theme for common problems, create a child theme, and customize it beyond the options of the Customizer.

It will allow you to create any number of child themes from your existing parent layouts. Once you’re done, you can save the child theme in WordPress with the plugin after customizing the settings.

Some of the other amazing configuration options include:

  • Update themes without losing customizations
  • Smart Theme Analyzer determines correct settings to use
  • Resolve common child theme issues with almost any parent theme
  • Copy existing widgets, menus and Customizer options to a child theme
  • Use web fonts in your child theme
  • Enqueue (link) stylesheets instead of using @import
  • Quickly locate and edit theme CSS.
  • Customize @media queries for responsive design
  • Select hex, RGBA (transparent) and named colors using Spectrum color picker
  • Add fallback styles (multiple values per property)
  • Save hours of development time
  • Multisite compatible

Note: There is also a Pro Version of the plugin. If you are interested in even more power, give it a look.

That being said, this WordPress plugin child theme creator already has a lot of functionality.

Install and Activate the Plugin

The first thing you want to do is install and activate the Child Theme Configurator plugin. You can do this from the plugin repository located in your WordPress admin dashboard.

Install and activate child theme configurator plugin

Once the plugin has been install and activated, click on Tools > Child Themes.

Click tools then child themes

This will take you to the Child Theme Configurator main page. It looks like a lot, but hang on. Let’s run through these step-by-step.

Child theme WordPress plugin page

Create a New WordPress Child Theme

Make sure the “Create a New Child Theme” checkbox is checked. It should be by default. Go ahead and pick a current parent theme for the plugin to analyze.

For this example, we are using the Twenty Thirteen theme.

When you select the theme you want, click on the “Analyze” button.

Click analyze button

If the theme is compatible to use as a child theme you will get green checkmarks and be able to move down the setting’s list.

Child theme wordpress plugin settings are good

Scroll down some to the rest of the settings. You will see things like name the new theme directory, select where to save styles, and select parent stylesheet handling.

These will have some default settings already checked. Unless you want to handle your child theme differently, go ahead and leave the settings how they are.

More wordpress child theme settings

Now, scroll down a little more to the “Customize the child theme name, description, author and version” area.

Click on the “Show / Hide Child Theme Attributes.” This is where you can customize all your theme settings and switch things around to your liking. Go ahead and fill it out how you see fit.

Show or hide child theme attributes

Once that is done move to step 8. Make sure the checkbox for step 8 is checked, otherwise you might get a new child theme that has nothing created based on the parent.

Finally, click on the “Create New Child Theme” button. This will create the new child theme in WordPress from the plugin’s settings.

Create new wordpress child theme button

If the function is successful, you will see this reflected at the top of the page. Click on the “Preview your child theme” link to see your changes. This will show the new child theme in the Customizer. Make sure it looks good before you publish.

Successful child theme generated

Other Tabs Now Activated

Once your new child theme is activated and properly built, you will see the rest of the tabs become available. These include:

  • Query Selector
  • Property Value
  • Web Fonts & CSS
  • Baseline Style
  • Child Styles
  • Files
  • Upgrade

Note: These are far more advanced settings to go through and configure. You don’t have to do anything from here as your new WordPress child theme is already built. However, if you want to access certain files and manipulate code, then feel free to go through these and play around with them.

Other Plugin Help Resources

Admittedly, this plugin to create child themes in WordPress does offer quite a bit of functionality and a lot of different options. If you need more help you have two main options.

You can click the “Help” tab located on the top right of the screen.

This will bring out a dropdown filled with links and resources that will help you navigate through the plugin when needed.

Help tab dropdown menu

Furthermore, the developers of this plugin also provide a lot of detailed tutorial videos to help with navigating the plugin. Feel free to view those as well.

Final Thoughts

If you have been looking into how to create a child theme, then this tool is worth the effort. It lets you create a child theme in WordPress from the plugin while providing a lot of freedom and design capability.

The best part is you don’t have to write code from scratch.

What is your favorite WordPress child theme plugin? Have you created most of your child themes using plugins, or do you do so manually?

The post How to Create a Child Theme in WordPress with a Plugin appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/how-to-create-a-child-theme-in-wordpress-with-a-plugin/feed/ 0
How to Use the Theme Customizer in WordPress https://www.greengeeks.com/tutorials/use-theme-customizer-wordpress/ https://www.greengeeks.com/tutorials/use-theme-customizer-wordpress/#respond Mon, 24 Jun 2019 14:21:12 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=26961 All of the newer updates of WordPress now come with a theme customizer. This allows you to work on certain aspects of the site with …

How to Use the Theme Customizer in WordPress Read More »

The post How to Use the Theme Customizer in WordPress appeared first on GreenGeeks.

]]>
All of the newer updates of WordPress now come with a theme customizer. This allows you to work on certain aspects of the site with an easy-to-use interface. The WordPress theme customizer allows you to change something and see the results in real-time before you publish.

Most all of the up-to-date and current WordPress themes have the new theme customizer built in. Even all the Gutenberg ready themes have it as well. What this also does is allow even more freedom from having any sort of coding knowledge.

In this article I will show you how to use the theme customizer in WordPress and make the most of it. Of course, you still have the option of performing changes and updates to your site by clicking through certain sections.

However, using the theme customizer will allow you to save time by staying in one place as you move content around.

Where Do I Access the WordPress Theme Customizer?

As stated above, the WordPress theme customizer is now a default feature and is very easy to access.

To access the customizer, log into your WordPress admin area. Once you have logged in, click on Appearance > Customize. This will bring up the theme customizer area and you can go to work.

Click on appearance then on customize

If you have other themes installed on your site that are not active, the WordPress theme customizer also allows you to preview what they may look like live and play around with changes.

Just click on the “Live Preview” button when you hover across any available theme in your admin area.

Click the live preview button

How to Use the Theme Customizer in WordPress

When you access the WordPress theme customizer, you will see two things. On the left side of the screen, you will see all the available options and areas that you can customize. On the right, you will see the current live preview of what your website looks like.

Theme customizer layout

No matter what theme you are running, this is what the interface will look like while using the customizer. That being said, the number of options available on the left side of the theme customizer will differ from theme to theme.

Some themes offer more customizable options than others.

In this tutorial, I am using the Twenty Thirteen WordPress theme.

To make changes to certain areas of the website, you need to click on the panel you want and a fly out menu will appear. From there, you will be able to make changes and see them in real-time before you publish.

Let’s take a look at the option panels that are always there as part of the default WordPress theme customizer.

Site Identity Panel

The first panel available is the site identity panel. If you click on this panel, the flyout menu will give you the following options:

  • Site Title
  • Tagline
  • Site Icon

You will see that within the customizer are some default titles. You can change these to whatever you want by clicking on the relevant sections and making changes. As you do this, you will notice the changes so you can see what they look like.

Theme customizer site identity panel

You will also see the site icon area. To use this, simply upload the logo you want and put it in. The site icon is the little graphic that is part of your brand and shows in browsers. These are also known as Favicons, and there are different ways to create them and add them to your WordPress website.

Color Panel

Again, the number of different color options available will be based on the theme you are running. In this example, there is only one color option to change and play with.

When you click on the WordPress theme customizer color panel, the flyout menu will present you with all color options available.

Color panel

Select your options and change your colors however you see fit. There may be other color related and text options as well.

Header Image Panel

The header image panel is just that. It allows you to change the header image, or the logo image in most cases. Most, if not all, WordPress themes will also let you know what dimensions your image should be to work best when uploaded.

Header image panel in wordpress theme customizer

The header image panel will show you the image that is currently there. To change it, simply click on the “Add New Image” button. You also have the option of hiding the image and using text instead.

Menus & Navigation Panel

The WordPress theme customizer gives you the ability to create entire menus and place them in available navigation areas provided by whatever theme you are using. This makes it easier to handle everything in one location.

When you click on the menus panel, you will see some items by default. They include:

  • Menus
  • Create New Menu
  • Menu Location
  • View Location

Under the “Menus” function you can click on the menus you have created to see what is there and edit them.

Click on menus

A flyout menu will appear and you will see what is available to edit from there. You can reorder the menu and/or change locations if you want.

Reorder menus and change locations

If you would like to create a new menu from the WordPress theme customizer, simply click on the “Create New Menu” button.

Create new menu button

You will be given some menu options based on your theme. Just name your menu and click on “Next” to start adding links, menu items and whatever else you wish.

Click on next button in wordpress theme customizer

Click on “Add Items” and you will be given even more options, based on what is available within the theme and what you have already built on your site.

Add items to menu

Widget Panel

The WordPress theme customizer allows you to add, delete and customize widgets without having to jump over to the widgets page in your admin area. When you click on the widget’s panel, you will be presented with your theme’s available widget areas.

Wordpress theme customizer widget panel

To edit widgets, click on one of the available widget locations. You will then be taken to the add widget area. Click on the “Add a Widget” button to get started.

Click on the add a widget button

When you do this, another flyout menu will appear showing every available widget you currently have. To add a function, just click on the widget you want to add, plug in the relevant data and save.

Available widgets

Homepage Settings Panel

This one is pretty straightforward, as are most of the theme customizer settings in WordPress. From here, you can select the page you want to display for your homepage.

By default, WordPress has it set to “Your latest posts.” However, if you have a specific page you want to display, click on “A static page” and you will be given the option to select any existing page you have built to show as your website’s homepage.

Homepage settings panel

Additional CSS Panel

The last default panel available in the WordPress theme customizer is the “Additional CSS” panel. This panel provides you a CSS editing area where you can edit and add custom coding to your site.

Additional css panel in wordpress theme customizer

This area works well if you are familiar with custom CSS and how to write it.

Things to Remember About the WordPress Theme Customizer

You may want to keep a few things in mind when using the theme customizer in WordPress.

You can view what you site will look like on different devices by clicking through the control options located on the bottom left of the customizer.

Preview screen size options here

There are also several WordPress theme customizers out there that you may prefer. These are known as page builders, and they have become extremely popular over the last few years. They have a ton of functionality and almost anyone can use them.

One of the best page builders I recommend is Elementor.

I hope this article has shown you how easy it is to use the WordPress theme customizer to easily customize all areas of your website on the fly.

Have you used the theme customizer in WordPress before? Do you find that you prefer jumping around certain areas of your WordPress admin to do your customizations instead?

The post How to Use the Theme Customizer in WordPress appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/use-theme-customizer-wordpress/feed/ 0
How to Disable the WordPress Theme and Plugin Editors https://www.greengeeks.com/tutorials/how-to-disable-the-wordpress-theme-and-plugin-editors/ https://www.greengeeks.com/tutorials/how-to-disable-the-wordpress-theme-and-plugin-editors/#respond Mon, 27 May 2019 14:00:03 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=26166 One of the great features of WordPress is the built-in code editor. Using the code editor you can make changes to your theme files without …

How to Disable the WordPress Theme and Plugin Editors Read More »

The post How to Disable the WordPress Theme and Plugin Editors appeared first on GreenGeeks.

]]>
One of the great features of WordPress is the built-in code editor. Using the code editor you can make changes to your theme files without leaving the admin panel. But there are good reasons to disable theme and plugin editors.

If your WordPress installation is managed by more than one person, you may want to disable the editors. It helps prevent mistakes and errors from individuals who may lack development skills.

Disabling the editors also increases website security. This means there are fewer things that can go wrong within the website.

In this tutorial, I will show you how to disable the WordPress editors and remove them from the admin panel. I’ll also talk about why it’s a good idea to do it and what your alternatives are before and after removing the editors.

Why Disable the WordPress Theme and Plugin Editors?

Automatic Updates
When an automatic theme update takes place in WordPress, key files (or in many cases, all files) are overwritten. So if you have made changes to any of those files, your changes will disappear.

That is why WordPress urges you to avoid editing theme files with a warning:

disable WordPress theme and plugin editors, image 1

A similar warning is given when editing a plugin file. However, the warning doesn’t appear when you edit child themes. Child themes aren’t subject to automatic upgrades, so they are the safest way to manage your theme.

Multiple WordPress Administrators
Often, WordPress websites have multiple users with administrative permissions. That can become a problem if one of the administrators edits a file they shouldn’t.

Also, the more administrators you have, the more likely it is that one of the computers used to access the site could be compromised. This may grant the bad guys access without having to hack WordPress at all.

Security
If your WordPress installation is compromised and the file editor is available, a hacker can do several unpleasant things. They can inject malware into your site, putting your visitors at risk.

Hackers can also insert links to phishing websites into your posts and pages. They may even insert “blackhat” SEO links that can hurt your site’s reputation with Google.

In more severe cases, a hacker can insert code into a theme or plugin that gives them web shell access. That allows them to do things like SQL injections, uploading more malicious files, sending email from your domain name and compromise your cPanel password.

If that’s not bad enough, they can also leave a back door that will allow them into your site after you clean up the initial compromise.

Long story short: disabling the WordPress editors increases your website stability and security.

How to Disable the WordPress Theme and Plugin Editors

The good news is it’s very easy to disable the WordPress theme and plugin editors. You can do it by adding a single line to your wp-config.php file.

Open up an FTP program or a file editor and make your way to your WordPress home directory. Open the wp-config.php file for editing.

Near the bottom of the file, you’ll see a line that says, /* That’s all, stop editing! Happy publishing. */

Right above that line, insert the following code:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]define( ‘DISALLOW_FILE_EDIT’, true );[/ht_message]

disable WordPress theme and plugin editors, image 2

Now when you go back to the WordPress admin panel, you will see the editor options are gone.

disable WordPress theme and plugin editors, image 3

This functional also removes the “Plugin Editor” link.

Alternate Methods
You can also add the DISALLOW_FILE_EDIT line of code to the functions.php file in your theme. If you don’t want to edit any files you can use a code snippets plugin.

You can also write your own plugin that contains the code. I know, writing your own plugin sounds complicated, but check out the article. You may be surprised at how easy it is.

How Do I Edit WordPress Theme and Plugin Files After I’ve Disabled the Editors?

Once you’ve removed the editors from WordPress, you may wonder how you’re going to edit theme files.

There are a few options.

FTP/Text Editor
You can go old school and download the file you want to edit using FTP programs like FileZilla. Then just fire up your favorite text editor to make the changes. Upload the file back to the site and you’re done.

If that’s the way you’re accustomed to working, it’s often faster than an online solution.

Web-based File Manager
If your web hosting account uses cPanel, there’s a built-in text editor that you can use to make changes. This is done through the File Manager tool in cPanel.

Theme Customizing Tools
Even without the WordPress editors, you can still make certain changes to your theme from the admin panel. Mouseover the “Appearance” link, then click the “Customize” link.

disable WordPress theme and plugin editors, image 4

There are several display-related items that can be edited here. The items that are available will vary depending on the theme that you use.

But every theme includes the ability to add custom CSS that will override the theme’s default CSS. It’s a powerful tool, and virtually every part of your site’s appearance can be changed using the custom CSS editor.

disable WordPress theme and plugin editors, image 5

In Conclusion

Whichever method you use to disable theme and plugin editors, I hope that this tutorial has convinced you to give it a try and provided some useful instruction.

Disabling the editors may seem inconvenient at first. But once you get used to using one of the alternate methods, you should be able to make changes just as quickly as you could before.

Do you think you will disable the WordPress editors now? Are there other security methods or plugins you use to keep your WordPress installation safe?

The post How to Disable the WordPress Theme and Plugin Editors appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/how-to-disable-the-wordpress-theme-and-plugin-editors/feed/ 0
How to Install WordPress Themes and Plugins From GitHub https://www.greengeeks.com/tutorials/install-wordpress-themes-plugins-github/ https://www.greengeeks.com/tutorials/install-wordpress-themes-plugins-github/#respond Mon, 20 May 2019 19:27:41 +0000 https://www.greengeeks.com/tutorials/?post_type=ht_kb&p=25978 As you may well know, there are WordPress themes and plugins available for installation from a lot of different places. So many of both are …

How to Install WordPress Themes and Plugins From GitHub Read More »

The post How to Install WordPress Themes and Plugins From GitHub appeared first on GreenGeeks.

]]>
As you may well know, there are WordPress themes and plugins available for installation from a lot of different places. So many of both are being developed now that you have to go to certain places if you want to download them.

It is no different for GitHub WordPress themes and GitHub WordPress plugins.

You my already know how to install WordPress from something like Softaculous, but installing WordPress themes and WordPress plugins from GitHub takes you on a little different process.

I am going to cover that below. The process is more manual and is a lot like installing WordPress manually.

While WordPress itself and its plugins are two different things, the process it takes to install WordPress plugins from GitHub is similar.

It isn’t difficult, just different.

The GitHub WordPress plugins are oftentimes not available from the WordPress repository. Installing and activating them from the WordPress dashboard will not be an option here.

With all that being said, let’s talk a little about GitHub and then take a look at how to install WordPress themes and plugins from the system.

Are GitHub and Git the Same Thing?

Yes and no, Git and GitHub work in tandem with one another, but they are not the same thing. So what is the difference?

Git

Well, Git is a very popular, powerful and efficient open source Version Control System (VCS).

This VCS tracks content like files and directories. Its main purpose is to manage a project or set of files as they change over time. Git is built around Repositories. And, you can do all sorts of things with these Repositories.

Version Control System

As I said, A Version Control System, or VCS as it is more commonly referred, is a system that tracks the history of changes when people and teams collaborate on projects together.

As a project evolves, teams have the ability to run tests, fix bugs and contribute new code with the confidence that any version can be recovered at any time.

There is a lot to know and understand about Git, its Repositories, commands and system structure. It is a vast and complex system.

GitHub

GitHub is the hosting service for all Git repositories. Simply put, Git is the tool and GitHub is the service for the projects that use Git. GitHub is where you will go to download all of the GitHub WordPress themes and plugins they have available.

Now let’s take a look at how to install WordPress themes and plugins from GitHub.

Receiving Updates From GitHub For Installed WordPress Themes and Plugins

First and foremost, it is important that you can get, and understand how to get, updates for WordPress themes and plugins that you download and install from GitHub.

WordPress is ever changing and updating, and with the new Gutenberg update, you want to make sure anything that you install will be compatible and supported in the long run.

By default, WordPress does not show users any automatic updates from GitHub.

When a developer builds a WordPress theme or plugin and makes it available to download and install from GitHub, a little extra work has to be put in for the update side if this.

There are a couple of different ways these updates happen.

  1. There is built-in code already included that will enable you to receive automatic updates.
  2. You may be asked to install the GitHub Updater plugin.

Whatever the case may be, contacting the developer regarding these updates and how to get them is your best option.

Install WordPress Themes and Plugins From GitHub

To download and install WordPress themes and plugins from GitHub, the first thing you need to do is head over to the system’s Repository.

There are several branches in the Repositories, but you can start in the WordPress section if you want.

Choose a theme or plugin that you would like to download. When you make your choice, click on it and go to the main page for that particular plugin or theme.

Once on the main page, click on the “Clone or Download” button located on the top right of the screen.

A dropbox will come out. Inside that dropbox, click on the “Download Zip” option.

click on clone or download and then click on download zip in github

When the theme or plugin is fully downloaded, go ahead and jump over to the WordPress website you want to upload it to.

Within your WordPress admin area in the backend of your website, click on Plugins > Add New.

Click on plugins then click on add new

Now click on the “Upload Plugin” button located at the top of the screen.

Click on the upload plugin button

Note: If you’re uploading a theme, the process is the same. However, you would click on Appearance > Themes, then click on the “Add New” button.

This will take you to the upload screen. From here click on the “Choose File” button and select the ZIP file of the GitHub WordPress plugin you want to upload from your computer.

Click on the choose file button

WordPress will automatically grab the file, unzip it, and install it properly to your website.

Now click on the “Activate Plugin” button and you are all set. You have now successfully downloaded and installed a GitHub WordPress plugin.

Giving a Star to WordPress Themes and Plugins on GitHub

If you enjoy the WordPress theme and/or plugin that you have installed from GitHub, then don’t forget to “star” it. This will let the developer of the theme or plugin know that you like the work they are doing.

You can “Star” a WordPress GitHub theme or plugin using the option found at the top of the main plugin page on GitHub.

You can star a plugin or theme here

I hope this article gave you a little insight into what Git and Github are. Now you know you can use GitHub to find some really great WordPress themes and plugins.

Expand Your Theme and Plugin Library with GitHub

Downloading and installing WordPress themes and plugins from GitHub to use on your WordPress website is not a difficult process. It just take s a few extra steps and know how.

Use GitHub as yet another resource to find great WordPress themes and plugins that you can’t find in other spots.

Have you ever installed Github WordPress themes or GitHub WordPress plugins? Have you found developers have given you a nice selection of them on GitHub?

The post How to Install WordPress Themes and Plugins From GitHub appeared first on GreenGeeks.

]]>
https://www.greengeeks.com/tutorials/install-wordpress-themes-plugins-github/feed/ 0