Category Archives: WordPress Themes

How to Properly Add JavaScripts and Styles in WordPress

08.11.2017javascripts, styles, Tutorials, WordPress Plugins, WordPress ThemesEditorial Staff

Do you want to learn how to properly add JavaScripts and CSS stylesheets in WordPress? Many DIY users often make the mistake of directly calling their scripts and stylesheets in plugins and themes. In this article, we will show you how to properly add JavaScripts and stylesheet in WordPress. This will be particularly useful for those who are just starting to learn WordPress theme and plugin development.

Properly adding JavaScripts and styles in WordPress

Common Mistake When Adding Scripts and Stylesheets in WordPress

Many new WordPress plugins and theme developers make the mistake of directly adding their scripts or inline CSS into their plugins and themes.

Some mistakenly use the wp_head function to load their scripts and stylesheets.

<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>

While the above code may seem easier, it is the wrong way of adding scripts in WordPress, and it leads to more conflicts in the future.

For example, if you load jQuery manually and another plugin loads jQuery through the proper method, then you have jQuery being loaded twice. If it is loaded on every page, then this will negatively affect WordPress speed and performance.

It is also possible that the two are different versions which can also cause conflicts.

That being said, let’s take a look at the right way of adding scripts and stylesheets.

Why Enqueue Scripts and Styles in WordPress?

WordPress has a strong developer community. Thousands of people from around the world develop themes and plugins for WordPress.

To make sure that everything works properly, and no one is stepping on another’s toes, WordPress has an enqueuing system. This system provides a programmable way of loading JavaScripts and CSS stylesheets.

By using wp_enqueue_script and wp_enqueue_style functions, you tell WordPress when to load a file, where to load it, and what are its dependencies.

This system also allow developers to utilize the built-in JavaScript libraries that come bundled with WordPress rather than loading the same third-party script multiple times. This reduces page load time and helps avoid conflicts with other themes and plugins.

How to Properly Enqueue Scripts in WordPress?

Loading scripts properly in WordPress is very easy. Below is an example code that you would paste in your plugins file or in your theme’s functions.php file to properly load scripts in WordPress.

?php
function wpb_adding_scripts() {

wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);

wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

Explanation:

We started by registering our script through the wp_register_script() function. This function accepts 5 parameters:

$handle – Handle is the unique name of your script. Ours is called “my_amazing_script”
$src – src is the location of your script. We are using the plugins_url function to get the proper URL of our plugins folder. Once WordPress finds that, then it will look for our filename amazing_script.js in that folder.
$deps – deps is for dependency. Since our script uses jQuery, we have added jQuery in the dependency area. WordPress will automatically load jQuery if it is not being loaded already on the site.
$ver – This is the version number of our script. This parameter is not required.
$in_footer – We want to load our script in the footer, so we have set the value to be true. If you want to load the script in the header, then you would make it false.

After providing all the parameters in wp_register_script, we can just call the script in wp_enqueue_script() which makes everything happen.

The last step is to use wp_enqueue_scripts action hook to actually load the script. Since this is an example code, we have added that right below everything else.

If you were adding this to your theme or plugin, then you can place this action hook where the script is actually required. This allows you to reduce the memory footprint of your plugin.

Now some might wonder why are we going the extra step to register the script first and then enqueuing it? Well, this allows other site owners to deregister your script without modifying the core code of your plugin.

Properly Enqueue Styles in WordPress

Just like scripts, you can also enqueue your stylesheets. Look at the example below:

<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );  
?>

Instead of using wp_enqueue_script, we are now using wp_enqueue_style to add our stylesheet.

Notice that we have used wp_enqueue_scripts action hook for both styles and scripts. Despite the name, this function works for both.

In the examples above, we have used plugins_url function to point to the location of the script or style we wanted to enqueue.

However, if you are using the enqueue scripts function in your theme, then simply use get_template_directory_uri() instead. If you are working with a child theme, then use get_stylesheet_directory_uri().

Below is an example code:

<?php
 
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
 
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );  
?>

We hope this article helped you learn how to properly add jacvascript and styles in WordPress. You may also want to study the source code of the top WordPress plugins for some real life code examples.

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 Properly Add JavaScripts and Styles in WordPress appeared first on WPBeginner.

Monstroid 2 Review: A Powerful WordPress Multipurpose Theme

02.11.2017business themes, cherry framework, Monstroid, Monstroid 2, Multipurpose Theme, WordPress Themes, WP Multipurpose ThemeLindsay Liedke

These days there is no shortage of multipurpose WordPress themes in the market. And, since they all offer such a wide variety of features, it really is difficult to know which one is best suited for your needs. In the past, we have thoroughly discussed TemplateMonster’s multipurpose theme – Monstroid. But, that was a long ... Read more

The post Monstroid 2 Review: A Powerful WordPress Multipurpose Theme appeared first on Learn WordPress with WPLift.

The Best Free WordPress Themes October 2017

31.10.2017Best Free WordPress Themes, free themes, free wordpress themes, WordPress ThemesTeam WPLift

October has seen some brand new free themes submitted to the WordPress official theme directory. The new themes vary from news, magazine, personal blog, business and one-page themes. Here is our hand-picked list of the top free themes for October 2017: Canuck Canuck is a multi-purpose theme with woo-commerce support, homepage builder and different page & ... Read more

The post The Best Free WordPress Themes October 2017 appeared first on Learn WordPress with WPLift.

26 Best WordPress Themes for Graphic Designers

20.10.2017best wordpress themes, graphic design themes for wordpress, Showcase, WordPress Themes, wordpress themes for graphic designersEditorial Staff

Are you looking for the best WordPress themes for graphic designers? For a graphic design website, you may be looking for something creative and inspiring. Typical blog or business templates often do not meet the criteria. In this guide, we have hand-picked the best WordPress themes for graphic designers that are both functional and creative.

Best WordPress themes for graphic designers

Creating a Graphic Design Website with WordPress

WordPress is the best website builder for artists, designers, and creative folks. It offers great flexibility and freedoms to match your artistic expression.

There are two different types of WordPress. A self hosted WordPress.org website gives you access to all features of WordPress. See our comparison of WordPress.com vs WordPress.org for more details.

You will need a WordPress hosting account and a domain name to use self hosted WordPress.

We recommend using Bluehost. They are an officially recommended WordPress hosting provider and one of the largest web hosting companies in the world.

Once you have purchased hosting. Head over to our guide on how to make a website for step by step installation instructions.

Having said that, let’s take a look at the best WordPress themes for graphic designers that you can use on your website.

1. Creativo

Creativo is an all-purpose WordPress theme with 11 ready-made websites that can be installed with 1-click. These demo websites include one for creative professionals and another one for agencies. Each one of these templates can be completely customized using a premium drag and drop builder plugin that ships free with the theme.

It includes an easy to use custom theme options dashboard which helps you easily set up your website. It includes tons of templates, a blog section, custom widgets, and unlimited colors.

2. Meteor

Designed to build portfolio and resume websites, Meteor is the perfect theme for graphic designers. Its main feature would be the masonry grid layout for your portfolio items at the front.

Each portfolio item has its own details page where you can add more videos, image galleries, description, and more. It also comes with a resume template to showcase your qualifications and experience to prospective clients.

3. Soho

Soho is a WordPress art gallery theme which can easily repurposed for graphic design galleries and exhibitions. It includes sections to display upcoming events, artists, a blog section, exhibitions, and contact form.

It includes features like custom columns, buttons, tables, panels, icon fonts, and more. It is easy to set up and includes a simple theme options panel and full live customizer support.

4. Lense

Lense is a beautiful WordPress theme suitable for graphic designers, artists, and photographers. It includes 6 beautiful photo gallery layouts including horizontal scrolling, sliders, and multi-column masonry grids.

Despite its minimalist design, Lense gives you full control to use any colors, add widgets, and create custom layouts with page builder of your choice. It is super easy to use and customize and has a powerful theme options panel.

5. Kanop

Kanop is another gorgeous WordPress theme for graphic designers, artists, and creative professionals. Its homepage features a masonry grid layout with a welcome message at the top.

It is super easy to use and includes 1-click demo installer, custom theme settings page, and drag and drop page builder. It ships with a premium WordPress slider plugin and full support for multilingual websites using WPML.

6. Pepper+

Pepper+ is a beautifully crafted WordPress theme for designers and artists. It takes a modular approach to design and allows you to create any kind of website using simple drag and drop modules.

It ships with 4 ready-made websites that can be installed with 1-click. These websites include one designed specifically for individual artists. Other notable features include beautiful typography, icon fonts, contact form and more.

7. Kansas

Kansas is a minimalist WordPress theme for graphic designers, photographers, and artists. It comes with a spacious layout with lots of white space and crisp typography.

It is easy to setup with demo installer and a custom theme settings panel. It includes a filterable portfolio, image galleries, unlimited colors, and custom widgets.

8. Agency Pro

Agency Pro is a powerful WordPress theme for graphic design agencies. It features gorgeous full screen background image with your featured work and recent posts on the homepage.

It is designed for Genesis theme framework, which is built for speed and performance. Other features include custom page templates, widgetized homepage, customizable header, and more.

9. Martho

Martho is a powerful yet minimalist WordPress theme for artists, designers, and photographers. It comes with beautiful portfolio templates to easily showcase your best work.

It ships with page builder and slider plugins. Other features include photo galleries, featured content carousels, social media sharing, WooCommerce support, and more.

10. Vogue

Vogue is a modern WordPress theme designed for fashion, designers, artists, and photographers. Its refreshing design uses lots of white space which breathes new life into your images.

It includes a beautiful slider on the homepage, followed by your content. Inside you’ll also find custom widgets for social media profiles, Instagram widget, popular posts, and contact form popup.

11. Verb

Verb is designed specifically for graphic designers, illustrators, and photographers. This beautiful WordPress theme comes with a powerful portfolio section. Each portfolio item has a detailed page where you can add more details.

Other notable features include crisp typography, lightbox popup for galleries, color picker, full width page template, and more. It is easy to use and comes with a getting started dashboard to help you set up your website.

12. Hellomouse

Hellomouse is a creative WordPress theme for graphic designers, artists, and illustrators. Designed for great first impression it puts your latest work at the front and center of your website. This will help you generate more leads and get more work.

It is quicker to setup and easier to customize with more than 60 options in customizer. Other notable features include custom widgets for social media and content discovery, full width page templates, and page builder support.

13. Monochrome

If you are looking for an ultra minimalist option, then you’ll love Monochrome. This Genesis child theme uses lots of white space and beautifully displays your images.

It includes a simpler theme options panel and live customizer support. The homepage layout is fully widgetized and you can just drag and drop widgets to set it up. It is also ecommerce ready and can be easily used to add an online store to your site.

14. Candid

Candid is a WordPress theme for story-tellers, designers, and artists. It allows you to combine your artwork with text to create compelling content that looks great and inspires you to create more.

It includes social icons menu, contact page, lightbox galleries, and background color picker. It is designed to work out of the box and includes only the options you’ll need. It even includes a getting started section which will help you go live in minutes.

15. True North

True North is a stylish WordPress theme suitable for graphic designers, illustrators, and photographers. It comes with a built-in portfolio section where you can easily upload your work samples with descriptions and case studies.

Its homepage features a grid layout to display your work at the front and center of your website. It includes custom backgrounds and headers, custom widgets for social media profiles and content discovery features, and a powerful theme options page.

16. Designer

Designer is WordPress theme to quickly showcase your artwork, web design, photography, and more. It is super easy to use and includes minimal theme options which makes it quick to setup.

It includes a powerful portfolio post type with gorgeous templates to display each portfolio item with as much detail as you like. Other features include photo galleries, lightbox carousel, video popups, social media icons, and more.

17. Resume

Resume is a WordPress theme to build personal portfolio or resume website. It features a modern homepage layout allowing you to beautifully showcase your skills, experience, and portfolio on the front.

It includes a beautiful about me section which allows you to add bio, show awards and recognition, and more. It includes custom widgets for social media, filterable portfolio, featured content slider, and powerful theme settings page.

18. Corner

Corner is another great minimalist WordPress theme for designers and creative folks. It features a two column layout with navigation menu and sidebar on the left.

It includes a featured work slider, custom widgets, social media icons, unlimited colors, and ecommerce support. It comes with a powerful theme options panel and support for all popular page builders plugins.

19. Hamilton

Hamilton is a free minimalist WordPress theme for creative types. This elegant portfolio theme allows you to display posts in a beautiful grid layout using your featured images as thumbnails.

The homepage grid can be set up using two or three column layout. It comes in two color schemes light and dark. You can also use custom background colors.

20. Nico

Nico is a WordPress theme for artists and designers. Its homepage comes in a two column layout with sidebar on the left and a grid of your latest work on the right. The latest work grid can be configured to use three, or even four columns.

It includes a filterable portfolio post type to easily showcase your best work. It comes in different color schemes and you can also create your own. All theme options are quite easy to use and setup.

21. Couture

Couture is a free WordPress theme suitable for fashion, photography, and design blogs. It features an elegant and simple layout with your custom logo on the top, navigation menus, followed by your recent posts grid.

It is really simple to use and works out of the box. You will find familiar customization options under live theme customizer.

22. Creatica

As the name suggests Creatica is a WordPress theme for creatives, agencies, and artists. It comes with 14 ready-made demos including templates for agencies, freelancers, resume, and portfolios. You can install these demos with a single click and then use the page builder plugin to customize them.

It comes with powerful theme options panel which helps you set up your website. It includes tons of customization options including social media integration, multiple header styles, custom widgets, unlimited colors and layout choices.

23. Peak

Peak is a modern and stylish WordPress theme for photographers and creatives. Boasting a masonry tiles layout, Peak can automatically populate tiles from your posts with each tile size generated dynamically. You can also generate your own tile sizes if you want.

Peak comes with a built-in portfolio post type, mega menus, slide out widgets, page title banner, custom 404 error page, and full WooCommerce support.

24. Heron

Heron is clean cut WordPress theme designed for photography, design, art, and personal blogs. Its main feature would be its clean layout, beautiful typography, and easier setup.

Heron comes with only the features you will need. All theme options are under live customizer and you can change background color, add social media icons, and access theme options at the same location.

25. North

North is a WordPress theme made specifically for graphic designers, artists, and photographers. It features a simple design with your latest work displayed on the front page in a distraction free layout.

North includes a portfolio section and each portfolio item comes with its own unique template. It does not ship with complicated settings and can be set up with in minutes.

26. Freelo

If you are a graphic designer or illustrator looking for a colorful bold option for your website, then take a look at Freelo. This beautifully designed WordPress theme is made specifically to help artists showcase their work and make it pop out.

It includes multiple portfolios, blog layouts, page templates, custom widgets, and more. It ships with full support for WooCommerce and WPML for multilingual websites.

We hope this article helped you find the best WordPress themes for graphic designers. You may also want to see our ultimate step by step WordPress SEO guide for beginners.

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 26 Best WordPress Themes for Graphic Designers appeared first on WPBeginner.

Culinary: A WordPress Food and Recipe Theme Review

18.10.2017Culinary Food Theme, Culinary Plus, Food and Recipe Theme, Foodie Blog, NutritionWP, WordPress Food Theme, WordPress ThemesLindsay Liedke

Have you ever thought about sharing your favorite recipes with a wide audience of food lovers? How about blogging about ingredient swaps, healthy eating, or how to make a killer Thanksgiving dessert? If you are the type of person looking for the perfect WordPress theme for displaying recipes, blog content, and even cooking products and ... Read more

The post Culinary: A WordPress Food and Recipe Theme Review appeared first on Learn WordPress with WPLift.