Feature image for the need to know about wordpress child themes

In this article, I hope that I clarify the idea about WordPress child themes, the uses of a child theme, and how to create a child theme. 

this out a doubt, the most common questions clients asked me about WordPress child themes are: 

  • What is a WordPress child theme?
  • When do you need to create a WordPress child theme?
  • Why do you need a child theme?
  • What are some of the advantages and disadvantages of a child theme?
  • How to create a child theme?

What exactly is a child theme

A WordPress child theme is a WordPress theme that inherits the functionality and style from a parent theme. WordPress created the ability to create a child theme. Because any customization or functions added to a theme would be erased or could break the website whenever the user would have to update. An update is essential for security and the prevention of others hacking into your site. 

With a child theme, you can keep the customization done to your theme and continue to update your parent theme without losing your work or being available to hackers. 

This is the most significant benefit of having a child theme.

To learn more on how to customize your WordPress website. This article will help you achieve the design you want.

THIS IS HOW TO USE ADDITIONAL CSS BOX IN WORDPRESS

Why and When should you use a WordPress child theme?

Using theme frameworks helps designers and developers decrease the production time for creating a website that meets the clients’ needs. There are few occasions when creating a theme from scratch is beneficial, but it is unnecessary in most cases. 

Suppose users are going to customize and make tweaks to there CSS or functions of their WordPress site. In that case, requiring a theme to have a child theme is necessary not to lose your work when you update your parent theme. But if you are going to stay within the limits of the theme’s features, a child theme may no be necessary but would still be a good idea to do anyway. 

On top of everything else, another reason why using a child theme is great to have is because it acts as an extension to the parent theme. The user or developer can create a header.php, footer.php, templates, JavaScript, and CSS file and not worry about affecting the parent WordPress theme. Theoretically, the user can have more files than the parent theme and not worry about losing your work when updating. But if this is the case, I would recommend finding a parent theme with the functionality you need. 

What are the advantages and disadvantages of using a WordPress child theme? 

The advantages of using a child theme are

  • You can safely update your theme regularly.
  • Creating a child theme allows you to have the capability of creating a website that meets your exact needs.
  • It is excellent to have as a fallback just in case a custom functionality breaks. You can away go back to the original function. 

The disadvantages of using a child theme are:

  • There is often a kind of learning curve associated with the parent theme because each theme has its hooks and filters that make up the theme itself. 
  • Another disadvantage comes from the parent them. When dealing with clients’ WordPress websites where the framework’s developers abandon, I have run into many situations, lose interest in maintaining or get acquired by a different development company. 

How do you create a WordPress child theme? 

Fortunately, I have noticed a trend where themes are starting to come with their WordPress child themes attached. This is awesome because it saves you time.

But if a WordPress child theme is not available, then there are two popular methods to creating a WordPress child theme. 

  • Manually create a WordPress Child Theme through FTP or CPanel File Manager
  • Use a WordPress child theme plugin

Manually create a WordPress child theme.

locating the theme folder
  1. Either in your File Manager in your CPanel or through FTP, head to the Public_html > wp-content > themes folder. 

2. Create a new folder within that theme directory. I usually name the child theme after the parent them but attach the child theme afterward like in this example. I turn twentytwentyone into twentytwentyone-child. Do not use spaces for naming. 

3. Using a text editor like Sublime if you are using FTP or in your file manager’s text editor, create a file named style.css and add the following code. 

/* 
Theme Name: Twenty Twenty-One Child 
Theme URL: http://yourdomain.com
Description: This is the child theme of Twenty Twenty-One
Theme Author: Your Name
Author URL: http://yourdomain.com
Template: twentytwentyone 
Version: 1.0.0 
Text Domain: twentytwentyone-child 
*/

4. Make the necessary changes to the code to fit the child theme you are creating for yourself.

5. In the same directory, create a new file named functions.php and the following code inside the file.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

6. After this, log in to your WordPress website and make your way to the themes page. If done correctly, you should see the WordPress child theme.

How to create a WordPress child theme using a plugin. 

Image of the WordPress dashboard
  1. Head to the Plugins page in your WordPress dashboard.
Image of the WordPress dashboard

2. From your plugin page, navigate to “add plugin.” For this example, in the search bar, type child theme. I will be using “Child Theme Generator” to create our WordPress child theme. Install and activate the plugin. 

WordPress plugin page showing Child Theme Generator

3. From the plugins page, locate the “Child Theme Generator” and click on the “Create” option. 

selecting the WordPress theme from the drop down menu

4. In the drop-down, locate the theme that you want to use to create the WordPress child theme. In this example, we are going to continue to use the Twenty Twenty-One theme.

filling in information to create the WordPress child theme

5. In the “Heading,” type the name you want to give your WordPress child theme. Here I typed “Twenty Twenty-One Child,” and for the “Description,” I placed a description about the child theme being created, “This is the child theme for Twenty Twenty-One Theme.” After you are done filling in the two fields, create the new child theme.

finalize the Child Theme installation and activation

6. Check the “Activate child-theme” box and then click the finished button.

preview of the WordPress Child theme

7. Go to the Themes page in your dashboard, and you should see the new child theme created and activated. 

Conclusion

I hope you now have a good grasp of the importance of a WordPress child when to use, the pros and cons, and how to create a child theme for your WordPress website. My goal for this article is to provide easy to consume knowledge about WordPress and Web Development. 

Please share if you found this article helpful!

contact me

featured image for how to use add css in the theme customizer

WHAT IS ADDITIONAL CSS BOX?

One of the features that make WordPress such an awesome framework is the Additional CSS Box located in the Customize menu. When using themes, there are some elements that cannot be changed and it can get frustrating because we all love to add a personal touch to our WordPress website. 

This blog, We will give you a brief lesson on

  • What do I need to Know
  • How to add CSS to the box
  • Guide through Dev Tools
  • What is !important

WHAT DO I NEED TO KNOW?

First off, If you know some CSS than congratulations! You can skip this part (link to section)

But if you do not know any CSS, then do not worry, this lesson will cover on only what you need to know.

CSS is a language used to design the frontend of the website, HTML is the bones and CSS is the physical features. And CSS uses a specific way to structure its code. for example:

.thisIsAClass { color: blue; }

Up above is the basic structure of the CSS code.  Down below show that CSS is created using three components. There is the selectorproperty, and value.

.thisIsAClass (selector) {
color (property): blue(value);
}

Not very intimidating right!

Thankfully, this concludes this part of the lesson. Straight forward and simple.

NOW LET’S MOVE ON TOO WORDPRESS

We are assuming that you practically know your way around WordPress.

So for this lesson, we will be using WordPress theme Twenty Nineteen as our sandbox. So first, let’s make our way to the Dashboard and select Appearance > Themes.

Wordpress dashboard showing the location of the themes page.

This will take you to the Themes page of WordPress and as you see we have the Theme Twenty Nineteen selected and activated

This is the Theme page in the WordPress Dashboard

Now here is a shortcut to the Homepage;

Hover over the Site Title, in this case. After you hover a drop-down menu will show “Visit Site”. Click on it and it will take you to the current or default Home Page.

Shortcut to the home page from the dashboard within WordPress.

Here you see the homepage. It is very basic but it will do.

We are going to first focus on the Hello World! heading of our WordPress website.

the homepage of WordPress Twenty Nineteen Theme

On the top of the page, you will see the Customize option. Click on the option to access the Customization Menu for the Website.

Image showing the location of the Customize option in the WordPress Menu bar

INTRODUCING THE CUSTOMIZATION MENU

This menu varies with different WordPress themes you will pick but all of them should have the Additional CSS tab. After clicking on the CSS tab, the Additional CSS Box will appear at the bottom.

Going back to the brief yet important example of how CSS works.

I bet your thinking “How do I know what selector to target?”

This is Google Dev Tools is the get to know tool for designers and developers because it can aid us in many situations. However, I’m going to use the Element inspect feature.

To access Dev Tools you must:

Mac: Command + Option + I

Windows:

Once Dev Tools is activated, be sure the Inspect Element icon is highlighted blue. While activated, you will be able to see all the elements that make the webpage look the way it does, from padding to marginsh1 to h6, and the div tags created. It’s pretty amazing to see.

This lesson we are going to change the color of the front black to blue.

So we dragged the pointer to the “Hello World” heading, after selecting the element, on the bottom of the page there is a line of selectors to choose from.

Once again don’t be intimidated, its best to start from the two or three selector groups from the right-hand side.

For example, there is:

header.entry-header h2.entry-title a

It is not shown but we first selected the group “h2.entry-title a” and there was no response. Afterward, we choose “header.entry-header” and the page title turned blue.

So in the Additional CSS Box, we entered the following code:

header.entry-header { color: blue; }

When finding the right selector to target. Enter the first selector you wish to try and if you get no response than keep the property and value entered and just change the selector.

We first entered:

h2.entry-title a {

color: blue;

}

(no response)

Afterward, we tried:

header.entry-header {

color: blue;

}

(color responded)

just changing the selector will save you time from entering and reentering the code in its entirety.

LET’S TRY ANOTHER

Now, we want to change the background of the website.

Repeating the steps from the previous section, we select the Inspect Elementfeature and select the header section (highlighted blue).

Now we try to find the selector to target the background which in this case is the following code:

main { background-color: black; } 

Then we change the font color from the previous code from black to white and we select the paragraph text of the section “div.entry-content” and change the font from black to white.

Which ultimately looks like this:

Understanding how the Additional CSS Box is very valuable to know. But you must also keep in mind that this is a simple page. When customizing your theme, you will run into some crazy looking selectors. Just keep in mind to be patient when learning how to customize.

Now there is one last thing to show.

THIS IS !IMPORTANT

The way WordPress CSS works is by a hierarchy. There are different ways to modify the CSS in WordPress, either through FTP, the Theme Editor, and the Additional CSS Box. The way we are showing you is the most recommended way to customize because it will prevent you from getting into a horrible situation. This will be explained late on a different blog.

but the reason I bring it up is that when you choose a theme and then introduce a page builder into the mixture, sometimes the hierarchy becomes scrambled so-to-speak.

Let’s say you want to trigger a selector but it is not changing. The !importantstatement gives that code priority over the hierarchy. but its always good practice to use it when needed because adding the statement can possibly through off other elements.

To use the !important statement, you simply add it to the right of the value and before the semicolon.

example:

div.entry-content { color: white !important; } 

Adding the !important to the value in the code will say this element is important and needs to be a top priority.

QUICK NOTE:

Its good practice to add comment statements above the css code that you create so that you can know what that code is for. It also helps for anyone who wants to change it later what css code does what in the website.

This what it should look like:

TL;DR

If you want to customize specific elements in your webpage that your theme will not offer, You can change it through the Additional CSS Box.

To get to the Additional CSS Box, go to the page that has an element that you want to change (e.g font, font size, color, background color, etc.) and activate the Customize option on the top of your page to the left.

The Customize menu will appear and at the bottom will be the Additional CSStab.

After selecting the Additional CSS tab, there will be an input area at the bottom.

Now, activate your Dev Tools and find the selector of the element. Input the selector {property: value; } of the element.

if you are not sure you picked the right selector or if there is a hierarchy issue with the element add the !important statement to the right of the value but before the semicolon.

ex

selector { property: value !important; } 

Once the element has changed, hit submit to save.

You dont have to go at it alone!

WordPress allows your website to come to life with a few CSS customization. If you want a website that is custom tailored to meet your business identity. fill out the contact form below. Your business deserves to make a great first impression to a world waiting to build a relationship with you.

contact me

feature image of how to secure a wordpress website jjramirez albuquerque website design

I often hear that WordPress is the least secure website framework to use. It is the most hacked framework around only because it is the most used website. But the developers at Automatic, the company that owns WordPress, continue to look for a new way to maintain the integrity of the framework. Nothing is ever 100%. All website frameworks, such as Drupal, Squarespace, Wix, and more, are prone to be hacked. 

But here is some good news!

There are ways to strengthen the security of your WordPress website. Here are the four ways that I use for the websites that I build on an everyday basis. 

  • Easy Hide Login
  • Limit Login Attempts
  • Wp Hide + Security Enhancer
  • Malcare

Easy Hide Login

Easy hide login is a plugin from Arshid. What does this plugin do? WordPress has a standard way to reach the login page. You can either do www.example.com/admin or www.example.com/login; either way will redirect you to a WordPress website’s login page. This being the case, finding the login page is very easily accessible to hackers who want to run a Brut Force Attack. A Brute Force Attack is a script runner through a bot that will run 1000 user names and passwords in a minute, and it will keep doing this until it finds the right credentials. Installing this plugin will allow you to change the login page name. Instead of www.example.com/login, you can rename it to www.example.com/bet-you-cant-this-login or, even better www.example.com/6kj34oijm4k6. Creating a custom login page will make it a challenge for those pesky hackers trying to get in. 

Installing this plugin is easy and straightforward to set up. Install the plugin and activate, then hover on the settings tab, and you will see Easy Hide Login. Click on the Easy Hide Login setting and change the name of the login URL. 

plugin price: Free

Limit Login Attempt Reloaded

As mentioned above about a Brute Force Attack, let us say that a hacker can access your login page. Limit Login Attempts Reloaded comes in handy because it does like it’s named. You can set the limit of login attempts before the login page lockdown for 20 minutes or however long you set the parameter. That is the greatest thing about this plugin; it will record any IP addresses that try to force their way to pass the login. 

Once this plugin is installed and active, the plugin settings will be found in the admin dashboard settings tab. The settings for this plugin allows you to set the parameters that you want. 

plugin price: Free

Wp Hide + Security Enhancer

Three folders are the primary goal of hacking into a WordPress website. 

  • wp-admin
  • wp-includes
  • wp-content

These three folders make up the WordPress framework, and every WordPress framework folder has these names as a default. You could change these file names through the backend, but you would need the experience to ensure that nothing in your WordPress website breaks after changing the names. Fortunately for you, there is this nifty plugin Wp Hide + Security Enhancer. This plugin allows you to change the folder, theme, and plugin file names by creating redirects in your .htaccess folder. By making the redirect links, the plugin overrides the default names with the new names. So instead of www.example.com/wp-content/themes, it changes it to www.example.com/my_assets/95jhojn6. The file name change will create an extra security level that will repel script attacks that try to gain access into these important folders to plant backdoors. You do have to be careful with this plugin because it might, and I mean on a rare occasion, will break your site, but this plugin will give you a recovery link. 

If you change a folder name in the scenario and suddenly get a 404 page not found or a critical issue message, the recovery link will override the change. 

Do not lose the recovery link!

On an honest note, I have only had one bad experience with this plugin, but it was my fault for breaking the site. I did not save that recovery link. 

Overall, this plugin is essential because of the feature listed.

plugin price: Free

MalCare

Malcare is a subscription service that scans malware and cleans your website if there ever is an issue with your sight becoming hacked. The best thing about Malcare is the easy ability to harden security through the Malcare dashboard. The way it adds the extra protection is by: 

  •  Block PHP Execution in Untrusted Folder: This action stops hackers from uploading malicious scripts if they gain access to your website. 
  • Locks the Theme editor: By default, admins can access the theme editor through the Appearance tab in the dashboard. Locking it to everyone, including admin, will block everyone, including hackers, from accessing the themes files. 
  • Blocks theme and plugin installation: Like the Block PHP function, This will lock the theme/plugin installer. The only way you would add new plugins and/or themes is by doing it directly through the Malcare dashboard. 
  • Changing security keys/ reset all passwords: Hackers gaining control of the wp-config.php is the equivalent of someone stealing the keys to the entire kingdom. Changing Security keys will prevent anyone from gaining control of your website database and WordPress framework. 

Malcare is a paid service. However, some plugins will have some of the same features as Malcare, the two being notable are Securi and Wordfence. Both plugins have a free and pro version, but I learned that the free version would be sufficient if you start building yourself a website. 

Conclusion

I take securing my client’s websites very seriously, and I hope that you do the same. Although nothing is ever 100% safe, minus some advanced techniques that I use, these four steps I take can be executed by you with ease and with a minimal learning curve to how to use these plugins. 

Whether you have a website that is promoting your business or selling products using WordPress E-commerce, there are many reasons why websites are targeted by hackers. I go the extra distance to make sure what I am building is as secure as possible. If you have a business or are an influencer that needs a website, feel free to contact me!

contact me

Building a WordPress website for your business is not as easy as the task you think it is, right!? And to lead with that, it’s discouraging when a commercial claims that you can build one within an hour. You quickly start to think, “what is wrong with me?”

You no longer have to fear because I will go over the same process that I follow when I build websites for clients who own local restaurants or use their websites to showcase their success to a global audience. It is effortless to follow and will take out the overwhelming feeling because this template breaks everything into easy to consume chunks.

Broken down into four stages. There is:

  • Concept or Idea stage
  • Design and features
  • Development
  • Testing stage

Concept or Idea phase

In this phase, you want to accomplish the following,

What is your business?

This question is fundamental but essential to keep in mind when you go about designing your website.

Do you have a niche in a specific industry?

Niches are essential to have, especially if the industry your in is highly competitive. But keep in mind, if you don’t have a niche because you have not found one yet, that is ok. As you start to grow your business and gain more insight, you can always come back and add more to your website. Just keep going.

What pages are you going to need, and why will you need them?

Wasting time on pages, you may not need is not the best way to spend your time. Typically, every website will have the homepage, about page, services page, portfolio page, and contact page. Simple is better; if you like the one-page style website versus a multi-page style, do it.

Content for each page/section?

After you figure out what pages you need, it’s time to create each of these pages’ content. Each page has a purpose so create content for that purpose. You might feel pressured to have some long-form content (around 1500 words), but this is unnecessary. Your only goal for content should be to the point, make it easy to skim through, and make it sound as you are speaking to them.

What images are you going to need?

Keep in mind that you will not have all the images you will use, but it is still better to gather the photos because once you start to build your website, going back and forth between your photos, stock photos, and your web page is going to get exhausting. If you are looking for free stock photos, Unsplash and Pexels are some of the best places to start. If you have a Canva account, that is the right place, but some of the stock photos they allow you to use are from Unsplash.

What are the color palette, font & heading style, and graphics look like?

It is a great idea to know your style guide before starting. As I said before, coming up with these things at the moment will make you overwhelmed. What you should have is

  • Font style
  • paragraph:
  • H1-H6: You can use the same font for H1-H6 if you want to keep it simple. Some choose to use 1-2 different font styles to add character, but it is unnecessary. It would be best if you had a different font style between the P and H tags. 
  • Primary color: use coolors.co if you need help deciding on colors. I use this tool all the time when I am building a style guide. 
  • secondary color
  • accent color

Have these figured out will save you a lot of time and fewer headaches while building your website.

Design and features

Here comes the fun part! I know your thinking, “I have no idea how to design a website… I don’t have a creative bone in my body”.

Luckily enough, other web designers have already figured out how to design your website. No really.

With the first phase done. Here is the next thing that you do. Grab a few sheets of paper and label each page with the pages you need.

Now go to google and copy your competitors.

When I’m in this phase and working on a client’s site getting inspiration, I usually pick 3-4 websites. Most of the time, they are competitors, but other times, it may be a website from a different industry.

but the questions that I keep in mind are:
What stands out?

  • What do I like about the page layout?
  • Do I like the structure of the font and photos? 
  • Do I like the arrangement of the sections on the page?
  • Are the headlines too big, or is the font too small?
  • Do I like the header or the footer? 

Answer these questions in your head as you look through the different pages that you need for yourself. Somebody designed these webpages for a specific reason. Certain elements capture your attention for the cause of relaying a message. And when you are on a tight budget and don’t have enough funds to hire a designer, dissecting what your competitor’s web design agency has done will help you figure out what may work and what does not.

When your done examining, start to draw a mockup of what you would like your pages to look like. Rule of thumb, support pages will not need as much design effort as the homepage or sales pages. Let me remind you not to focus on any animation at the moment. All we are doing is building the skeleton of your web page.

Image of a mockup design for ALMA

With your web page mockups, you can label what sections, images, or text will have animation. The animation typically provides a sense of the “Look at this” type of feeling. Having animation where it does not make sense will distract your potential customer.

Development

Here we go.

I often hear a very common question: “What is a good theme for me to use?” 

Answers vary depending on your industry, and different site builders such as Squarespace, Wix, etc., will have different themes that come with their builders. 

But I work with WordPress.

The greatest thing about WordPress now is that Page builders such as Elementor (my go-to page builder), DIVI, WP Bakery, etc., are now using their own designated themes. WordPress has become much more user-friendly because you no longer have to buy a theme and then buy a page builder, required plugins, and so on. 

I recommend that you head this direction because the page builder designated theme will have different layouts tailored to your industry. 

Whether you decide to pick a theme template or you decide to create your webpage from scratch, You now have your mockups to help guide you to the design that you want, or if the template you choose does not have a section you need, then look back and create the section that you need. Whatever the case, you will be thankful that you have something to reference versus doing design work on the spur of the moment. 

If you decide to use your mockup and build from scratch, the process I tend to follow is 

  • Use global settings for the elements in the style guide created in the first phase of your project. 
  • Build the layout (place the content you need in the designated sections first. e.g., Images, text, background images)
  • Space and size everything out (use padding, margins, and whitespace to create space between the elements) 
  • add the animation to the elements that need it, add animation to specific elements used throughout the website, and use global settings. 
  • then add the functions (plugin short-codes, Button links, etc.) 

Plugins

The other thing I would like to explain briefly is about plugins. 

Another great thing about WordPress is that it allows you to accomplish what you plan to do with your website. Plugins are what provide the functions need for you to achieve this. However, You should always be cautious about what plugins you use. 

Over the years, and countless plugins tried, I have come up with a list of plugins that I tend to favor. But whenever I need to look for a plugin that I have never used but needed the function, there are two things that I look at. 

  • Stars and how many reviews
  • The last time the plugin developers updated the code.
  • Look at the plugin’s code.

I am assuming that you may not know anything about code, and that is fine because stars and reviews and plugin updates are essential.

To use as an example, you may see a plugin with five stars and 40 reviews and compare it to another plugin with 4.5 stars and 1500 reviews. I would usually favor the second choice because they have built a reputation within the WordPress community, but as I said, that is what I would do. There have been reputable plugins that have dropped the ball due to security issues, but the developers of those plugins have been able to release updates to fix them as fast as possible. 

Testing

With the design and development phases finished. Now you can do the testing. Run through each page, test:

  • every button
  • link
  • function to make sure you have everything working
  • send test emails
  • sign up for your newsletter opt-in
  • test the tabs on your navigation bar
  • Click on your social media links

Take time during this phase. Trust me, there have been plenty of times projects were coming to a launch, and something goes wrong, whether it was a lead generation form not connecting to a CRM, payment gateways not connected to the live accounts, and crashed plugins, etc. To be in stressful situations before the big launch is something you do not want to be in, so take your time and comb through everything. 

Conclusion

In closing, following this process of concept, design, development, and testing will help build a website on whatever platform you decide to make your website. Beginning the journey to build an online presence should not have to be an overwhelming experience, especially if you are on a tight budget but want a design that will make you proud.  

Do you have a project you need to get started?

Send me an email so you and I can get started.

contact me