The Envato WordPress Toolkit plugin lets you view your Zozothemes WordPress themes purchases within the WordPress dashboard and select whether or not to receive updates. In today’s Weekend WordPress Project I’ll show you how to use the Envato WordPress Toolkit plugin.
Envato WordPress Toolkit
Unlike most other free WordPress plugins, the toolkit isn’t available in the WordPress Plugin Repository. You’ll need to go to GitHub to download the plugin.
After downloading, simply upload the ZIP file over the admin panel (Plugins > Add New > Upload Plugin) and activate; or extract the ZIP into your website’s wp-content/plugins folder, and then activate the plugin in the admin panel.
1. API Key
After activating the plugin, head over to the new Envato Toolkit page in the main menu. You will need to generate an API key to link your WordPress site to your Zozothemes account. Login to Zozothemes, go to your dashboard and click on “My Settings.” The API Keys screen allows you to generate a free API key.
You can generate your API key over on the Settings > API Keys page on Zozothemes. If you can’t find the page, change the USERNAME part to your username in the URL: http://zozothemes.com/user/USERNAME/api_keys/ edit and navigate to it.
After downloading, simply upload the ZIP file over the admin panel (Plugins > Add New > Upload Plugin) and activate; or extract the ZIP into your website’s wp-content/plugins folder, and then activate the plugin in the admin panel.
2. Install Envato WordPress Toolkit Plugin
Installing themes with the Envato WordPress Toolkit is in fact easier than the built-in installer for WordPress.org themes. Simply head over to the Themes tab and you’ll see your purchased themes listed. Click on the install automatically link for your desired theme. Your theme will be installed just like with the regular theme installer.
3. Backing Up Themes Before Updates
If your current theme version is out of date and you want to update the theme to the latest version, the Envato WordPress Toolkit will help you with that process as well. But remember: It will replace all your current theme files with the ones from the new version; so if you’ve made changes to a theme file (instead of creating a child theme), you might want to back up your current theme files beforehand. Or you could just let the Envato WordPress Toolkit do it for you automatically.
If it’s checked, just uncheck the following box in the Envato Toolkit page and you’re good to go.
For those of you, who like me have been developing websites for few years, we tend to use similar chunks of CSS code that we copy paste from project to project. Bootstrap is new trend technologies for web creation.
Those of you who are more organized may have developed your own set of base CSS files to use as foundation for your projects. This method works, but let’s face it, this is not the most efficient way to do things.
Creating a CSS framework that is flexible, follows latest standards and is thoroughly tested takes days of work and could become a project in itself. Most of us don’t have time to do this.
To make matters worse, with the rise of mobile devices, making responsive websites and keeping up with the latest technologies is time consuming.
Bootstrap and CSS frameworks
Designers need a solid foundation that gives us almost everything a typical website would require but is flexible enough for customization. Thanks to hundreds of hours spent by some developers and companies, we now have dozens of CSS Frameworks to choose from.
Among all the available CSS frameworks out there, Bootstrap is my favorite and also one of the most widely used. It’s included by default in Joomla 3, and is wildly popular amongst WordPress and Drupal users. In the last 3 years, Bootstrap’s popularity grew over 1,000% and has become by far the most popular CSS framework.
So why should you choose Bootstrap? Watch this video below, and then we’ll give you 6 great reasons to use Bootstrap:
https://www.youtube.com/watch?v=WpzT-pTImyo
Reason #1. Easy to get started
CSS Pre-processing is great and every front end developer should learn it. However not everyone is using it. There are still many designers creating and managing CSS files the same old way. Bootstrap offers LESS files for those of us who know how to use it, but it also provides the plain old CSS file for those don’t want to use CSS pre-processing.
To take advantage of what Bootstrap has to offer, you just have to download the files from GetBootstrap.cometBootstrap.com and after unzipping, include the files in the head of your HTML document.
This example HTML document includes the bootstrap framework with its default styling and every single components and JavaScript plugins.
Reason #2. Great grid system
Bootstrap is built on responsive 12-column grids, layouts and components. Whether you need a fixed grid or a responsive, its only matter of a few changes. Offsetting & Nesting of columns is also possible in both fixed and fluid width layouts.
Another useful set of features are the responsive utility classes using which you can make a certain block of content appear or hide only on devices based on the size of their screen. Very handy when you want to hide some content based on screen size. Adding a class such as .visible-desktop to a element, will make it visible only for desktop users. There are similar classes for tablets and phones.
https://www.youtube.com/watch?v=ceNe37KIjPY&t=1s
Reason #3. Base styling for most HTML elements
A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced with extensible classes.
The HTML elements for which styles are provided are:
- Typography
- Code
- Tables
- Forms
- Buttons
- Images
- Icons
Reason #4. Extensive list of components
Whether you need drop down menus, pagination or alert boxes, Bootstrap has got your covered. Styling of every single element follows a consistent theme and if you know LESS, then customizing it takes just few minutes.
Some of the components pre styled are:
- Dropdowns
- Button Groups
- Navigation Bar
- Breadcrumbs
- Labels & Badges
- Alerts
- Progress Bar
- And many others.
Reason #5. Bundled Javascript plugins
The components such as drop down menu are made interactive with the numerous JavaScript plugins bundled in the bootstrap package.
If you project requires sliders, tabs, accordions, then you no longer have to try and test numerous different plugins across the web. Adding these functionalities is just a matter of adding few lines of code and you are all set. With the customization option you can also choose only certain plugins to keep the file size to a minimum.
Reason #6. Good documentation
Not only does Bootstrap offer styling for almost every element a typical website or web application requires, it also provides a great documentation with examples and demo that only make it more easier for even someone new.
Conclusion
You might be happy with your current custom CSS library, but try using Bootstrap for one project and am sure you would ask yourself how you managed all these years without it.
We recommend:
