Note: This is Day 5 of a 10 Day series on building N-ter, a place where you can manage your job applications online, from idea to launch. You can find the previous posts here:
Day 0 - Let's Build an Online Startup in 10 Days
Day 1 - Creating a Value Proposition for Our Idea
Day 2 - Refining the Business Model and Naming the Baby
Day 3 - Designing the Product Using a Method from the Lean Startup
Day 4 - Establishing Our Website
Today it’s all about establishing the frame of our website. We are going to:
- Select and install a WordPress theme
- Install plugins to extend the functionality of WordPress
- Create and design our first webpages
We are almost half-way into our 10-day series now and the activity is shifting from concepts and thoughts on paper to hands-on activity on the website. That’s why I expect the posts to get a little shorter now and I might not have the time to dig deep on certain topics anymore. Of course I will still try to write everything in a way that is understandable and point you to the right resources where you can dig deeper yourself if you wish. Let’s start with the first things you should care about when starting in WordPress.
Everything in WordPress is built around two key elements: Pages and Posts (makes sense for a blogging platform, doesn’t it?) You have dedicated menu items in the Admin Panel to create and edit both. But before you do that, you should select a theme to style your webpage and install some plugins to get some extra functionality for your site.
Getting Started With Themes
One of the first things you can do when in WordPress is select a theme for your webpage. Themes are responsible for the overall style of your page (fonts, colors, etc.) and usually have page templates to work with. There is a huge number of free themes out there – you can find them under the “Appearance” menu item of your WordPress installation. The issue with free themes is that they usually come with a limited number of customization options and then try to upsell you on their premium version, in which everything is unlocked. The only alternative in that case is to actually dive into the WordPress code and adjust the theme and its templates yourself. If you’re not much of a designer or coder yourself and have a few spare dollars in your budget, I would recommend to purchase a paid theme. I’ve had very good experience with themes that you can buy on themeforest.net. They usually come with support and access to premium WordPress plugins. If you decide to purchase a theme outside of your WordPress installation, make sure you are buying a theme that is clearly labelled as a WordPress theme. Good options on ThemeForest start at around 30 – 40$. For our page, we’re going with the free theme option. During the WordPress installation, I had the option to pre-select the free theme “Layers”, which is what I’m sticking with for now. We are going to take care of the page design mainly by using free plugins, but might need to go into the code to adjust a template now and then.
Configuring a Child Theme
Before you start building your page or adjust any themes or templates you should always configure a so-called child theme. Why? A theme is essentially nothing else than a folder with a bunch of PHP files (the same stuff WordPress is coded with, remember?) that are in special WordPress directory made for themes. Themes (and plugins) frequently get updated. Now, if we adjust the theme files to make certain things happen, these changes will be overwritten by the next theme update. The way around this is creating a child theme. Doing this is as easy as installing a plugin like “Child Theme Configurator” and following the instructions. Done in two minutes. This process creates a new theme folder called “[theme]-child”, that is separate from the main one. You can play around in the child folder as much as you like and it won’t get overwritten by the next theme update. Why that works is because the child folder is dependent on the parent folder, but has the last say. If WordPress finds the same template (i.e. the same file name) in both, the parent and the child folders, it will always prefer the child file. If it can’t find that file in the child folder, it will take the one from the parent.
Installing Plugins
Plugins are a great way to add lots of various functionality to your website without diving in the code. I’m going to list all plugins that I’m installing and using to build our website. Unfortunately, I can’t get into how to use every single one of these plugins work as that would blow up this post. Most of them are fairly intuitive to use and/or are well documented. Take your time to play around with them and see what they do exactly. These are the plugins I have installed:
PLUGINS FOR SECURING OUR PAGE
Wordfence Security
Wordfence is one of the two most popular security plugins for WordPress. It’s got many security features but mainly acts as a firewall for our site, trying to block malicious traffic.
WPS Hide Login
This plugin lets us change the URL of the login page from the WordPress standard to anything we like. This is good, because the standard WordPress link has the term “wp-admin” in it. Not cool for user experience, not cool for security.
PLUGINS FOR BUILDING AND STYLING OUR PAGE
So far, I have mainly used the page builder by SiteOrigin to create my pages, but today I accidentally discovered Elementor. I’ve never used that plugin before, but it looks really good so I’m going to give it a try now. I’m still installing the SiteOrigin Page Builder as a backup solution. This also gives us additional widgets to work with in Elementor.
Elementor
A page builder that I’ve just discovered recently. Made a great first impression – can’t say more about it yet.
Page Builder by SiteOrigin
The free page builder I worked with so far in WordPress. Gives us the opportunity to use widgets (that’s what website elements are called in WordPress) to configure our site the way we want it.
SiteOrigin Widgets Bundle
Adds a number of widgets we can use in page builders to create our sites.
Livemesh SiteOrigin Widgets
Widget-mania! Even more widgets for page builders.
SiteOrigin CSS
A nice and easy way to style our page and add custom CSS code, even if you have little knowledge of it. Has a visual editor where you can click on page elements and adjust them directly without coding.
PLUGINS FOR CREATING AND ADJUSTING CONTACT FORMS
Contact Form 7
A plugin that enables us to create contact forms. I’m going to try and build the job application editing form with this plugin. The cool thing about Contact Form 7 is that there are numerous add-ons to this one, making it really powerful.
Contact Form 7 Style
An add-on to Contact Form 7 that let us style contact forms easier.
Conditional Fields for Contact Form 7
This lets us add custom fields based on certain conditions to our contact forms.
Contact Form 7 Dynamic Text Extension
I haven’t used this one before, but according to its description it lets you display custom text in contact form fields. This could be useful for pre-populating existing job application data in an editing form.
OTHER PLUGINS
Mailchimp for WordPress
I’m going to use Mailchimp to manage our mail subscriber list and send them emails when we launch. This plugin makes it easier to add sign-up methods to our newsletter on the website. For this to work you have to create a free account on Mailchimp, get an API key and provide it to this plugin in the settings.
Contact Form 7 Mailchimp Extension
Enables us to use contact forms to add subscribers to our Mailchimp newsletter.
s2Member Framework
With this plugin, we can manage our users on the website and restrict certain pages to only being accessible by users with certain rights. This also integrates with PayPal – so you can let paying customers subscribe and pay you directly.
Child Theme Configurator
This one is to create a child theme for our page as explained above.
Toolset Types
A plugin that lets you create custom post types and taxonomies. Just installed it to test whether it makes sense to design job applications as custom post types.
Yoast SEO
A popular SEO plugin that helps us improve our search engine rankings.
Google Analytics Dashboard for WP
Integrates the analytics data from Google into WordPress admin, so we have an insight into our visitor stats right on the WP dashboard.
Creating Our Web Pages
In Day 3, we came up with the pages we need based on our use case diagram. Based on that, we’re going to the “pages” menu in WordPress and creating the following pages:
- A front page [Home]
- A sign-up page [Sign Up]
- A login page or functionality (using the WordPress login page)
- A user management page (using WordPress functionality)
- An application overview page (the “dashboard”) [My Application Dashboard]
- A detailed application editing page [Edit Application]
On the right-hand side, you can select the template for every page. By default, the front page of WordPress displays your latest blog posts. As we don’t want that in our case, we can go to Settings -> Reading and set the option to “Front page displays a static page”. I’ve created a separate “Blog” page to choose as the posts page. Based on the website mock-ups I showed you in a previous post, I created the following pages today.
I ended up designing the front page with the new plugin Elementor. It was fairly straightforward and easy to use and I personally like the result. As you can see, I also created a quick logo for N-ter. For this I used the free software GIMP. So far, the front page has a call to action, which takes you to the registration page and a login link in the top right-hand corner. I found it quite hard to integrate the standard WordPress header and footer with Elementor, so I reverted to using the templates from “Layers” together with the SiteOrigin Page Builder for all other pages, as I needed the header and footer there.
I designed the sign-up page using the s2 Member Framework plugin, which has dedicated functionality for this. The login page looks exactly the same, only with the login form instead of the sign-up form in the middle. A quick note: The s2 plugin requires a so-called “membership options” page in order to work properly. This is usually the site where you list all free and paid options you have for sign up. As we don’t have paid plans, I didn’t design that page. The only thing I did is add the page and create a special template for it, which does nothing else but redirect the user to the sign-up page above.
The page where users can modify their profile details didn’t turn out super pretty unfortunately, as s2 doesn’t offer the same styling options as it does for the login page. All it does is provide a shortcode for the widget you see in the screenshot, which you can place wherever you like. So I had to use one of the basic templates of my theme “Layers” and just place the widget there.
I didn’t get to create any page elements on the dashboard yet, so at this stage it is completely empty. But as you already saw on the previous screenshot, I created the header, coloured it and added the logo using the “Customize” option in WordPress (under “Appearance”). Also, I created a custom menu with links to other pages and a “log out” link, which you can see displayed in the top right-hand corner. The menu items turned out way too big first and the layers theme has no customization option for menu item size, so I used the Siteorigin CSS plugin to scale them down to font size 12. As we don’t have any content on the application dashboard, I also didn’t get to establish the detailed application editing page yet. Both of these things will be a key activity tomorrow, when we will also start creating first functionality on the website.
Day 5 Summary
If you’re following along, today do this:
- Select, install and activate a theme for your WordPress installation.
- Create a child theme using a plugin like “Child Theme Configurator” and activate the child theme.
- Select, install and activate plugins you might need to build your website. Feel free to get inspiration from the plugin list above. *Get creative and design your first webpages!
That’s it for Day 5! Tomorrow we will create the remaining webpages and start creating first functionality on our website.
Meanwhile, feel free to sign up for the email-newsletter and I’ll let you know when the new posts go online!
Edit: formatting, added links
[link] [comments]
from Entrepreneur http://ift.tt/2uuDAuD
via IFTTT
add adsense to blogger
how much money do bloggers make? can blogs make money? make money off ads how to get money from blogging? best websites to make money blog adsense income earn from blogging website ideas to make money how websites make money?
No hay comentarios.:
Publicar un comentario