As you develop your WordPress website, you need to add additional functionality. How do you add it? You can write custom code that you add to your theme in the functions.php or create a custom site-specific plugin.
Both options allow you to add the code to WordPress. Where you choose to add the code affects how it functions.
Theme or Site-specific plugin?
Is the code you are going to add specific to how the theme or do you want it to work even when you decide to switch themes? If the enhances to your theme, you want to add your code to the functions.php. This code only works when you are using this theme. If this code needs to work no matter what theme you have installed, than you need to create a site-specific plugin.
What type of code do you add to a site-specific plugin?
Custom post types
Custom code snippets
Steps to create the plugin
The steps for creating a site-specific plugin are the same for any plugin.
Create a new folder for your plugin. Use the format of yourwebsitename-plugin.
Create a new file. Use the name of yourwebsitename-plugin.php.
Plugin Name: Site Plugin for yourwebsite.com
Description: Site specific code changes for yourwebsite.com
/* Start Adding Functions Below this Line */
/* Stop Adding Functions Below this Line */
Add your code to your plugin file.
Upload code including the folder to your website.
Activate and test.
With your site-specific plugin, you can add new features or functionality to your website by adding the code to your plugin. By adding the code to your plugin, you keep your code separate from your theme. When you need to add a new code snippet or upgrade your theme or WordPress, you won’t break your website.
Once you have built a few websites with Bootstrap, you may notice that your sites look too much alike. As a web developer, you want your websites to useful as well as attractive. How do you fix this problem? You can customize how your Bootstrap looks. By working with and customizing the design, you can create a Bootstrap website that doesn’t look like it was made with Bootstrap.
What web development techniques can you use?
Create a custom style sheet
Use Custom Fonts
Add Custom Photography
Use Font Awesome
Customize Bootstrap’s Buttons
Create a custom style sheet
You want to create a custom style sheet to keep your design customizations separate from Bootstrap. Nothing more annoying than upgrading and realizing that you lost all of your design work because you added them to the Bootstrap CSS and forgot what you did. If you use Adobe Kuler or COLOURlovers color scheme generators, you can create a Bootstrap theme with the color scheme to start your designs from.
With sites like pixabay.com or Death to the Stock Photo, you don’t have to be a photographer to add unique and interesting photos to your website. With tools like Photoshop, you can crop, add photo effects and more to make a photo unique to your website.
Use Font Awesome
With Font Awesome, you can incorporate these icons into your designs. You can use them on buttons, navigations bars or anything else that you need.
Customize Bootstrap’s Buttons
Bootstrap comes with default buttons for you to use. You can customize the way these buttons appear in your design. Use this Bootstrap Button Generator to create the look that you need.
With web development tools like photos, Font Awesome and CSS, your Bootstrap website doesn’t have to look like a standard Bootstrap website. You can customize it to look the way you want.
Have an idea for project? Do you start by opening your code editor and getting started? I have. Those projects seemed to take longer and failed to become good products. What works is prototyping or sketching the product out. Sketching helps you to slow down and think about the problem. It makes you choose one solution over the other and even seen things that you may not consider if you had jumped into coding first.
Paper is cheap and easy. You just grab a piece of paper, a pen and start drawing. If you don’t like it, you can throw it away and start over.
Easy iterations. A paper prototype also allows you to create multiple iterations as possible without the expensive of writing code.
Documentation. No need to create additional documentation. The prototype becomes your documentation. With paper, you write notes on your design or on the back or add them with Post-It Notes.
Collaboration. You and your team can quickly and easily draw out ideas on paper and share them.
What do you need to get started?
Pens and pencils
When do you use paper prototyping?
Brainstorming new ideas
Creating a mock-up of a new feature or product
Redesigning an older feature that no longer works
Should you use it for every project?
It depends. If your client or project can be easily understood by simple sketches, then you can use them to present your ideas. For some project, you may need to create a more interactive mock-up. Your client may need to see a working product in order to understand how you plan to implement your idea.
Design is a marketing tool. The best marketing tool you can have is a well-designed product.
How do you create a well-designed product? By focusing on solving the right problems and delivering value to your customers. A Lean UX Design process gives you the tools and system for developing a well-designed product.
In A Lean Design Process for Creating Awesome UX, Annie Wang described Lean UX as a repeatable process that is goal-driven and outcome-focused. Your team has a designer, developer and product manager. Most startups are going to have small teams. They focus on the following principles:
Rapid cycles: think, make, check
Generate many options and decide quickly which ones to develop
Focus on solving the right problems
Recognize hypothesis and validate with user feedback
Research with users as the best source of information and inspiration
What does a Lean UX Design process look like?
A typical UX Design Process may incorporate the following:
In Lean UX, Lean doesn’t equal Skinny. Less is more. You want to build a product that is simple and clear with less features and more details. You want to go through cycles of Think, Make and Check. The key is user feedback and to reduce cycle time, not your build time. Not every product needs to follow the same UX Design Process.
As we develop our own UX Design process, we want to focus on thinking, making and checking. User feedback is key to making products that are simple, clear and easy to use.
The success of your website or app depends on creating the best user experience possible. Not all developers have a designer available to help with the design.
You can use the following 7 UX tips to create a better experience for your users:
When you create a new website or app, you need to decide what features to add, leave out and improve. Prioritizing makes it easier to create a website or app with the right amount of features and helps you to focus on getting it built.
Speed things up
Make sure your website or app is fast and responsive. A page or app that takes to long to load will loose users. Make it as fast as possible to ensure an enjoyable user experience.
Design before you code
Sketch your designs with pen and paper or other prototyping tools. Show your designs to users or even team members. Get their feedback before you write any code. It is easier to change a design before you start writing code. Here’s how you do a UX Design Process:
Use Google Analytics or other analytic software to help you learn more about your users and how they use your app or website. The more you know, the better decisions you can make when improving your app or website.
Make your UI simple and easy to use
Easy said than done. How do you make the UI better? Keep it clean and consistent. Use readable fonts. Choose larger font sizes and avoid fancy fonts like script or handwriting fonts. Make your navigation simple. Use standard icons and words that people recognize.
Remove or prevent extraneous features
Be ruthless when considering new features. Ask does this feature solve a need? Will majority of our users want it? If you have older features that no one uses, reconsider whether or not you should keep them.
Show informative error messages
Write error messages that tell the user what happened and what to do next. Good error messages can help make your website or app easier to use. Bad error messages only frustrate and irritate users.
When people can’t figure out how to use a website or app, they leave or delete the app. If you want to prevent people from abandoning your app or website, use these tips to make it better.