We’re going to go through the basics on how to install and use Firebug to add custom CSS styles to your theme. But, first of all, an introduction from the people of Mozilla.

Installing Firebug

You can download and install Firebug from its official website, or from your browser’s addon repository. You may need to restart your browser after doing it.

Inspecting elements

Right-click on the area you wish to change, and choose the Inspect Element with Firebug option. The Firebug window will open in its HTML tab: at the left, you will see the HTML code of your web page (with the element you clicked highlighted), and at the right you will see the Style sub-tab, with the CSS styles applied to that element.

Changing styles in real time

• To edit the value of a CSS property, click on it.
• To disable a property, hover on it and click the icon appearing to its left.
• To add a new property to a rule, right-click on it (or in one of its properties) and choose the New Property option. Then, enter the name and the value of the new property.
• To add a new rule, right-click anywhere and choose the Add Rule option. Then, enter the name of the rule (or keep the suggested one) and add new properties to it.

All the changes you make will be reflected immediately on the web page. This way, you can easily customize the aesthetics of your theme while checking how it looks.

Note that, if you reload the page, all your changes will be lost. That’s because Firebug works on the client side (your browser), and the files in your server remain untouched.

Obtaining your custom CSS

At the Style sub-tab, Firebug also tells us the stylesheet and line where it found each CSS rule (check the right-aligned link). If we want to check the whole stylesheet, we can click on the link, and Firebug would move to its CSS tab and show us the whole file (focused in the corresponding line). We can also search the theme files for that specific stylesheet, go to the mentioned line, and we will found the definition of that rule. But if we only want the CSS code to customize it and feed it to the theme, the easiest way is simply selecting and copying the whole rule from the Style sub-tab.

This way, copying the rules you need and changing the values of their properties, you will end up with a custom CSS code you can add to the theme. When editing this code, there are two things that you should consider:

• Be sure you’re pointing to the elements you want. If the original CSS rule applies to more than one element (separated by commas), there is a chance that you may your changes to apply only to some of them: in that case, remove the elements you don’t need. Also, it’s worth taking a look to the body class, which may help you point to an element only in specific pages.
• Don’t redefine properties you don’t want to change. If you’re not changing the default value of a property, remove it completely from your custom CSS, so the value from the original stylesheet can be used.

Saving your changes

Once you have your custom CSS code, you can check this article to learn how to add it to the theme. The styles defined there will overwrite the default theme styles and give you the customized look & feel you wanted.

If you know CSS, you can change almost anything in your theme. There’s virtually no limit!

The post How to use Firebug to customize your theme appeared first on NiceThemes.

This article covers all our recommended ways to make modifications on how your theme looks and works.

Theme Options

Once you installed one of our themes, you will be redirected to the NiceThemes → Theme Options section, where you can tweak all the settings available to customize the look and feel of your theme. However, there may be times when some modification that you need to perform is not covered by the theme settings, and you will have to write some code on your own.

Child Themes

This is the most recommended way to customize and modify a theme, and it provides so much possibilities that can’t be covered completely in this article. That’s why we wrote this introductory guide to Child Themes, where you can learn how to use them and see other resources for more details.

PHP Code

In case you need to add some PHP code of your own, you can start looking at the functions.php inside your Child Theme (if you’re using one) or your parent theme. This file is needed for themes to work, so it’s always gonna be present, and you only need to know where to put your code:

• If you’re not using a Child Theme, put your own PHP code at the end of the functions.php file. There should be a comment at the point where you can start adding your functionality.
• If you’re using a Child Theme, add your PHP code wherever you see it suitable inside your functions.php file. Keep in mind that the functions.php file of the parent theme will be loaded after this one.

We also provide lots of filter and action hooks for almost any element of our themes, so if you want to add, modify or remove something, most likely there’s a hook for that. You may want to look at the documentation for your specific theme for this.

In case you don’t know what hooks are, we recommend to read the Codex article about the subject, since they will significantly improve your work with WordPress.

CSS Code

If you want to add custom styles, there are several ways to do it:

• In your WordPress Dashboard, go to NiceThemes → Theme Options → Design & Styles, and add your code inside the text area for the “Custom CSS” option.
• If you are using a Child Theme, add your custom styles to your styles.css file.
• Create a file called custom.css in the root folder of your theme or Child Theme. This will be loaded automatically by the theme.
• Create and add a new stylesheet via PHP using the wp_register_style() and wp_enqueue_style() functions.

In case you’re not using a Child Theme, it’s very important that you never modify the contents of your style.css file, or any of the other included CSS files, since your changes will be lost when you update the theme. That’s one of the reasons we recommend to use Child Themes, but if you’re not doing it, always add or overwrite styles through Theme Options or the custom.css file.

JavaScript Code

Custom JavaScript libraries and implementations can be managed in any of the following ways:

• Create a file called custom.js in the root folder of your theme or Child Theme. This will be loaded automatically by the theme.
• Create and add a new JavaScript via PHP using the wp_register_script() and wp_enqueue_script() functions.

Just like with CSS files, you should never modify the JavaScript files included with the theme, since your changes will be lost after updates, and load your own files using any of the recommended methods.

Debugging

Sometimes, while making modifications to the theme options or code, you may not see what you expect, and have the need to look for a while inside the printed HTML code, or see the content of your CSS and JavaScript files to find out if something went wrong or not. We recommend to do that using Chrome DevTools, if you’re using the Chrome browser, Firebug for Firefox, and FirebugLite for any other browser.

The post How to customize a theme appeared first on NiceThemes.

A Child Theme is a theme that inherits the same functionality and styling of another theme, called the parent theme. By creating and working on a child theme, you can add, modify or disable parts of your site without changing the original files of the parent theme. You don’t have to worry anymore about updates to the parent theme, since there is no need to exclude your modified files from the updating process, or to re-add your changes to fit the new version. After the creation of a Child Theme, you end up significantly speeding up your development time.

Creating a child theme

1. Download and install your parent theme inside your wp-content/themes folder.
2. Create a new directory for your Child Theme besides the one for your parent theme. It’s recommended to name it as the folder of your parent theme and append “-child” to it (for example, if the folder of your parent theme is called my-theme, name your Child Theme’s folder as my-theme-child).
3. Inside your Child Theme’s folder, create a file called style.css, with the following contents:

   /*
   Theme Name: My Theme Child
   Template: my-theme
   */
   

   You’re gonna need to modify that code to fit your actual child and parent themes. Notice that the “Theme Name” property will be the name of your new Child Theme, while “Template” is the name of the folder of your parent theme. Once you completed this step, you can see that your Child Theme appears listed in your Dashboard, under Appearance > Themes.

4. Still in your Child Theme’s folder, create a file called functions.php, and put the following code inside it:

   <?php 
   add_action( 'wp_enqueue_scripts', 'my_theme_child_enqueue_styles' );
   function my_theme_child_enqueue_styles() {
       wp_enqueue_style( 'my—theme-style', get_template_directory_uri() . '/style.css' );
   }
   

   This code will load the styles of your parent theme inside your Child Theme once you activate it.

5. Activate your Child Theme in Appearance > Themes.

That’s all. Now you can start adding your custom styles inside styles.css and your custom functionality inside functions.php. This way, once there’s a new version available for your parent theme, you can update it without worrying about losing any changes you have made to it.

Using custom files

For our themes, if you want to replace any of their files in order to have your own version of them, you just need to create new files with the same names and in the same relative locations as the originals. Some examples:

• If you want a custom version of my-theme/index.php, just copy that file to my-theme-child/index.php and modify it as you need.
• If you want a custom version of my-theme/includes/options.php, just copy that file to my-theme-child/includes/options.php and modify it as you need.

The only exception to this rule are the functions.php files in the root folder of both your child and parent themes. WordPress will always load both files when using a Child Theme: the one inside the child first, then the parent’s one.

Further reading

This is just a very simple introduction to what you can do and accomplish by using a child theme. If you want to know more about advantages, features, practices and methods, you can read the article about Child Themes in the WordPress Codex.

The post How to create and use Child Themes appeared first on NiceThemes.

First, you need to download and install Poedit. Then look within the theme files for a folder named lang, or languages if you want to translate a plugin. There you’ll find a translatable POT file, which you can identify by its .pot extension. Once you found the file, you’ll need to follow these steps:

1. Open the file in Poedit. On the left column, you’ll see the original texts (in English) from the POT file. On the right column you can add your own translation.
2. Go to File → Save as… to save your translations. This process will create two new files: A PO file with the .po extension, and a MO file with the .mo extension. It’s really important to notice that the new files must be named with the locale for your language¹. For example, if you are translating to Spanish, your new files need to be named es_ES.po and es_ES.mo. For plugins, additionally, you need to put the plugin slug before the locale².
3. If you need to modify your translation, just open the generated PO file with Poedit. When you are finished editing, go to File → Save as… again to regenerate the MO file and update your translation.

Finally, you need to be running your WordPress installation in your language. You can see where to find all available translations for WordPress here.

Need Help?

If this information isn’t enough to help you translate your theme or plugin, please let us know it through our support forums.

However, keep in mind that this article only offers specific information about themes and plugins that are developed and maintained by NiceThemes. If you need help to translate a theme or plugin that hasn’t been created by us, please contact the original developer instead.

Further reading

If you want more details about how internationalizations and translations work in WordPress, you can take a look at the following resources:

• Translator’s Handbook
• Internationalizing And Localizing Your WordPress Theme
• Translating Your Theme

Notes

1. If you don’t know what your locale is, you can look for it here.
2. For example, if you’re translating Likes, your new files should be named nice-likes-es_ES.po and nice-likes-es_ES.mo.

The post How to translate themes and plugins appeared first on NiceThemes.