Research has shown that development of a WordPress theme using Pinegrow Web Editor has to be done locally, it cannot be developed on the server. Unfortunately, the tutorial that was followed did not mentioned that. This is why the first attempt of creating WordPress theme went wrong and the theme had to be activated manually (as explained in previous post).
Create a WordPress theme using Pinegrow Web Editor locally using XAMPP.
One of the features of Pinegrow Web Editor is that it has WordPress theme builder that lets users to visually build and edit WordPress themes. It also lets users to convert static HTML/CSS websites into WordPress themes.
This project is going to create Foundation/WordPress website in Pinegrow using WordPress theme builder.
Pinegrow documentation provides step by step (video) tutorial on how to create such a website, please check the link http://docs.pinegrow.com/wordpress-themes/creating-wordpress-themes-with-pinegrow-web-editor
Let’s start
Open or create the HTML version of the theme in Pinegrow.
Choose what framework is going to be used. This project is using Foundation 6. Then choose a template.
This is working dashboard.
Go to ‘File’ and ‘Save as’.
Create a folder on your desktop and save the file called ‘index.html’ in that folder.
Once ‘index.html’ is saved, this is what will appear in the folder. It is a basic HTML structure.
Then create another folder on desktop for a theme. This is where WordPress will export theme once it’s done.
Go back to working dashboard of Pinegrow and click on ‘index.html’ on the left side bar to make it blue. Then click on ‘Settings’ icon next to search bar. Click on ‘Activate’ next to WordPress to activate WordPress plugin/library to be able to create and work with WordPress features.
Go to ‘WP’ option in right sidebar and all WordPress features are there such as site, posts, authors etc. This is where all settings for WordPress will be made from. Click on ‘index.html’ in left sidebar and then ‘Site’ in right sidebar.
Notice that in left side bar, ‘WordPress site’ showed up next to ‘index.html’. This means that WordPress features were successfully activated. In the right sidebar, tick ‘This is the master page’ option and then add ‘Use masterpage’ (where theme files are stored) and ‘Preview page url’ (URL of website) and also add name of theme.
Content, images and text was added following video tutorial.
Once theme was done and exported, icon with the theme should appear in dashboard of WordPress.
This is file structure of exported theme –
However, my theme did not appear there. Therefore, next step was to add it there manually. Zip the full folder and upload it to the server by clicking on ‘Add New’ in ‘Themes’ in dashboard. After that, the theme appeared in dashboard and activation was done by clicking on ‘Activate’.
This is what the theme looks like (please keep in mind that this was only a test!)
Theme was activated and working therefore some more features was added to it such as footer. However, after adding footer and saving the theme, changes should automatically appear on the website while it was not working in this case. This led to conclusion that something went wrong with connection and files are not connected. Error should have been noticed a while ago when the theme had to be activated manually.
Next step is to find out why files are not connected. Could it be wrong file strucure?
As the time for this project is slowly running out, decision to research already pre-built templates using Foundation and WordPress has been made. Unfortunately, there was nothing found that could be potentially used for this project. However, during the research I came across to Pinegrow Web Editor that provides users with option to build websites with Foundation and WordPress in visual way.
Pinegrow Web Editor is “a desktop app that lets you build responsive websites faster with live multi-page editing, CSS styling and smart components for Bootstrap, Foundation, AngularJS and WordPress.” (Source: http://pinegrow.com/)
It is available for download for Mac, Win and Linux.
There is 30 days free trial but after that purchase of this app is needed. There are different versions of Pinegrow to suit everyone’s needs. Student/teacher version is also available.
After research, the decision to use Pinegrow for this project was made because of its powerful features that will help to build website for the client. This project is going to be built using Foundation and WordPress therefore Pinegrow PRO with WordPress support is needed in order to build client’s website.
Simply download the right version of Pinegrow (depending if you have Windows, Mac or Linux) from the website and run the installation.
After installation, purchase required version of Pinegrow and activate it by adding your email address and password that was sent to you in email. Your Pinegrow is all activated and ready to go.
This is what dashboard of Pinegrow looks like after activation –
Every WordPress website uses cookies to verify users when users log in. There are cookies for logged in users and for commenters.
Cookie collected from users
Every time user logs in, WordPress stores three types of cookies –
The cookies length can be adjusted with the ‘auth_cookie_expiration’ hook.
Cookie collected from commenters
When visitors leave comment on a blog, cookies are stored on their computer. This is only for convenience reason, so that visitors do not have to re-type all their information again when they leave another comment. Three cookies are set for commenters:
The commenter cookies are set to expire a little under one year from the time they’re set.
However, collected cookies are hashed which means that they do not contain actual information about users instead of that they contain mathematical formula that is hard to ‘unhash’ and see original data. Therefore information collected by WordPress cookies are safe.
Source: Copied from http://codex.wordpress.org/WordPress_Cookies
There are two types of cookies –
Cookies that are set by your own website are called first party cookies and those set by other websites that run their content on your website are called third party cookies.
There are strictly necessary cookies that are necessary for website running its basic functions. These include those required to allow registered users to authenticate and perform account related functions, as well as to save the contents of virtual ‘carts’ on sites that have an e-commerce functionality. Also more –
Some common web services are NOT considered strictly necessary:
Source: https://en.support.wordpress.com/cookies
Source: https://en.support.wordpress.com/cookies
There are also plugins that help to use cookies on WordPress websites. One of the best one to use is Cookie Law Info plugin which is the leading WordPress cookie law plugin.
After the research on cookie law and WordPress cookies, the decision to use cookies for this project was made. This is because WordPress uses cookies anyway and it is necessary to inform users that the information are collected.
“The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet.”
“It was designed to protect online privacy, by making consumers aware of how information about them is collected and used online, and give them a choice to allow it or not. It started as an EU Directive that was adopted by all EU countries in May 2011. The Directive gave individuals rights to refuse the use of cookies that reduce their online privacy. Each country then updated its own laws to comply. In the UK this meant an update to the Privacy and Electronic Communications Regulations.”
“All websites owned in the EU or targeted towards EU citizens, are now expected to comply with the law.”
This means that websites that are not using cookie law risk “enforcement action from regulators” (The Information Commissioners’ Office (ICO) in the UK) and in some cases can be penalized with fine.
Source: https://www.cookielaw.org/the-cookie-law/, February 2016
Cookies can be argued to be a short term memory of the web. They are stored in a browser and collect data about pages that users visit. They are used to help to create better user experience and also to make it more personal. However, some cookies collect data to create ‘behavioral profile’ of users which helps to decide which content/advert is right for certain users.
1.Log in to cPanel and click on WordPress icon
2.Installation of WordPress
The overview of WordPress should be visible with options such as install, features, screenshots etc. provided
3.Click on ‘Install’ button
This is full installation process of WordPress. Choose where WordPress should be install in the directory, set password and username, choose name of tables in database, choose template and click install. That is it.
4.Successful installation
4.Confirmation e-mail
5.Current Installations
This option should appear straight after installation of WordPress. It provides easier cloning, editing, backing up and deleting installed WordPress website.
6.Viewing installed WordPress website
Type the URL provided in the confirmation email to view the website.
7.Logging in to WordPress website
Type the URL provided in the confirmation email to log in to the admin.
Dashboard
There are two options for download –
CSS version is going to be used for this project.
1.Downloading and extracting the file
Click on ‘Download CSS’ button and downloading should start automatically.
Zip version is downloaded to your computer, simple extract the file.
2.The file structure
This phase is crucial as the website is designed and designs are transformed into live on-line product.
Mood board is important part of discovery phase as it provides the client with information of the mood that the designer is trying to create on the website.
This mood board has been created with template downloaded from – http://neshawoolery.com/blog/free-moodboard-templates
Style board is also an important part of discovery phase as it provides the client with information of the style that the designer is trying to create on the website.
This style board has been created with template downloaded from – http://neshawoolery.com/blog/free-moodboard-templates
