Step 1 – Installing WordPress

The process of installing WordPress is quite easy and friendly; no need to worry about that. Most web host providers give you a helping hand and automatically achieve this first step so you can immediately start playing with the content. However, if it’s your first time dealing with it and you need an in-depth guideline, we recommend checking out this one.

Step 2 – Downloading the Theme

Get the theme files by going to your Pixelgrade account, find the theme in the My Available Themes section, and click on Download.

Step 3 – Installing the Theme

Being at this stage is already a win, so the next steps will only shed some light on how to continue without hesitation.

• Go to the WordPress Dashboard and navigate to Appearance → Themes. Click Add New button at the top of the page and afterward go to the Upload one.
• To upload the file, choose the ZIP archive downloaded earlier and click Install Now.
• Once the file has is uploaded, click the Activate link.

Step 4 – Follow the site setup wizard

After theme activation, you have to follow the on-screen setup wizard that will install and activate the Pixelgrade Care plugin, which guides you through all the steps necessary to ensure functionality for your site. Once the install finishes, you will be guided through the following steps:

1. Linking your theme to the Pixelgrade account to activate the customer support and updates license;
2. Installing and activating the required and optional plugins for your theme;
3. Importing the demo content.

FAQs

Unable to create the directory? Theme install failed.

There are a bunch of reasons why you can’t install the theme directly through the WordPress Dashboard, such as limited writing permissions. To overwrite this behavior, you need to copy the theme files directly through FTP, as explained below.

1. First thing first, you need to get an FTP client like FileZilla or CyberDuck — both are free and cross-platform compatible software.
2. The second phase is to access the web host server and locate the WordPress installation. Then upload the unzipped theme in ../wp-content/themes/ folder.
3. Right after navigate to the Appearance → Themes section and click on the Activate button.

Need help setting everything up?

We have dedicated services designed to help you start off on the right foot.

View our services

The post Installing the Theme appeared first on Pixelgrade.

• Go to Dashboard and click on Appearance → Themes.
• Go to theme you just installed (at mouse-over you will see the Activate button – click on it).
• Now you can start working on your upcoming website.

Click on the Customize button and start playing around. You’re now ready to add content of any kind and customize the theme to your preferences.

FAQs

Do I need to start with specific plugins?

Yes. We highly encourage you to activate the recommended plugins. If you already have the Pixelgrade Care plugin installed (check that by going to the Plugins tab) follow the steps below:

• From your WordPress Dashboard, go to the Pixelgrade tab;
• Scroll to the Manage Plugins section and click on the Install button next to each plugin.

If you don’t have the Pixelgrade Care plugin installed, follow the steps below:

• Log in into website and click on Dashboad.
• Once you’re there, you’ll see a big notice telling you to install the Pixelgrade Care plugin.
• Click on Install the Pixelgrade Care plugin and follow the on-boarding setup.

How can I add the demo data?

We wrote a specific article about how to easily import demo data.

Need help configuring the theme?

Choose the Clean Theme Install service and we’ll set everything up for you in no time.

Check out our services

The post Activating the Theme appeared first on Pixelgrade.

Before you start

To get the right results, please validate once again these details:

1. Make sure you installed and activate all the required plugins.
2. If your site already has content (pages, posts), please note that importing demo data will cause mixed content, and things might get messy.

Loading Demo Content

FAQs

What happens if the import process stops at some point?

If the import process seems to stop, then you should know that it might be just a common WordPress issue related to the maximum execution time exceeded. There is a plugin that you can use to fix this easily. If you still struggle with it, read our friendly article about what you need to do to finish the demo data import.

Is the demo content free to use?

Because all the demo media content is under copyright, you’re not allowed to use it in any personal or commercial way. Instead, you can analyze it and get inspired to make your website at least as striking as our demo shows.

Why I can’t see the images from your demos?

The images you see on our theme demos do not have a redistribution license. This means that we can only use them on our website and can’t share them with all our customers.

Have no worries. We usually load other placeholder images to help you understand how the theme is built and start customizing it using your own content (text, images, videos, etc.).

Why the Starter Content section is missing?

If the Starter Content section isn’t visible under the Pixelgrade tab in your WordPress Dashboard, it might be due to the missing of certain PHP extensions that are either not installed or are disabled on your server.

The common PHP extension that you should ensure is active is curl which is required for fetching data from URLs. It is often used when communicating with other servers or APIs.

For a detailed overview of the required PHP extensions and the server environment for WordPress, consult the official WordPress Hosting Handbook article: Server Environment & PHP Extensions.

Is this too complicated?

Say no more. We can help you set everything up in no time.

View our services

The post Adding the Demo Content appeared first on Pixelgrade.

All the available options available in our themes were designed to assist you in this customization process. We highly believe that offering a certain amount of freedom can’t harm your final results, and that’s why we encourage you to use a theme for its specific goals, and make it yours at the same time.

Basic rules for an eye-candy look and feel

Each and every theme from our portfolio has a set of particular style rules that give direction to help you build up a beautiful website. These rules frame the website’s core structure and work as a strong infrastructure for the content and style layers that you’ll fill over time.

Also, you can challenge everything by smartly using the Custom CSS Editor field. Moreover, for any advanced customizations, we highly suggest you use a Child Theme.

Why can’t I change everything in terms of style?

We’re a design studio with eight years of experience in building WordPress themes. In fact, design is at the core of everything we do: from producing striking products and writing clean and witty code to crafting an experience that counts. This being said, we take well-informed decisions (based on real insights and hard data) to give you the solutions you need to stand out from the digital crowd.

Therefore, the simple yet bold idea to have a consistent website is something we deeply care about. With all these boundaries, even though we think they’re not real struggles, you know for a fact that you have a safety net, and your website is in the spotlight.

The post Design & Style Overview appeared first on Pixelgrade.

You should know that changing the WordPress language from the Dashboard → Settings → General area is not enough. Different parts of posts, pages, menus, or widgets make up the website’s structure and all need a bit of work. The content from those sections can be added directly to your language. However, there are other text strings attached, both from the theme and plugins, that you need to manually translate.

Let’s take the following scenario: you have a food blog, and at the end of each article, you can have a Read more call to action that encourages readers to click the blog post. To facilitate access, you should translate those specific words into your native language.

Have no worries. In this article, we’re going to walk your through:

1. How to translate your WordPress interface
2. How to translate your WordPress theme and plugins
3. How to create a multilingual website

How to translate your WordPress interface and admin screens

The good thing about using one of the most popular pieces of software to create a website is the massive community support that keeps growing. Therefore, WordPress translations are already available at the click of a few buttons. 

Easy steps to translate your WordPress interface

• Go to the WordPress dashboard.
• Navigate to Settings → General.
• Under the Site Language tab, use the drop-down menu to select the language you need.

What gets translated when you switch the default WordPress language?

Switching the language (as in the screenshot above) means you’ll translate everything displayed in the WordPress dashboard.

As an example, we chose “Spanish” for the site language, which means “Settings” will now display as “Ajustes.” The same goes for other areas of the dashboard. 

Note that translating your WordPress interface does not influence the content that you write in posts or pages. Almost everything your visitors will see on will stay the same.

There are a few exceptions of dynamic strings that come from themes and plugins, like the blog posts date (screenshot) and part of the blog posts comments section (screenshot), that needs a few more steps to change. Find out how below.

How to translate your WordPress theme and plugins

WordPress themes are responsible for most of what visitors see on the website. The good thing is a big part of what’s displayed is fully editable within the Wordpress interface: the content on a page, blog posts content, page name, and so on. 

Therefore, a great deal of translation is done by default when building pages and posts. For example, naming the “About” page “Acerca” is a step towards a translated website.

Except for the areas where you control the content 100%, there are others built in the theme that might not be directly editable. Some examples are:

• the search text and placeholders (example 1, example 2).
• the “read more” links below blog posts.
• titles for various taxonomy like categories or tags (example).

When it comes to WordPress plugins, it all depends on the plugin you’re using and its impact on the live website — what the plugin displays publicly to your audience. 

For example, image optimization plugins are for your use and don’t display information to visitors. On the other hand, e-commerce plugins like WooCommerce generate digital stores on your website, which means a lot of information becomes visible to those visiting.

Some plugins can have translations already available, while others need one from scratch. In the case of WooCommerce, and due to their popularity and community support, there are a lot already available (you can find them here).

1. Choose a translation plugin

The best option is to choose a trustworthy translation plugin. Our recommendation is TranslatePress because it:

• has an easy to use live preview editor to see your changes instantly;
• allows translating anything on your website like themes, plugins, pages, posts, categories, tags and more, all within the same interface;
• follows all the SEO principles so your translated pages will be able to rank in search engines;
• offers automatic translations using Google Translate to get a head start.

2. Install the translation plugin

1. From the WordPress dashboard navigate to Plugins → Add new. 
2. Search for TranslatePress→ Click Install Now and then Activate.
3. Upon activation, you need to go to Settings → TranslatePress to customize the plugin settings.

3. Translate your entire website

1. From the WordPress dashboard, navigate to Settings → Translate Press → General.
2. In the tab that shows up, change the Default Language to the one you need.
3. Leave the All Languages tab as is. This tab is useful when you want to add a second language between which visitors can easily switch. If that’s the case, skip to the part about creating a multilingual website.
4. Scroll down to the Language Switcher settings and uncheck the Floating language selection option to hide the language switcher.

Next, proceed with translating the content:

1. Navigate to a page where you have elements who need translation and click the Translate site button in the WordPress admin bar (screenshot)
2. Hover over those elements and add the translations as in the video below.

Once you translate a particular string (e.g., the “Next” text from the top menu), all similar strings will benefit from it. Plus, TranslatePress can translate all areas of a website, no matter if a text comes from a plugin or a WordPress theme.

Bonus tip: when it comes to strings that contain HTML, our recommendation is to copy-paste the non-translated version and replace the text while leaving the HTML intact.

Note: if you want to unlock more options from the TranslatePress plugin, you can go PRO.

How to create a multilingual website

Having a multilingual website means that your website is available in more than one language between which visitors can easily switch.

It’s good to know that doing this involves a bit of effort, but many great perks make it pay off. Among them are:

• Expand your reach – whether you blog or sell something online, a new language opens the door to other people who wouldn’t otherwise be able to read your content.
• Improve your SEO – people tend to search in their native language, so you can seize this opportunity to rank for keywords that your competitors don’t target.
• Increase the number of customers – since people won’t have trouble understanding what you’re selling, you can increase the number of sales from other countries.
• Get more people through the door – a good example is a restaurant based in a popular vacation spot where people from all over the world come to visit. Or a business that targets people from a country with more than one official language; for example, Switzerland has four official languages: German, French, Italian, and Romansh.

If your website can be a good source of information for users who speak different languages, it’s a loss not to make it accessible to them. If you invest a lot of time and energy to write valuable content, you should try to make it as available as possible.

WordPress is benefiting from such a big community, and that makes translating a WordPress theme as easy as installing a multilingual translation plugin. These tools can help you not only install and use other languages but also to localize your translations.

1. Localize your website translations

While translations mostly focus on conveying a message or literal meaning of the original content (like-for-like copy of the original), localization means adapting to the specifics of a particular language, business, or audience.

A few good examples of localization are:

• writing a date: 07/12/1998 can suggest “12th of July” in the US and “7th of December” in Germany
• writing numbers: 1,245 means one-thousand-two-hundred-forty-five in the US and one point two-four-five in the UK
• writing about money: $20 is the standard in the US, 20$ in Europe
• following various GDPR guidelines when addressing people from Europe, and so on.

All of this localization can happen with the help of translation plugins, which allow you to edit your content and adapt it to the specifics of a country or language.

2. Make your website available in multiple languages

TranslatePress is here to help once again; just follow the steps below:

1. Go back to Settings → TranslatePress → General.
2. Under the All Languages tab, click on the Choose button and search for the desired language. Once you found it, click on Add.
3. Scroll to the bottom of the page and click Save changes.
4. Navigate to a specific website page and click on the Translate site button in the WordPress admin bar.
5. Hover over the text, click the blue pencil icon and start adding translating like in the example below:

3. Create and customize the language switcher

There are several options to choose from when you want to display the language switcher. To see those options, go to Settings → TranslatePress → General.

1. Native language name – here, you can control how the language names display on your website.
   1. If you choose No the additional language, for example “Spanish,” will show as “Spanish”
   2. If you choose Yes it will be displayed as “Español”
2. Use a subdirectory for the default language – use this option if you want your website’s primary language to have an URL. For example, if the website is in English, it will be available at example.com/en/
3. Language Switcher  – customize how you want to display the language switchers: with flags, short name (e.g. en for English, es for Spanish), full name, etc.

4. Add the language switcher in the menu

1. Navigate to Appearance → Menus → Select the menu you want to edit.
2. Click on Language Switcher and select the languages you wish to add to the menu (screenshot).
3. If you want the languages to be in a submenu, you can go click on Custom Links, add “#” in the URL field, and click on Add to Menu.

Conclusion

Since most themes and plugins are in English by default, translating them is essential if you want readers to understand everything while browsing.

But besides pure translation, our recommendation is to use this translation process as a way to share a bit more of who you are with the world. This is your chance to be creative. 

Who says that the “Next article” button should be translated like-for-like? Maybe there’s a fun way of naming it that can make your website truly unique and improve the browsing experience and engagement.

All of these bits and pieces of text on your website can be categorized as microcopy. The way you customize the microcopy is essential because it impacts your visitors’ experience. At the same time, it allows you to express your personality and style, so don’t be afraid to leverage it. These tidbits are a great chance to reveal who you are and what people could expect to be treated on your website.

If you are interested in learning more about how you can adapt the text on your website to match your personality, give this article a try: How the microcopy of your site impacts your visitor’s experience.

The post How to translate your WordPress website appeared first on Pixelgrade.

Pairing fonts together in a manner that makes them look good and complement each other is no easy task (unless you are an experienced designer). Choosing the correct fonts for your website’s design can be the difference between a compelling and attractive website and a dull, ordinary one.

Fonts make a difference in the type of message you want to send to the world and how you present yourself. If you aim to show playfulness, joy, and quirkiness, you can’t settle just with the words; your fonts need to match that. And, when it comes to a website, there are a lot of areas where your text shows up, so a lot more ways to mess things up.

Here are two rules that, if you follow, should place you on the safe side:

• Limit yourself to only a few fonts: it’s best to stick with two fonts, but if you’re feeling ambitious, three is the maximum.
• Always use headings to create hierarchy and coherence within the structure of a page or a blog post.

To help you even more, we developed an automated calculation system to accurately and correctly adjust fonts and sizes for all devices—mobile, desktop, tablets, and everything in between. Thanks to this tool, you can now be certain that your website displays the right font sizes on all gadgets—one worry less. If you want to learn more about our process of creating true fluid web typography and our approach to responsive web design, you can read this article.

Using Premium Fonts

If you want to go even further, you can always appeal to custom fonts. You can quickly make that happen through seamless integration with Fonto, our custom fonts management plugin. For further details on how to use it, you can read this helpful article.

The post Changing Fonts appeared first on Pixelgrade.

How do I know my theme needs an update?

The first thing you might notice when a new update is available is a notification on your WordPress Dashboard. It can look something like this:

At the same time, all our WordPress themes come with Pixelgrade Care—a plugin created by us that allows you to sync your license to get customer support and updates, manage theme updates, install required and recommended plugins that go well with your theme.

Once a new update is available, you’ll notice a red notification circle near the Pixelgrade tab in your WordPress Dashboard.

How do I update my theme?

The best way is by going to the Pixelgrade tab and, in the notification that shows at the top, clicking the Update Now button. Here’s a video that might help.

How do I update my plugins?

In the case of required and recommended plugins, you can manage and update them by going to the Pixelgrade tab. Once a plugin update is available, you will see an Update button next to it.

For all other plugins, you can check for plugin updates by navigating to the Plugins tab from your WordPress Dashboard. Clicking on the Update now text will ensure the plugin’s latest version will be downloaded and installed.

Can I enable automatic updates?

WordPress comes with a built-in option that allows you to enable auto-updates for your plugins and WordPress theme.

To enable auto-updates for your WordPress theme, navigate to Appearance → Themes, and click on Enable auto-updates. View the screenshot for details. Note that the option won’t be available unless you have a theme update pending.

As for the plugins, the process is just as straightforward. Navigate to Plugins and click the Enable auto-updates option next to each plugin you want to be automatically updated. View the screenshot for details.

The post How will I know when updates are available? appeared first on Pixelgrade.

Of course, a stand-alone logo is not sufficient for creating a strong brand. You also need a system to correctly use all the elements: from logo to colors, from the visual identity to the verbal one. However, read further to learn what you need to do to insert a logo within your website correctly.

Before you start

In order to properly make things happen with the font, we highly suggest you take into consideration these factors:

• File Formats
  You should be aware that a logo looks best in a .png or .svg format with a transparent background. If your logo file doesn’t have a transparent background, it’s likely that your logo will partly cover the background image.
• Logo Size
  We encourage you to have a larger image for your logo. Try to use a high dimension of the logo, and we’ll do the rest by scaling it. This way the logo will adapt to any screen size (both desktop and mobile).

Adding a Logo Image

Now that you know what’s better to do when setting up your logo, here’s what you have to do in order to upload it on your WordPress site:

It couldn’t be easier than that, and you’ve already made an important step in order to personalize your upcoming website.

Using a Text Version

If you don’t have any graphic symbol that stands for your business, we recommend you choose the text option instead. It’s a good switch if you’re careful with details like the font and its size.

In this case, simply use the Site Title field under Site Title & Logo.

The post Adding your Logo appeared first on Pixelgrade.

That’s why social icons are much more than a witty approach to spreading messages. In fact, they are a solid gateway to encourage your audience to follow and connect with you by having a cordial and welcoming attitude. Moreover, it is a powerful strategy to create and consolidate a community relevant to your website.

Which social icons are supported?

The theme automatically recognizes your social media network and adds the appropriate icon.

We support a bunch of social services, but we encourage you to be aware that not all of them bring real value. Also, don’t abuse these channels because nothing good will happen. Depending on your website and your goals, search for the right social services. Start by finding out where your audience likes to spend time and try to create witty liaisons.

The post Displaying Social Icons in the Menu appeared first on Pixelgrade.

All you have to do is to jump into the CSS Editor under Appearance → Customize and start adding your CSS while you can see your changes previewed live.

Since recently, using CSS to alter the site appearance has been mainly a web designer’s job. Now, you should know that you don’t need advanced designing or coding skills to do this work by yourself. We’re giving you a helping hand by referring to some trustworthy resources to assist you:

1. Check out the CSS Basics article from WordPress.com, and don’t forget to check the useful links at the bottom of the article.
2. Or read the Intro to CSS section from WordPress Training community.

Don’t want to learn CSS? Use a plugin!

If you want to customize your website even more but you don’t want to touch any CSS code, you can use CSS Hero plugin. It is the most powerful tool that helps you to make live customizations without writing a single line of code. We checked it with our theme and it works beautifully. Read more about it here.

The post Using the Custom CSS Editor appeared first on Pixelgrade.