How to Add Your WordPress Blog to Apple News

Did you just start a blog and want to submit it to Apple News? By becoming an Apple News publisher, you can monetize your news channel while giving your readers the ability to read your blog alongside with their other favorite websites from a single… Read More »

The post How to Add Your WordPress Blog to Apple News appeared first on WPBeginner.

Did you just start a blog and want to submit it to Apple News? By becoming an Apple News publisher, you can monetize your news channel while giving your readers the ability to read your blog alongside with their other favorite websites from a single app. In this article, we will show you how to add your WordPress blog to Apple news.

Add WordPress blog to Apple News

Before Getting Started

Apple News app allows users to read news and blogs articles in one single app on their Apple devices. It provides a better reading experience and makes it easier for users to stay updated with their favorite content from a single app.

The Apple News program for publishers allows you to submit your blog as an Apple News channel. It also allows you to monetize your content by showing advertisements.

However the monetization program is still in beta, and it is only available in the United States, UK, and Australia. You will have to wait for a couple weeks for your application to get reviewed.

Please note: this guide is for self-hosted WordPress blogs and not for WordPress.com blogs. See our guide on the difference between WordPress.org vs WordPress.com. If you’re on WordPress.com, then you can use this guide to move from WordPress.com to WordPress.org.

Having said that, let’s learn how to add your WordPress blog to Apple News.

Adding a WordPress Site to Apple News

First thing you need to visit the News Publisher app on the iCloud website. You will need to login with your Apple ID.

Once you are logged in, you will see News Publisher terms of service. Click on I agree and then click on the submit button.

Next, you will be asked to provide publisher information. Fill in the form and then click on Next.

Publisher info

In the following step, you will be asked to setup your channel by providing information about your website. Fill in the required fields and click on the next button to proceed.

Setting up your channel on Apple News

You will now be asked to provide a type based logo for your channel. A type based logo is just an image with your site name in readable text format. It should have a transparent background, and the file size should be less than 2 MB.

Upload logo for your channel

Next, you will be asked to choose between RSS or Apple News Format. Go ahead and choose Apple News Format, we will cover this in the next step.

If you use the RSS feed option, then you will not be able to monetize your content in Apple News. It also prevents you from using other Apple News features as a publisher.

See the comparison chart below:

Choose news format

Once you are done, click on the Signup for Apple News Format button.

That’s all, you have successfully finished your application for joining the Apple News. You will now see a thank you page like this one:

Thank you message

Now you will have to wait to hear back from Apple News. An application can take up to two weeks to be approved.

You may want to bookmark this article now and come back to complete step 2 once your application is approved. Press Ctrl + D to bookmark the article in your browser (Cmd + D for Mac users).

Submitting Articles to Apple News

Once your application is approved, you will be able to submit articles from your WordPress blog to the Apple news app.

You will have to manually submit your first article via your News Publisher account on iCloud. Since Apple is notorious for quality, your first article will be manually reviewed by the Apple News team, and this could also take some time (anywhere between 1-2 weeks).

After that Apple News will automatically start showing articles from your RSS Feed.

Here is how to automatically publish your WordPress blog posts to Apple News.

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

Upon activation, you need to visit Settings » Apple News page to configure plugin settings.

Publish to Apple News settings

Next, you need to enter your channel ID, API key, and API key secret. You can find this information by signing into your Apple News Publisher account.

Apple news API keys

After that you need to select which post types you would like to generate in Apple News format. In most cases, the only post type you need to select is Posts.

Apple News WordPress Post Type

The last section is to configure the visual appearance of different elements in your generated articles. Feel free to customize the settings as you need.

Apple News Formatting

Don’t forget to click on the save changes button when you are done.

That’s all, Publish to Apple News will now start publishing your article in the Apple News Format.

We hope this article helped you learn how to add your WordPress blog to Apple News. You may also want to see these 19 actionable tips to drive traffic to your WordPress site.

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

The post How to Add Your WordPress Blog to Apple News appeared first on WPBeginner.

How to Connect Constant Contact to WordPress (Step by Step)

Are you using ConstantContact for your email marketing? Want to connect ConstantContact with your WordPress site? In this ultimate guide, we will show you how to connect ConstantContact with WordPress. Why Building an Email List is so Important? Have you ever wondered that why every… Read More »

The post How to Connect Constant Contact to WordPress (Step by Step) appeared first on WPBeginner.

Are you using ConstantContact for your email marketing? Want to connect ConstantContact with your WordPress site? In this ultimate guide, we will show you how to connect ConstantContact with WordPress.

Using Constant Contact with WordPress - The Ultimate Guide

Why Building an Email List is so Important?

Have you ever wondered that why every website on the internet wants to have your email address? Whether you are creating an account on Facebook, Twitter, or New York Times, they all want your email address.

The answer is dead simple. Email is the best way to reach your customers.

A recent study showed that small businesses get $40 back for every dollar spent on email marketing. It is the most effective way to convert visitors into customers.

You can learn more on this topic by reading our article on why you should start building your email list right away.

Now that you know the importance of building an email list, let’s see how to get started with Constant Contact to build an email list for your WordPress site.

What is Constant Contact?

Constant Contact is one of the most popular email marketing service providers in the world. They specialize in sending mass emails to your customers, manage your email lists, and run effective email marketing campaigns.

It can be quite overwhelming for small businesses to start their own email list. Constant Contact makes sure that even absolute beginners can run their email campaigns like a pro.

It is a paid service with free 2 month trial. After the trial period, pricing starts as low as $20 per month.

How to Set up Constant Contact

First, you need to visit Constant Contact website and sign up for an account.

Sign up for a Constant Contact account

Upon sign up, you will land on the Constant Contact dashboard. You will see three simple steps to help you get started.

Constant Contact dashboard

Step 1: Setting up your first email list

First, you need to click on ‘Set up your first list’ link. This will bring up a popup where you need to provide a name for your email list and some email addresses to add into it.

Next, click on the save list button to continue.

Step 2: Add your organization info

The CAN-SPAM act requires a valid postal address in all outgoing marketing emails. Constant Contact makes it easy for you to comply with this law by providing your organization info. Constant Contact will then automatically add this information in the footer of your emails.

You need to click on ‘Add your organization info’ link. It will take you to a form where you need to provide your business information.

Add your organization information

You will need to provide your website address and postal address. You will also be asked to select an industry for your business and upload an image logo.

Don’t forget to click on the save button to store your settings and continue to the next step.

Step 3: Send your first email

Lastly, you need to click on ‘Send your first email’ link. Constant Contact will show you a number of beautiful email templates to choose from.

Select a template for your first email

This will open the template in Constant Contact’s live WYSIWYG email composer. This drag and drop design tool allows you to easily design your email.

First you need to provide a title for your campaign. After that you can replace the images used in template with your own, add your own text and branding.

Compose email

Click on the continue button when you are satisfied with the result.

Now you will reach the email options page. This is where you need to select which email list to use, when to send an email, or change sender name and reply-to email address.

Email options

Once you are done, click on the Send Now or Schedule button to continue.

That’s all, you have successfully finished setting up your Constant Contact account.

Adding Constant Contact Signup Forms in WordPress

Now that you have set up your Constant Contact account, the next step is to collect email addresses by asking users to join your email list.

There are multiple ways to do this. You can copy and paste the signup form code from your Constant Contact account to your WordPress site.

You can also use OptinMonster to add highly optimized signup forms to your WordPress site. It will help you get many more email subscribers faster. See our case study of how we increased our email subscribers by 600% using OptinMonster.

We will show you both of these methods in this guide. Let’s get started.

Adding Default Constant Contact Signup Forms in WordPress

Constant Contact comes with built-in tools to create your email signup forms. You can then embed these forms into your WordPress site.

First you need to login to your Constant Contact account and then click on ‘Contacts Growth Tools’ from the navigation menu on top.

Contacts growth tools

On the next page, you need to click on create a signup form button.

Create a signup form

This will bring you to the form builder wizard.

First, you need to provide the form name. This name will be used internally, so that you can identify a form in Constant Contact dashboard.

Signup form details

Next, you need to provide a title, and taglin for your form. Both of them will be visible on your form.

Lastly, you need to select at least one email list. Users signing up using this form will be added to these lists.

Click on the continue button for the next step.

Now you need to add the fields you want to display on your signup form. The email address field is required. You can click on ‘Additional fields’ to add more fields to your signup form.

Add fields to your email signup form

After adding the form fields, click on the continue button.

In the last step, you can choose your font color, background color, and add a logo.

Change form appearance

You can click on the preview button to see how your form looks. Once you are satisfied, click on the ‘Finish’ button.

You will be redirected back to the contacts growth tools page. You will notice the form you just created under ‘Additional Web Sign-Up Forms’ section.

You need to click on the actions drop down menu and then select ‘Embed Code’.

Get embed code for your signup form

This will bring up a popup with the embed code to add your form anywhere. You need to copy this code and paste it in a text editor like Notepad.

Embed code for your signup form

Now visit your WordPress admin area and click on Appearance » Widgets.

From the list of available widgets, drag and drop the Text widget to a sidebar where you want to display your signup form.

Paste the code you copied from Constant Contact website in the widget’s text area. Once you are done, click on the save button to store your widget settings.

That’s all, you can now visit your website to see the signup form in action.

Constant Contact email signup form in WordPress

Adding Constant Contact Signup Forms with OptinMonster

While the basic forms are relatively easy to add, they are not ideal for high conversions.

An average users visiting your website spends very little time looking at non-content element. You need email signup forms that grabs your user’s attention.

This is where OptinMonster comes in. It is the most popular lead generation tool in the market. You can create beautiful sign up forms that are optimized for conversions and A/B test them without hiring a developer.

OptinMonster comes with different kinds of signup forms such as exit-intent popups, floating bars, after post forms, sidebar forms, slide-in forms, full screen welcome gates, and more.

You also get powerful features like MonsterLinks (2-step optins), Scroll detection, A/B testing, page level targeting, and more.

OptinMonster works great with WordPress and all popular email service providers including Constant Contact.

Send WordPress Posts to Your Constant Contact Email List

Constant Contact makes it super simple to add your WordPress content into your email campaigns.

Note: Constant Contact does not currently offer automatic sending of blog posts to email list.

First, login to your Constant Contact account and visit the Campaigns page. You need to click on the create button and then select send a new email.

Send an email

You will be asked to select a template for your email. After that you will reach the email builder screen.

From the left pane drag and drop the “Read More” block into your email preview. Next, click on the read more block in the email preview to edit it.

Add read more content block

This will bring up a popup window. You need to provide the URL of your WordPress blog post and click on the preview button.

Constant Contact will automatically fetch an image from your article and an article summary. You can click on the Insert button to add it to your email.

Fetch blog content into your email

Repeat the process to add more content from your WordPress blog into your email. Once you are done, go ahead and click on the continue button.

You will then reach the last step of creating your email. This is where you can select whether you want to send the email right away or schedule it.

That’s all, Constant Contact will now send your email with your blog content to your subscribers.

We hope this article helped you learn how to connect Constant Contact to WordPress. You may also want to see our list of 19 actionable tips to drive traffic to your WordPress site.

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

The post How to Connect Constant Contact to WordPress (Step by Step) appeared first on WPBeginner.

How to Choose The Best Premium WordPress Theme for Your Site

When you are starting a blog, choosing the right theme is crucial for your success. During the process, you will likely have to decide between free WordPress themes vs premium WordPress themes. Often users ask us which one is better and what’s our selection process… Read More »

The post How to Choose The Best Premium WordPress Theme for Your Site appeared first on WPBeginner.

When you are starting a blog, choosing the right theme is crucial for your success. During the process, you will likely have to decide between free WordPress themes vs premium WordPress themes. Often users ask us which one is better and what’s our selection process when choosing a premium WordPress theme. In this article, we will cover how to choose the best premium WordPress theme for your site. By the end, you will know exactly what to look for and what you absolutely need to AVOID!

Choosing the best premium WordPress theme

Free WordPress Theme vs Premium WordPress Theme

One of the main reason why a lot of users choose a premium WordPress theme over a free one is because you get guaranteed support.

Free WordPress themes are often built as a passion project, so you are not guaranteed to get support or updates.

On the other hand, when you pay for a premium WordPress theme, you get good documentation, access to support, and regular updates.

Some theme shops even go beyond and offer video tutorials, demo content, and even a free blog setup service.

Aside from that, premium themes are make your website more unique because free themes are being used by everyone.

Having said that, here’s what you need to look for when selecting a premium WordPress theme.

1. Aesthetically Pleasing Modern Design

Modern web design

You will probably be using this theme on your website for quite sometime. You users will become accustomed to it. That’s why you need to choose a theme which is aesthetically pleasing and can be used for a long time without requiring any major changes.

There are certain elements of design that are used by all good designers to create beautiful websites.

  • Good Color Combination
  • Awesome Typography
  • Clean Layout
  • Beautiful Images

Together these elements create a beautiful harmony and consistency that appeals to your users. It not only looks great, but it also helps you achieve your business goals.

Most premium themes come with unlimited color choices and built-in tools to select fonts. You need to make sure that your premium WordPress theme uses better typography out of the box.

Don’t just look at the homepage. Go deeper in the theme demo and explore other sections. For example, if you are building a portfolio site then check theme’s demo for portfolio. If you will be adding testimonials, then checkout how testimonials look in the theme demo.

Make sure that there are plenty of page templates and layouts to use. Examine homepage, single pages, posts, and blog sections to make sure that they all maintain the same design consistency and appeal.

2. Features vs Presentation

Features vs presentation

The main difference between WordPress themes and plugins is that themes handle the presentation part of your website and plugins handle the functionality.

However, the premium WordPress theme market is highly competitive and sometimes theme developers cannot resist the temptation to add more plugin-like functionality into their themes.

Why is this considered bad practice?

When a WordPress theme crosses over into the plugin territory, it becomes difficult to switch themes. For example if a WordPress theme is using a custom post type, then switching to another theme would make those custom post types disappear from the admin menu.

Shortcodes defined by theme would also stop functioning which also makes switching a difficult and time consuming process.

On the other hand, there are WordPress themes which behave exactly like a plugin. Offering functionality needed to create very specific niche websites. For example real estate themes or hotel themes. Some of these themes are really useful, but if you are going to use those themes, then you need to understand that it will be difficult to switch themes later because other themes may not have the similar functionality.

3. Security and Performance

Theme performance

Many WordPress beginners don’t pay much attention to speed and good coding practices when choosing a premium theme.

In the race to win new customers, theme developers can integrate unsafe and quick solutions that can compromise your site’s security. The insane amount of features can cost you speed and performance issues.

Now the problem is that most beginner level users do not have the skills to study code. So how do you know that the code behind a premium theme is of good quality?

First, you need to buy your premium themes from trusted and well reputed WordPress theme shops. Some of the theme shops that we trust and recommend are:

Secondly, look around for reviews and customer testimonials. See who else is using themes developed by that particular theme shop or developer. Are there any big websites or blogs using their themes? Checkout the testimonials page on the theme shop or search for their reviews on Google.

4. Compatibility Check

Before you start browsing for a premium theme, take a few moments to write down all the features you are looking for. For example:

  • Do you need eCommerce support?
  • Translation readiness for non-English websites
  • BuddyPress or bbPress support
  • Any other plugins that you might be using

Many premium themes come with built-in templates and support for popular eCommerce platforms like WooCommerce and Easy Digital Downloads.

If a theme you are looking for is not available in your language, then ask the theme developer to see if a translation is in progress.

Some users may want to use very specific plugins to create niche websites like job boards, question answer websites, etc. Feel free to ask the theme developers if their theme would work with a specific plugin.

You need to make sure that you are investing your money in the right place.

After Selecting the Perfect Premium WordPress Theme

A good premium WordPress theme would help you easily build high quality websites. However, there are still many things you can do to improve your site.

We recommend taking a look at these 24 must have WordPress plugins for all websites.

If you want to further customize your website, then you should look at CSS Hero which makes it easy to customize websites (see our CSS Hero review).

We hope this guide helped you choose the best premium WordPress theme for your site. You may also want to see our comparison of the best WordPress contact form plugins.

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

The post How to Choose The Best Premium WordPress Theme for Your Site appeared first on WPBeginner.

How to Install WordPress in Other Languages

Do you want to use WordPress in other languages? WordPress is fully translated into over 65 languages and can be used in your native language. In this article, we will show you how to install WordPress in other languages. Since this is a comprehensive step… Read More »

The post How to Install WordPress in Other Languages appeared first on WPBeginner.

Do you want to use WordPress in other languages? WordPress is fully translated into over 65 languages and can be used in your native language. In this article, we will show you how to install WordPress in other languages.

Installing and using WordPress in other languages

Since this is a comprehensive step by step tutorial, feel free to use the navigation below to get to the appropriate section.

Getting Started with WordPress in Other Languages

In order to start a blog, the first thing you will need is to get WordPress hosting.

We recommend using Bluehost. They are one of the largest WordPress hosting providers in the world. They are also an officially recommended WordPress hosting provider.

After signing up with a WordPress host, the next step is to install WordPress. We have a complete step by step tutorial on how to install WordPress properly.

WordPress in German

Choosing a Language During WordPress Installation

WordPress 4.0 came with the new and improved internationalization support. Now users can choose a language for their WordPress website during the installation.

WordPress allows you to select language during installation

This is particularly useful if you need installation instructions to be in your local language. However, if you didn’t select the language during your WordPress install process, then you can change it any time under WordPress settings.

Changing Language in WordPress

WordPress makes it super-easy to change the language on your website. Simply go to Settings » General in your WordPress dashboard, and scroll down to the bottom of the page. There you will see the option to select site language.

Installing and changing language in WordPress settings

While WordPress has translations for over 162 languages, you will be only able to see languages that are fully translated (62).

If you do not see your language in the list, this does not mean that it is not available or that you can not use it.

We will show you how to manually install language packs in WordPress.

Manually Installing WordPress Translation Files For Other Languages

WordPress uses a gettext system for translations (localization and internationalization). Volunteer users from around the world use a main .pot template file to translate WordPress in their languages. This results into two files for each language. Portable Object format file with .po extension, and Machine Object file with .mo extension. You will need a .mo file for your language.

Go to the WordPress translation teams page to see if there is a WordPress translation available for your language.

Finding your language files on WordPress Translators website

Next, click on the percentage value to see the status of the translation progress in your language and then click on current WordPress version.

You will now reach GlotPress, which is a web based app used by WordPress team to manage and translate WordPress projects.

Once there, you need to scroll down to the bottom until you see the export section. In the dropdown, select Machine Object Message Catalog (.mo) and then click on Export link.

Exporting translations

Repeat the process above and select Portable Object Message Catalog (.po) and then click on the Export link.

After downloading and unzipping the language pack on your computer, you will need to connect to your website using an FTP client. Once connected, upload the language files to /wp-content/languages folder.

After you’re done uploading the file, return to the WordPress admin area. Go to Settings » General page and scroll down to site language option. You can now select the language you just uploaded because it will appear under installed languages.

Installed languages

Using an English Admin Interface in Multilingual WordPress

Sometimes you may want to use WordPress in a different language while keeping the admin interface in English.

This is particularly helpful if you have admins who are not familiar with other installed languages or you give access to developers.

You will need to install and activate the English WordPress Admin plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a language switcher in the WordPress admin bar. Each user can simply take the mouse over to the language switcher and select the admin interface language.

Switch WordPress admin interface to English

For more detailed instructions, take a look at our guide on how to use English WordPress admin on Multilingual site.

Creating a Multilingual WordPress Website

WordPress can be used in different languages but creating content in multiple languages is not easily manageable by default.

Luckily, there are several plugins that allow you to easily create and manage multilingual WordPress sites. These plugins allow you to create content in multiple languages and making it easier for your website visitors to switch languages.

We recommend using WPML (WordPress Multi Language) plugin. This paid plugin is used by thousands of websites from all over the world to create user friendly multilingual websites with WordPress.

Creating multilingual content in WordPress with WPML

See our guide on how to create a multilingual WordPress site with WPML for detailed instructions.

If you are looking for a free solution, then you can checkout Polylang plugin. Take a look at our guide on creating multilingual WordPress site with Polylang.

Help Translate WordPress in Your Language

If you did not find an available translation for WordPress in your language, then perhaps you can help create one.

WordPress is an open source software that is completely volunteer driven. See: Why is WordPress free and how does it make money?

This means that all available translations that you see right now are created by volunteer users from around the world (just like you). Check out Translating WordPress website for more information on how you can contribute.

We hope that this article helped you install WordPress in other languages. You may also want to take a look at our list of 24 Must Have WordPress plugins for all websites.

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

The post How to Install WordPress in Other Languages appeared first on WPBeginner.

How to Install WordPress in Other Languages

Do you want to use WordPress in other languages? WordPress is fully translated into over 65 languages and can be used in your native language. In this article, we will show you how to install WordPress in other languages. Since this is a comprehensive step… Read More »

The post How to Install WordPress in Other Languages appeared first on WPBeginner.

Do you want to use WordPress in other languages? WordPress is fully translated into over 65 languages and can be used in your native language. In this article, we will show you how to install WordPress in other languages.

Installing and using WordPress in other languages

Since this is a comprehensive step by step tutorial, feel free to use the navigation below to get to the appropriate section.

Getting Started with WordPress in Other Languages

In order to start a blog, the first thing you will need is to get WordPress hosting.

We recommend using Bluehost. They are one of the largest WordPress hosting providers in the world. They are also an officially recommended WordPress hosting provider.

After signing up with a WordPress host, the next step is to install WordPress. We have a complete step by step tutorial on how to install WordPress properly.

WordPress in German

Choosing a Language During WordPress Installation

WordPress 4.0 came with the new and improved internationalization support. Now users can choose a language for their WordPress website during the installation.

WordPress allows you to select language during installation

This is particularly useful if you need installation instructions to be in your local language. However, if you didn’t select the language during your WordPress install process, then you can change it any time under WordPress settings.

Changing Language in WordPress

WordPress makes it super-easy to change the language on your website. Simply go to Settings » General in your WordPress dashboard, and scroll down to the bottom of the page. There you will see the option to select site language.

Installing and changing language in WordPress settings

While WordPress has translations for over 162 languages, you will be only able to see languages that are fully translated (62).

If you do not see your language in the list, this does not mean that it is not available or that you can not use it.

We will show you how to manually install language packs in WordPress.

Manually Installing WordPress Translation Files For Other Languages

WordPress uses a gettext system for translations (localization and internationalization). Volunteer users from around the world use a main .pot template file to translate WordPress in their languages. This results into two files for each language. Portable Object format file with .po extension, and Machine Object file with .mo extension. You will need a .mo file for your language.

Go to the WordPress translation teams page to see if there is a WordPress translation available for your language.

Finding your language files on WordPress Translators website

Next, click on the percentage value to see the status of the translation progress in your language and then click on current WordPress version.

You will now reach GlotPress, which is a web based app used by WordPress team to manage and translate WordPress projects.

Once there, you need to scroll down to the bottom until you see the export section. In the dropdown, select Machine Object Message Catalog (.mo) and then click on Export link.

Exporting translations

Repeat the process above and select Portable Object Message Catalog (.po) and then click on the Export link.

After downloading and unzipping the language pack on your computer, you will need to connect to your website using an FTP client. Once connected, upload the language files to /wp-content/languages folder.

After you’re done uploading the file, return to the WordPress admin area. Go to Settings » General page and scroll down to site language option. You can now select the language you just uploaded because it will appear under installed languages.

Installed languages

Using an English Admin Interface in Multilingual WordPress

Sometimes you may want to use WordPress in a different language while keeping the admin interface in English.

This is particularly helpful if you have admins who are not familiar with other installed languages or you give access to developers.

You will need to install and activate the English WordPress Admin plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a language switcher in the WordPress admin bar. Each user can simply take the mouse over to the language switcher and select the admin interface language.

Switch WordPress admin interface to English

For more detailed instructions, take a look at our guide on how to use English WordPress admin on Multilingual site.

Creating a Multilingual WordPress Website

WordPress can be used in different languages but creating content in multiple languages is not easily manageable by default.

Luckily, there are several plugins that allow you to easily create and manage multilingual WordPress sites. These plugins allow you to create content in multiple languages and making it easier for your website visitors to switch languages.

We recommend using WPML (WordPress Multi Language) plugin. This paid plugin is used by thousands of websites from all over the world to create user friendly multilingual websites with WordPress.

Creating multilingual content in WordPress with WPML

See our guide on how to create a multilingual WordPress site with WPML for detailed instructions.

If you are looking for a free solution, then you can checkout Polylang plugin. Take a look at our guide on creating multilingual WordPress site with Polylang.

Help Translate WordPress in Your Language

If you did not find an available translation for WordPress in your language, then perhaps you can help create one.

WordPress is an open source software that is completely volunteer driven. See: Why is WordPress free and how does it make money?

This means that all available translations that you see right now are created by volunteer users from around the world (just like you). Check out Translating WordPress website for more information on how you can contribute.

We hope that this article helped you install WordPress in other languages. You may also want to take a look at our list of 24 Must Have WordPress plugins for all websites.

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

The post How to Install WordPress in Other Languages appeared first on WPBeginner.

How to Create a Mobile-Ready Responsive WordPress Menu

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily… Read More »

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

Create mobile-responsive WordPress menu

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

Ready? Let’s get started.

Method 1: Add a Responsive Menu in WordPress Using a Plugin

This method is easier and recommended for beginners as it requires no custom coding.

In this method, we will be creating a hamburger menu that slides out on mobile screen.

Responsive menu plugin demo

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

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Responsive menu settings

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

Responsive menu plugin demo

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

Responsive select menu

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

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

Select menu settings

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

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

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

First you need to open a text editor like notepad and paste this code.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.


<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Toggle menu preview

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here is a sample CSS that you can use as an starting point:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

Here is how it looked on our demo website:

Responsive slide-in menu in WordPress

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

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

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

How to Create a Mobile-Ready Responsive WordPress Menu

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily… Read More »

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

Do you want to create a mobile-ready responsive WordPress menu? Mobile users have already surpassed desktop users for a lot websites. Adding a mobile responsive menu makes it easier for users to navigate your website. In this article, we will show you how to easily create a mobile-ready responsive WordPress menu.

Create mobile-responsive WordPress menu

This is an in-depth tutorial. We will show both the plugin method for beginners (no coding) and the coding method for our more advanced users.

By the end of this tutorial, you will learn how to create a slide-in mobile menu, dropdown mobile menu, and a toggle mobile menu.

Ready? Let’s get started.

Method 1: Add a Responsive Menu in WordPress Using a Plugin

This method is easier and recommended for beginners as it requires no custom coding.

In this method, we will be creating a hamburger menu that slides out on mobile screen.

Responsive menu plugin demo

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

Upon activation, the plugin will add a new menu item labeled ‘Responsive Menu’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Responsive menu settings

First you need to enter the width of screen at which point the plugin will start showing responsive menu. The default value is 800px which should work for most websites.

After that, you need to select the menu you would like to use for your responsive menu. If you haven’t created a menu yet, then you can create one by visiting Appearance » Menus. See our guide on how to add navigation menu in WordPress for detailed instructions.

Last option on the screen is to provide a CSS class for your current non-responsive menu. This will allow the plugin to hide your non-responsive menu on smaller screens.

Don’t forget to click on the ‘Update Options’ button to store your settings.

You can now visit your website and resize your browser screen to see the responsive menu in action.

Responsive menu plugin demo

The responsive menu plugin comes with many other options which allow you to change behavior and appearance of your responsive menu. You can explore these options on plugin’s settings page and adjust them as needed.

Method 2: Add a Drop Down Select Menu Using a Plugin

Another way to add a responsive menu is by adding a drop down select menu. This method does not require any coding skills, so it is recommended for beginners.

Responsive select menu

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

Upon activation, you need to visit Appearance » Responsive Select to configure plugin settings.

Select menu settings

You need to scroll down to ‘Activate theme locations’ section. By default, the plugin is activated on all theme locations. You can change that by selectively turning it on for specific theme locations.

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

You can now visit your website and resize browser screen to see responsive select menu in action.

Method 3: Creating Mobile Friendly Responsive Menu with Toggle Effect

One of the most common used method to display a menu on mobile screens is by using the toggle effect.

This method requires you to add custom code to your WordPress files. If you haven’t done this before, then take a look at our guide on pasting snippets from web in WordPress.

First you need to open a text editor like notepad and paste this code.

( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )(jQuery);

Now you need to save this file as navigation.js on your desktop.

Next, you need to open a FTP client to upload this file to /wp-content/themes/your-theme-dir/js/ folder on your WordPress site.

Replace your-theme-directory with your current theme’s directory. If your theme directory does not have a js folder, then you need to create it.

After uploading the JavaScript file, the next step is to make sure your WordPress site loads this JavaScript. You will need to add the following code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

Now we need to add the navigation menu into our WordPress theme. Usually navigation menu is added into a theme’s header.php file.


<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle">Menu</button>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

We are assuming that the theme location defined by your theme is called primary. If it is not, then use the theme location defined by your WordPress theme.

The final step is to add CSS so that our menu uses the right CSS classes for toggle to work when viewed on mobile devices.


/* Navigation Menu */
.main-navigation {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	text-align: center;
}
.main-navigation li {
	margin-top: 24px;
	margin-top: 1.714285714rem;
	font-size: 12px;
	font-size: 0.857142857rem;
	line-height: 1.42857143;
}
.main-navigation a {
	color: #5e5e5e;
}
.main-navigation a:hover,
.main-navigation a:focus {
	color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
	display: none;
}

.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
	display: inline-block;
}

// CSS to use on mobile devices

@media screen and (min-width: 600px) {

.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: 1px solid #ededed;
		border-top: 1px solid #ededed;
		display: inline-block !important;
		text-align: left;
		width: 100%;
	}
	.main-navigation ul {
		margin: 0;
		text-indent: 0;
	}
	.main-navigation li a,
	.main-navigation li {
		display: inline-block;
		text-decoration: none;
	}
	.main-navigation li a {
		border-bottom: 0;
		color: #6a6a6a;
		line-height: 3.692307692;
		text-transform: uppercase;
		white-space: nowrap;
	}
	.main-navigation li a:hover,
	.main-navigation li a:focus {
		color: #000;
	}
	.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}
	.main-navigation li ul {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 100%;
		z-index: 1;
		height: 1px;
		width: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
	}
	.main-navigation li ul ul {
		top: 0;
		left: 100%;
	}
	.main-navigation ul li:hover > ul,
	.main-navigation ul li:focus > ul,
	.main-navigation .focus > ul {
		border-left: 0;
		clip: inherit;
		overflow: inherit;
		height: inherit;
		width: inherit;
	}
	.main-navigation li ul li a {
		background: #efefef;
		border-bottom: 1px solid #ededed;
		display: block;
		font-size: 11px;
		font-size: 0.785714286rem;
		line-height: 2.181818182;
		padding: 8px 10px;
		padding: 0.571428571rem 0.714285714rem;
		width: 180px;
		width: 12.85714286rem;
		white-space: normal;
	}
	.main-navigation li ul li a:hover,
	.main-navigation li ul li a:focus {
		background: #e3e3e3;
		color: #444;
	}
	.main-navigation .current-menu-item > a,
	.main-navigation .current-menu-ancestor > a,
	.main-navigation .current_page_item > a,
	.main-navigation .current_page_ancestor > a {
		color: #636363;
		font-weight: bold;
	}
	.menu-toggle {
		display: none;
	}
	
	}

You can now visit your website and resize your browser screen to see your responsive toggle menu in action.

Toggle menu preview

Troubleshooting: Depending on your WordPress theme you may need to adjust the CSS. Use inspect element tool to figure out the CSS conflicts with your theme.

Method 4: Add a Slide-In Mobile Menu in WordPress

Another common technique to add a mobile menu is by using a slide-in panel menu (as shown in Method 1).

Method 4 requires you to add code to your WordPress theme files, and it is just a different way of accomplishing the same results as Method 1.

First, you need to open a plain text editor like Notepad and add the following code to a blank text file.

(function($) {
$('#toggle').toggle( 
    function() {
        $('#popout').animate({ left: 0 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="close" />');
        });
    }
);
})(jQuery);

Don’t forget to replace example.com with your own domain name and your-theme with your actual theme directory. Save this file as slidepanel.js to your desktop.

Now you will need an image which will be used as a menu icon. A hamburger icon is most commonly used as the menu icon. You will find tons of such images from different websites. We will be using the menu icon from Google Material Icons library.

Once you find an image that you want to use, save it as menu.png.

Next, you need to open a FTP client client and upload slidepanel.js file to /wp-content/your-theme/js/ folder.

If your theme directory does not have the JS folder, then you need to create tit and then upload your file.

After that, you need to upload menu.png file to /wp-content/themes/your-theme/images/ folder.

Once the files are uploaded, we need to make sure that your theme loads the JavaScript file you just added. We will achieve this by enqueuing the JavaScript file.

Add this code to your theme’s functions.php file.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20160909', true );

Now we need to add the actual code in your theme’s header.php file to display the navigation menu. You should look for code similar to this:

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

You want to wrap existing navigation menu with the HTML code to display your slide panel menu on smaller screens.

<div id="toggle">
<img src="http://www.example.com/wp-content/themes/your-theme/images/menu.png" alt="Show" /></div>
<div id="popout">
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</div>

Notice that your theme’s navigation menu is still there. We have just wrapped it around HTML that we need to trigger slidepanel menu.

Last step is to add CSS to hide the menu image icon on larger screens. You will also need to adjust the position of the menu icon.

Here is a sample CSS that you can use as an starting point:

@media screen and (min-width: 769px) { 
#toggle {
display:none;
}

} 

@media screen and (max-width: 768px) { 
#popout {
position: fixed;
height: 100%;
width: 250px;
background: rgb(25, 25, 25);
background: rgba(25, 25, 25, .9);
color: white;
top: 0px;
left: -250px;
overflow:auto;
}


#toggle {
float: right;
position: fixed;
top: 60px;
right: 45px;
width: 28px;
height: 24px;

}

.nav-menu li { 
border-bottom:1px solid #eee; 
padding:20px;
width:100%;
}

.nav-menu li:hover { 
background:#CCC;
}

.nav-menu li a { 
color:#FFF;
text-decoration:none;
width:100%;
}
} 

Depending on your WordPress theme, you may need to adjust the CSS to avoid conflicts.

Here is how it looked on our demo website:

Responsive slide-in menu in WordPress

We hope this article helped you learn how to create a mobile-ready responsive WordPress menu. You may also want to see our guide on how to add a fullscreen responsive menu in WordPress

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

The post How to Create a Mobile-Ready Responsive WordPress Menu appeared first on WPBeginner.

How to Add Attachment File Type Icons in WordPress

Have you seen websites that show file icons next to the download links? Recently one of our readers asked if it was possible to display attachment file icons in WordPress. Yes it is, and it’s quite easy. In this article, we will show you how… Read More »

The post How to Add Attachment File Type Icons in WordPress appeared first on WPBeginner.

Have you seen websites that show file icons next to the download links? Recently one of our readers asked if it was possible to display attachment file icons in WordPress. Yes it is, and it’s quite easy. In this article, we will show you how to add attachment file icons in WordPress.

Adding file type icons for attachments in WordPress

When You Need Attachment File Icons in WordPress

By default, WordPress allows you to upload images, audio, video, and other documents. You can also allow additional file types to be uploaded in WordPress.

When you upload a file through the media uploader and add it to a post or page, WordPress will try to embed the file if it is an image, audio, video, or in a supported file format.

For all other files, it will just add a file name as plain text and link it to the download or attachment page.

Text links for attachments with no icons for file type

In the above screenshot, we have added a PDF and a Docx file. However, it is difficult for a user to guess which file they are downloading.

If you regularly upload different file types, then you may want to display an icon next to the link, so your users can easily find the file type they’re looking for.

Having said that, let’s see how to add attachment file icons in WordPress for different file types.

Method 1: Add Attachment File Icons in WordPress Using Plugin

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

Upon activation, you need to visit Settings » MimeType Icons page to configure plugin settings.

MimeType Link Icon settings

The plugin allows you to choose icon size. You can also choose between png and gif icons. Next, you need to choose the icon alignment and which file types will display the icon.

Under the advanced options, you can enable CSS classes to hide icons. File download links wrapped in these CSS classes will not show the icons.

Advanced settings

Below that you will find the option to show file size next to the download link. It is turned off by default, as it could be resource intensive. However if you like, you can enable it and also enable the option to ‘Cache retrieved file sizes’.

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

You can now edit a post or page and add an file download link using media uploader. Preview your post and you will see the file icon next to the download link.

Attachment links with file type icons

Method 2: Using Icon Fonts for Attachment Files in WordPress

In this method, we will be using an icon font to display an icon next to attachment file link.

First thing you need to do is install and activate the Better Font Awesome plugin.

Upon activation, you can edit a post or page where want to add an attachment link.

You will notice the new ‘Insert Icon’ button on top of post editor. Clicking on it will display a popup where you can search and select the icon you want to add.

Insert icon into your WordPress post

Font Awesome comes with tons of icons and has icons for the most commonly used file types. Click on the icon you want to add and the plugin will automatically add the required shortcode in the post editor.

Now you can upload your file and insert into post using media uploader.

Add attachment links

You can also add your own custom CSS for a file icon by adding your own css class to the shortcode like this:

[icon name=”file-pdf-o” class=”” unprefixed_class=”pdf-icon”]

You can now use .pdf-icon class to change icon size, color, and style it to your own needs.

Font icons used as attachment file type icons

We hope this article helped you learn how to add attachment file icons in WordPress. You may also want to see our guide on how to how to embed PDF, spreadsheet, and others in WordPress blog posts.

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

The post How to Add Attachment File Type Icons in WordPress appeared first on WPBeginner.

Self-contained .NET Core Applications

Just in case you missed it, .NET is all open source now and .NET Core is a free, open source, cross-platform framework that you can download and start with in <10 minutes. You can get it on Mac, Windows, and a half-dozen Unixes at http://dot.net. Take that along with the free, cross-platform Visual Studio Code and you’ll be writing C# and F# all over the place.

Ok, that said, there’s two ways to deploy a .NET Core application. There’s FDD and SCD. Since TLAs (three letter acronyms) are stupid, that’s Framework-dependent and Self-contained. When .NET Core is installed it ends up in C:\program files\dotnet on Windows, for example. In the “Shared” folder there’s a bunch of .NET stuff that is, well, shared. There may be multiple folders, as you can see in my folder below. You can have many and multiple installs of .NET Core.

When you’re installing your app and its dependencies BUT NOT .NET Core itself, you’re dependent on .NET Core already being on the target machine. That’s fine for Web Apps or systems with lots of apps, but what if I want to write an app and give it to you as zip or on a USB key and and I just want it to work. I’ll include .NET Core as well so the whole thing is a Self Contained Deployment.

It will make my “Hello World” application larger than if I was using an existing system-wide install, but I know it’ll Just Work because it’ll be totally self-contained.

Where is .NET Core installed to?

If I deploy my app along with .NET Core it’s important to remember that I’ll be responsible for servicing .NET Core and keeping it up to date. I also need to decide on my target platforms ahead of time. If I want it to run on Windows, Mac, and Linux AND just work, I’ll need to include those target platforms and build deployment packages for them. This all makes mostly intuitive sense but it’s good to know.

I’ll take my little app (I’m just using a “dotnet new” app) and I’ll modify project.json in a text editor.

My app is a .NETCore.App, but it’s not going to use the .NET Core platform that’s installed. It’ll use a local version so I’ll remove “type=”platform”” from this dependency.

"frameworks": {
"netcoreapp1.0": {
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.1"
}
}
}
}

Next I’ll make a runtimes section to specify which ones I want to target. There’s a list of ALL the Runtime IDs here.

"runtimes": {
"win10-x64": {},
"osx.10.10-x64": {},
"ubuntu.14.04-x64": {}
}

After running “dotnet restore” you’ll want to build for each of these like this:

dotnet build -r win10-x64
dotnet build -r osx.10.10-x64
dotnet build -r ubuntu.14.04-x64

And then publish release versions after you’ve tested, etc.

dotnet publish -c release -r win10-x64
dotnet publish -c release -r osx.10.10-x64
dotnet publish -c release -r ubuntu.14.04-x64

Once this is done, I’ve got my app self-contained in n folders, ready to deploy to whatever systems I want.

Self-contained .NET app built for 3 OSs

You can see in the Win10 folder there’s my “MYAPPLICATION.exe” (mine is called scd.exe) that can be run, rather than running things like developers do with “dotnet run.”

I run foo.exe, not dotnet.exe now

There’s lots of good documentation about how you can tune and define exactly what gets deployed with your self contained application over at the .NET Core Docs. You can do considerable trimming to .NET Core, and there’s talk of that becoming more and more automated in the future, possibly down to the method level.


Sponsor: Big thanks to Redgate for sponsoring the feed this week. Discover the world’s most trusted SQL Server comparison tool. Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.


© 2016 Scott Hanselman. All rights reserved.
     

Just in case you missed it, .NET is all open source now and .NET Core is a free, open source, cross-platform framework that you can download and start with in <10 minutes. You can get it on Mac, Windows, and a half-dozen Unixes at http://dot.net. Take that along with the free, cross-platform Visual Studio Code and you'll be writing C# and F# all over the place.

Ok, that said, there's two ways to deploy a .NET Core application. There's FDD and SCD. Since TLAs (three letter acronyms) are stupid, that's Framework-dependent and Self-contained. When .NET Core is installed it ends up in C:\program files\dotnet on Windows, for example. In the "Shared" folder there's a bunch of .NET stuff that is, well, shared. There may be multiple folders, as you can see in my folder below. You can have many and multiple installs of .NET Core.

When you're installing your app and its dependencies BUT NOT .NET Core itself, you're dependent on .NET Core already being on the target machine. That's fine for Web Apps or systems with lots of apps, but what if I want to write an app and give it to you as zip or on a USB key and and I just want it to work. I'll include .NET Core as well so the whole thing is a Self Contained Deployment.

It will make my "Hello World" application larger than if I was using an existing system-wide install, but I know it'll Just Work because it'll be totally self-contained.

Where is .NET Core installed to?

If I deploy my app along with .NET Core it's important to remember that I'll be responsible for servicing .NET Core and keeping it up to date. I also need to decide on my target platforms ahead of time. If I want it to run on Windows, Mac, and Linux AND just work, I'll need to include those target platforms and build deployment packages for them. This all makes mostly intuitive sense but it's good to know.

I'll take my little app (I'm just using a "dotnet new" app) and I'll modify project.json in a text editor.

My app is a .NETCore.App, but it's not going to use the .NET Core platform that's installed. It'll use a local version so I'll remove "type="platform"" from this dependency.

"frameworks": {

"netcoreapp1.0": {
"dependencies": {
"Microsoft.NETCore.App": {
"version": "1.0.1"
}
}
}
}

Next I'll make a runtimes section to specify which ones I want to target. There's a list of ALL the Runtime IDs here.

"runtimes": {

"win10-x64": {},
"osx.10.10-x64": {},
"ubuntu.14.04-x64": {}
}

After running "dotnet restore" you'll want to build for each of these like this:

dotnet build -r win10-x64

dotnet build -r osx.10.10-x64
dotnet build -r ubuntu.14.04-x64

And then publish release versions after you've tested, etc.

dotnet publish -c release -r win10-x64

dotnet publish -c release -r osx.10.10-x64
dotnet publish -c release -r ubuntu.14.04-x64

Once this is done, I've got my app self-contained in n folders, ready to deploy to whatever systems I want.

Self-contained .NET app built for 3 OSs

You can see in the Win10 folder there's my "MYAPPLICATION.exe" (mine is called scd.exe) that can be run, rather than running things like developers do with "dotnet run."

I run foo.exe, not dotnet.exe now

There's lots of good documentation about how you can tune and define exactly what gets deployed with your self contained application over at the .NET Core Docs. You can do considerable trimming to .NET Core, and there's talk of that becoming more and more automated in the future, possibly down to the method level.


Sponsor: Big thanks to Redgate for sponsoring the feed this week. Discover the world’s most trusted SQL Server comparison tool. Enjoy a free trial of SQL Compare, the industry standard for comparing and deploying SQL Server schemas.



© 2016 Scott Hanselman. All rights reserved.
     

How to Change Sender Name in Outgoing WordPress Email

Do you want to change the default sender name and email address for outgoing WordPress emails? By default, WordPress uses ‘WordPress’ as the sender name for all outgoing WordPress notification emails. In this article, we will show you how to change the default sender name… Read More »

The post How to Change Sender Name in Outgoing WordPress Email appeared first on WPBeginner.

Do you want to change the default sender name and email address for outgoing WordPress emails? By default, WordPress uses ‘WordPress’ as the sender name for all outgoing WordPress notification emails. In this article, we will show you how to change the default sender name and email address in outgoing WordPress email.

Changing default sender name and email address in WordPress outgoing emails

Why You Should Change the Default Sender Information in WordPress?

The default WordPress sender name is ‘WordPress’ which sends emails from a non-existent email address ([email protected]) as the sender email.

Many spam filters block your WordPress emails believing it to be spam. Sometimes it does not even make it to the spam folder.

For more on this topic, take a look at our guide on how to fix WordPress not sending email issue.

The outgoing email notifications are important, and you should use your own brand and email address. This increases the authenticity of your brand and increases name recognition among your users.

Having said that, let’s see how to change the default sender name and email address in outgoing WordPress email notifications.

Method 1: Changing Default Sender Name and Email using a Plugin

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

Upon activation, you will notice a new menu item labeled CB Mail Sender in your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

Mail sender options

You will need to enter the name and email address you want to be used for outgoing WordPress emails.

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

That’s all, all your WordPress notification emails will now show the name and email address you entered in plugin settings.

Bonus tip: You should use a professional email address. See our guide on how to create professional business email address.

Method 2: Manually Change Sender Name and Email Address

This method requires you to paste code into your WordPress files. If you are new to adding code in WordPress, then take a look at our beginners guide on pasting snippets from web into WordPress.

You will need to add the following code in your theme’s functions.php file or a site-specific plugin.


// Function to change email address

function wpb_sender_email( $original_email_address ) {
    return [email protected]';
}

// Function to change sender name
function wpb_sender_name( $original_email_from ) {
	return 'Tim Smith';
}

// Hooking up our functions to WordPress filters 
add_filter( 'wp_mail_from', 'wpb_sender_email' );
add_filter( 'wp_mail_from_name', 'wpb_sender_name' );

This code simply replaces the default WordPress sender name and email address with your custom sender name and email address.

You can test this by adding a new user, changing password, or any other action that sends WordPress notification email.

We hope this article helped you learn how to change sender name and email address in outgoing WordPress email. You may also want to see our guide on how to send email to all registered users in WordPress.

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

The post How to Change Sender Name in Outgoing WordPress Email appeared first on WPBeginner.