Toolbox of the Smart WordPress Developer: GenerateWP

Welcome to the third part of the "Toolbox of the Smart WordPress Developer" series. In this part, we're going to go through GenerateWP, a website dedicated to building WordPress code.

Is Writing WordPress Code Hard?

Yes.

Before you let your blood boil with anger, ask yourself this question: Have you ever made a mistake while you were learning coding in WordPress?

I know I have. 'Twas a cold night in Kocaeli, Turkey (my hometown, right next to İstanbul) when I saw my first White Screen of Death (WSOD). The year was 2006 and I was editing a free WordPress theme for my blog, Beyn. I was also new to PHP, MySQL, HTML and CSS, so you can imagine the horror when I saw that I couldn't open any page—including the admin panel, if I'm not mistaken. After minutes of terror and a few drops of cold sweat on my forehead, I finally thought of deleting the theme from FTP and starting anew with the unedited theme files. I managed to locate the problem in my index.php file—you guessed it: a missing semicolon.

Let me answer the question one more time: Yes, writing WordPress code is hard for WordPress beginners. Actually, all WordPress developers might benefit from GenerateWP, no matter how well they know WordPress.

I'll tell you why.

Enter GenerateWP: A Website to Teach WordPress Code

If GenerateWP had existed back in 2006, I would have learned WordPress way faster.

GenerateWP defines itself as "The easiest and the fastest way to create custom and high quality code for your WordPress project using the latest WordPress coding standards and API's", according to the GenerateWP.com homepage. It's a really fun way to build WordPress code without any hassle.

But it's more than that. By its nature, GenerateWP also teaches people how to code in WordPress. When you select a tool and build your code, you see what your settings actually affect in the code, and that gives you an idea of how the code works. And this isn't only for WordPress beginners—even WordPress veterans can benefit from it. After all, being good at WordPress coding does not mean memorizing every single bit of code in the core of WordPress.

Is GenerateWP Bad for WordPress Beginners?

I like to think that GenerateWP serves the purpose of being a hands-on training exercise for WordPress beginners. Why? Simply because it shows users how the code is built. Experimenting with the tools for a couple of times, one can learn how the code is generated, what the arguments are, how the arguments work, and how the code changes if the tool is used with different values. A smart WordPress beginner would have fun and experiment with the tools, then try to type the code by himself or herself for the first time. The rest would turn the beginner into a veteran, or in cool terms, a WordPress ninja!

But, of course, some people like to take the easy way out and use the tool every day. It's still not bad when those people release their code for the community (because the code will be well-written, thanks to GenerateWP), but they will never understand that after a certain point, using the tool is slower than coding by hand.

The Tools of WordPress

As I'm writing this article, GenerateWP has 20 easy-to-use tools, and a section where you can store your custom code snippets (which we'll get to in a little while). Let's see what the tools are:

1. With the Taxonomy Generator, you can create custom taxonomies.
2. With the Post Type Generator, you can create custom post types.
3. With the Post Status Generator, you can create post statuses.
4. With the Theme Support Generator, you can create custom theme features like language support, content width and featured images.
5. With the Sidebar Generator, you can create custom "dynamic sidebars" to hold widgets.
6. With the Menu Generator, you can register custom navigation menus.
7. With the Shortcodes Generator, you can create WordPress shortcodes.
8. With the Quicktags Generator, you can create custom quicktags.
9. With the Toolbar Generator, you can create Toolbar items.
10. With the WP_Query Generator, you can create WordPress queries.
11. With the WP_User_Query Generator, you can create WordPress user queries.
12. With the WP_Comment_Query Generator, you can create WordPress comment queries.
13. With the wp-config.php File Generator, you can create a custom wp-config.php file.
14. With the Plugin Readme Generator, you can create your next plugin's readme.txt file.
15. With the Cron Job Event Generator, you can schedule custom Cron jobs.
16. With the Register WordPress Scripts tool, you can register WordPress scripts.
17. With the Register WordPress Styles tool, you can register WordPress styles.
18. With the oEmbed Providers tool, you can create custom oEmbed providers.
19. With the Theme Default Headers Generator, you can create custom header images for your theme. (Is there anyone actually using this WordPress feature, by the way?)
20. With the User Contact Methods Generator, you can create new contact methods which can be changed from user profile pages.

All of these tools are really fun to play with, and as I said earlier, even WordPress veterans might—nay, will—benefit from these tools.

But even if you've memorized all the codes in the WordPress core and don't need any of those tools, you might enjoy the latest and newest section of GenerateWP: sharing snippets.

GenerateWP.com as a Custom Snippet Sharing Tool

When GenerateWP.com turned two at the beginning of 2015, its creator Rami Yushuvaev posted a celebration on GenerateWP's blog, and introduced a new tool called "custom snippets". With this tool, you can save your WordPress code snippets and share them with the world. You just have to register first. *sigh*

Under each GenerateWP tool, you see two buttons: "Update Code" and "Save Snippet". By clicking that second button, you can easily save the code you just built with GenerateWP. Better yet, you can also write code from scratch (instead of working with the tools) from the Custom WordPress Snippets homepage. Neat.

Wrapping Up for Today

GenerateWP is a WordPress tool that, for me, closes an important gap in hands-on WordPress training experience. With its tools, I'm sure that many WordPress beginners will speed up their learning processes for important APIs and functions of WordPress.

What's your take on GenerateWP? Tell us what you think by posting in the Comments section below. And if you liked the article, don't forget to share it with your friends!

See you in the next part where we'll be covering WP Quick Install, a tool to quickly install WordPress with lots of customization.

by Barış Ünver via Tuts+ Code

Creating a Custom UIkit Theme with Gulp and Less

Everyone wants to be unique. I guess you won’t be super happy if in your surroundings there are many people looking just like you, right? This holds true for the other people too. Your friends also won’t be happy to see clones of you everywhere. The same is true for our websites.

Nowadays, building a website with a front-end framework is common. The problem though is that many people blame such frameworks for making all websites “look the same”. But the tool isn’t to blame if developers aren’t willing to make the necessary customizations.

For those of you who want the websites you build to stand out from the crowd, I’ll demonstrate how you can use UIkit’s Customizer to create different themes and theme variations (styles). The process is straightforward, but you need a proper workflow to do it with a minimum amount of headache.

Setting Up Customization

Let’s say that you want to create a dark theme for your website with orange as an accent color. Also, you want two more variations of that theme with blue and green accent colors. Let’s see how we can do it. (Note: For the sake of brevity, I’ll use only buttons to demonstrate the process).

We’ll need to start with ensuring the following steps are complete:

• Download or clone the UIkit repository.
• Install Node and Gulp, if you don’t have them already.
• Install UIkit’s development dependencies. You can do this by navigating to the UIkit root directory and running npm install from the terminal.

When all of this is set up correctly, we can start creating our theme.

Creating our Theme

Still in the root directory, create a folder called “custom”. In that folder, create another one called “dark” and inside it create a file called uikit.less. Open the file and add the following:

[code language="sass"]
@import "../../src/less/uikit.less";
@import "button.less";
[/code]

The first line will get all Less files from the core framework and the second line will import the file you’re going to use to modify the default UIkit buttons. Save and close the file and create the aforementioned button.less file in the same directory.

Before making any further customizations, you need to make your theme available locally in the Customizer. To do so, in the UIkit root directory, run the following in the terminal:

[code language="bash"]
gulp indexthemes
[/code]

Now launch your local copy of the UIkit website (the one you installed) and click “Customizer” in the navigation bar. When you open the “Select a theme” drop-down list you should see “Dark” at the end of it. At this point, when you select it, you’ll see that there is no styling. Why not? Let’s see.

One thing not mentioned in UIkit’s documentation and which can cost you a lot of headache, is that your theme needs a file called uikit-customizer.less. Create the file and add the following line:

[code language="sass"]
@import "uikit.less"
[/code]

You must put that file, with the above line, in the theme’s root directory (inside the “dark” folder, in our case). If this file is not present, you can’t use the Customizer properly – the theme’s name will appear in the list, but the styles will be missing.

Note: As a rule of thumb, the uikit-customizer.less file should import all files that your theme uses. In our example, importing uikit.less meets this requirement because it includes both the default UIkit styles and your custom button styles.

After adding the uikit-customizer.less file, you will see that this time all components are properly styled. So, we’re ready to move on.

In the component’s drop-down list, placed at the top left corner of the panel on the right side of the Customizer, switch to “Button”. This way you’ll be able to see all available button styles. Now we can open the button.less file and start adding our modifications:

[code language="sass"]
@button-color: #f90;
@button-hover-color: fade(@button-color, 75%);
@button-active-color: @button-color;

@button-background: #000;
@button-hover-background: lighten(@button-background, 20%);
@button-active-background: @button-hover-background;
[/code]

In the above code we’ve modified the variables for the default button’s text and background colors in their normal, hovered, and active states. For other specific buttons, we need to change those variables too:

[code language="sass"]
@button-primary-color: darken(@button-primary-background, 20%);
@button-success-color: darken(@button-success-background, 20%);
@button-danger-color: darken(@button-danger-background, 20%);

@button-primary-hover-color: fade(@button-primary-color, 75%);
@button-success-hover-color: fade(@button-success-color, 75%);
@button-danger-hover-color: fade(@button-danger-color, 75%);

@button-primary-active-color: lighten(@button-primary-color, 35%);
@button-success-active-color: lighten(@button-success-color, 35%);
@button-danger-active-color: lighten(@button-danger-color, 35%);
[/code]

Using Hooks in UIkit

Modifying UIkit’s variables is the easiest way to change the appearance of the framework’s components when dealing with simple modifications. But for more complex customizations, such as adding new rules and/or changing the existing ones without breaking the core, UIkit provides a special mechanism. It uses hooks to safely append your changes. Let’s see this in action. Put the following code below the variables, inside the button.less file:

[code language="sass"]
.hook-button() {
border-radius: 5px 15px;
box-shadow: 2px 2px;
}
[/code]

Here, the hook for the button component is used to add a border radius and a drop-shadow effect.

For even more specific changes, UIkit provides miscellaneous hooks. Each component has such a hook. This is useful for creating new selectors or modifying the ones that have neither a variable nor a hook available for customization. Let’s demonstrate this by adding the following code:

Continue reading %Creating a Custom UIkit Theme with Gulp and Less%

by Ivaylo Gerchev via SitePoint

Tuts+ for Kids

Toolbox of the Smart WordPress Developer: WP Quick Install

Ever got bored of installing WordPress? I did. I mean, it's short but it's not a "five–minute installation process" as advertised. It could be shorter, I think.

Turns out, there are more people like me—and they're more talented than me. In this part of the "Toolbox of the Smart WordPress Developer" series, we're going to go through WP Quick Install, a tool to build out-of-the-box WordPress installations.

The Story of an Average User Installing WordPress

Let me introduce you to Jane Doe.

Jane is a young, smart, aspiring freelance web designer. While she was studying in college three years ago, she took care of a relative's website for his pet store. He was satisfied with the website, so he recommended Jane to a vet and she also did the vet's website—and she got paid this time! After doing a couple of websites and getting paid handsomely, she decided to continue designing websites after college.

Three years later, she reached 54 customers and 60 websites. She even hired an intern to enter the contents of websites while she was busy charming potential customers in her area. When she lands a client, she installs WordPress and a couple of plugins (like Google XML Sitemaps and All in One SEO Pack), switches to the theme she chose with her customer, and does some tweaks in the wp-config.php file to optimize her workflow and the website's speed.

She kind of hates doing the same thing over and over again at least three times every month. It's especially annoying to upload more than a thousand files before the famous "five–minute installation". It's no big hassle installing WordPress a couple of times each month, sure, but she knows that it could be automated somehow. She's not a very tech–savvy person (she learned HTML and CSS from the free Tuts+ course "30 Days to Learn HTML & CSS" and then purchased a yearly subscription, downloaded and watched a bunch of courses), but she knows that a professional web developer could make this process faster.

And today, she meets WP Quick Install!

Using WP Quick Install to Rev Up Your Workflow

Three years ago, the guys over at the WP Rocket plugin released WP Quick Install, a tool to automate the installation and customization processes of WordPress.

Before moving on with the tutorial and discussing how to make use of the tool, let's watch this short video to understand how it works:

Basic Usage

As you saw from the video (if you watched it), using WP Quick Install is as simple as one two three:

1. Upload the ten files and seven folders (instead of the whole WordPress package which consists of more than a hundred folders and a thousand files) to your host.
2. Fill in the form (slightly longer than the usual WordPress installation form) and click the Install WordPress button.
3. Wait for a minute or so, and then enjoy your new installation of WordPress.

See how easy it is? Let's take a look at the form elements:

• Database credentials: Your database credentials.
• Database table prefix: A custom database table prefix.
• Deleting default content: Deletes the default post, comment and page if checked.
• Language: Sets the WordPress language.
• Installation directory: The directory to install WordPress in.
• Website title: Title of the WordPress website.
• Admin panel credentials: Username, password and email address for the admin user.
• Privacy setting for search engines: Prevents search engines from indexing the website if unchecked.
• Activating the bundled theme: Activates the bundled theme if checked (more on this later).
• Deleting default themes: Deletes the Twenty-Something themes upon installation.
• Installing plugins from WordPress.org: Semicolon-separated list of plugin slugs to install from the WordPress Plugin Repository.
• Installing bundled plugins: Installs the bundled plugins if checked (also more on this one later).
• Activating all plugins: Activates all installed plugins if checked.
• Permalink structure: Changes the default permalink structure.
• Media settings: Almost exactly the same options as in the Settings > Media screen.
• Number of post revisions: Sets the number of post revisions.
• Disabling theme and plugin editor: Self-explanatory.
• Autosave interval: Sets the number of seconds to save posts automatically while writing.
• Debug mode: Enables WP_DEBUG if checked.
• WordPress.com API key: If you use a plugin that needs your WordPress.com API key (like JetPack), this one's going to be handy.

Side note: In the form, there are two options which hint that you can bundle WP Quick Install with any theme and any plugins you want. It's another useful feature of WP Quick Install: By putting ZIP files inside the wp-quick-install/plugins folder and placing a Theme.zip file under wp-quick-install, you can install and activate a desired theme and your plugins (that don't exist in the WordPress plugin repository) upon your installation with WP Quick Install. Neat, huh?

Configuring the INI File

Yet another great feature of WP Quick Install: You can predetermine the form fields with the data.ini file!

It's actually pretty easy to edit the file, and there's already an inline documentation inside the file. Basically, you need to comment out the desired lines and change their values. There might be a slight confusion with the "install plugins from WordPress Plugin Repository" option—you just have to create separate lines starting with plugins[] = and continue with a plugin slug on each line.

Oh, one last thing: With the INI file, you can even publish posts automatically upon installation! At the end of the data.ini file, there's a part that explains how to use this feature. Be sure to check it out.

Wrapping Up for Today

Even after three years, it still might cause some problems (I had a hard time working it on my shared hosting account) but that's not their fault, as you can't possibly please every single server on the planet. And if it's an open-source project (and it is), it's our responsibility to help them grow because any kind of contribution helps WordPress take over the world, as we always discuss in WordPress podcasts. (Luckily, not a single world leader has noticed this.) Joking aside, it really is a great tool, and I believe it needs more coverage in the WordPress community.

What's your take on WP Quick Install? Did you like it? Did you have problems with it? Share your thoughts by posting in the Comments section below. And if you liked the article, don't forget to share it with your friends!

See you in the next part where we'll be talking about the WordPress Plugin Boilerplate!

by Barış Ünver via Tuts+ Code

This Week in Mobile Web Development (#66)

Read this on the Web Mobile Web Weekly July 22, 2015   #66 Holly Schinsky recommends Mobile Frameworks Comparison Chart — A site that lets you compare all major mobile frameworks and choose the one that fits your requirements best within various criteria. Markus Falk Brian Rinaldi recommends Flexing the Rules of Material Design — A look at how to design your app in a way that maintains the brand identity but still successfully leverages material design. Yasmine Molavi Holly Schinsky recommends The Mobile Web Sucks — A controversial opinion piece that’s done the rounds this week. The author complains about stagnation in mobile Web browser development. The Verge This issue is sponsored by Pubnub How to Build a Feature-Packed Android Group Chat App — Tutorial and code samples for building a multi-user group chat app that includes online/offline status, message history and push notifications. Pubnub Holly Schinsky recommends DebugGap — A new desktop tool to help debug your mobile apps built with PhoneGap. DebugGap Holly Schinsky recommends Mobile Development Courses for Web Developers — Some reasons why you should choose the hybrid approach and courses to help you learn how to build both mobile apps and games with web technologies. Josh Morony's Blog Peter Cooper recommends Ad Tech Is Killing The Mobile Web Experience — “Advertising is making the mobile web almost unusable by clogging up our bandwidth – which may end up driving users to Apple News or Facebook apps” Felix Salmon Holly Schinsky recommends Gone Hybrid — A site maintained by Ashteya Biharisingh containing a lot of useful tips and tutorials for building hybrid apps. Gone Hybrid Holly Schinsky recommends Unit Testing Your Ionic Framework — A guide to unit testing your hybrid apps built with Ionic. http://mcgivery.com Holly Schinsky recommends Using Couchbase in Your Ionic Framework Application Part 1 — Part 1 of a tutorial on how to use Couchbase to manage the data in your hybrid apps built with Ionic. Couchbase Blog Holly Schinsky recommends react-fastclick: Fast Touch Events for React — A React library to handle the ~300ms click delay in your mobile hybrid apps built with React. http://ift.tt/1HRitSO Holly Schinsky recommends Introducing the MobileCaddy CLI — MobileCaddy has released v1.0.0 of their CLI to help create offline first, robust and versionable mobile Salesforce apps. MobileCaddy Developers Holly Schinsky recommends Understanding Ionic View LifeCycle — An overview of the Ionic View lifecycle. http://www.gajotres.net Job listing Sr. iOS Developer, Brentwood, TN (onsite, full time) — Would you enjoy building native iOS iPhone and iPad apps that reach hundreds of thousands of people with a positive message every day? We are looking for a talented Sr. iOS Developer who wants to do Work that Matters. Ramsey Solutions Job listing Freelance with Companies like Airbnb, IDEO, & JPMorgan — Work with top clients, set your own rates, and work from anywhere as an elite Toptal mobile developer. Join the most exclusive network of top software engineers in the world. Toptal Curated by Brian Rinaldi and Holly Schinsky for Cooper Press. Cooper Press is located at Office 30, Fairfield Enterprise Centre, Louth, LN11 0LS, UK Update your email address or stop receiving MWW here

by via Mobile Web Weekly

This Week's HTML5 and Browser Technology News (Issue 198)

Read this e-mail on the Web HTML Weekly Issue 198 — July 22, 2015 Researchers Prove HTML5 Can Be Used to Hide Malware Help Net Security A quick summary of Using HTML5 to Prevent Detection of Drive-by-Download Web Malware, an academic paper that shows how some HTML5 and related API features can be used to deceive malware detection systems. Microsoft Edge and Web Components Microsoft Edge Dev Blog Microsoft answers a few questions on what they think about Web Components, will they be supported in Edge, and when. OortOnline.GL: An Online WebGL Benchmark Turbulenz A lot like the graphics benchmarking tools video card reviewers use, except for WebGL and in your browser. Learn AngularJS Online with 1-on-1 Mentorship Thinkful   Sponsored Angular lets you build dynamic, single-page web applications from scratch that are so smooth your users will forget they're still inside a web browser. Sign up online and start learning today! a11ySlackers: A Chatroom for Accessible Web Development Chat Gitter Bills itself as a space for “everyone to discuss accessible web development”. You can also connect via IRC if you prefer. A Look at WebRTC Being Used to Gather Local IPs Philipp Hancke A look at a clever tactic being used to combat ad fraud that uses WebRTC’s ability to gather the local IP address of a user. VexFlow: HTML5 Music Engraving Vexflow Open-source music notation rendering API supporting HTML5 Canvas and SVG. Say Goodbye to Vendor Prefixes in Your CSS Landon Schropp A quick look at how Autoprefixer can rid your development code of annoying vendor prefixes. Remote Control Car Driven over the HTML5 Gamepad API Mate Marschalko A quick look at how a gamepad was wired up to control a remote control car via the HTML5 Gamepad API, Node, and an Arduino device. Examining Microsoft Edge Browser Performance Anandtech Some benchmarks showing how the latest version of the Edge browser performs against others. Good news; the Web is only getting faster. Jobs UX Designer at Booking.com in Amsterdam Booking.com, planet Earths #1 accommodation web-site, is hiring world class designers! If you are interested in making an impact on the user experience of millions of people, come join our team in amazing Amsterdam. Booking.com Want to work on new projects? Make more money? Try a new stack? Relocate?On Hired, we'll bring the options to you. With over 2,000 pre-screened tech companies in 10 cities in the US & UK, you'll be sure to find what you're looking for. Join Hired today. Hired.com In brief The Latest Improvements for The F12 Developer Tools in Windows 10 news  Microsoft Edge Dev Blog W3C Proposed Rec: Authoring Tool Accessibility Guidelines (ATAG) 2.0 news  W3C IntuiLab Releases Touch-First, HTML5-Based Platform for Digital Signage Experiences news  Digital Signage Today Making Music in the Browser - Web Audio API, Part 1 tutorial Via the fine Web Audio Weekly.  Keith McMillen Instruments JavaScript Forensics: `Script Error` tutorial Understanding and diagnosing `Script Error`.  TrackJS SPONSOR Smarter Grids With Sass And Susy tutorial  Smashing Magazine An Introduction to the Physical Web video  Google Developers Creating Better CSS opinion  Jake Bresnehan Shader Editor: For Live Editing WebGL Shaders in Chrome tools  Chrome Web Store Deploy code from GitHub & BitBucket with ease! tools Easily deploy your code from Git, Mercurial or SVN repositories directly onto your FTP or SFTP servers. 50% off for 3 months with code HTMLWKLY  Deploy SPONSOR popper: Realtime Cross-Browser Automation tools  Pedram Emrouznejad EndTime at Home: A Post-Apocalyptic Simulator Game demo  Endtime RumcaJS: Polyphonic Angular Synthesizer demo  Stateless.js: Simple Cross-Browser Context Persistence Library code  Eeo Jun selectivity.js: Modular Select Dropdown Library for jQuery and Zepto code  Arend van Beelen jr. ClickSpark.js: Add Particle Effects to Your JavaScript Events code Looks a bit gimmicky but works well.   YMC AG Curated by Peter Cooper and published by Cooper Press. Send feedback by simply replying to this mail. Want to sponsor an issue? See our media kit. Want to post a job? E-mail us or use our self-serve system. Unsubscribe : Change email address : Read this issue on the Web © Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK Email policy Privacy policy

by via HTML5 Weekly

It's Time to Encrypt Your Email: Using GPGTools for OS X