Server and files connection error – solved

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).

Next step

Create a WordPress theme using Pinegrow Web Editor locally using XAMPP.

 

Creating WordPress Themes with Pinegrow Web Editor – server and files connection error

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.

9

Choose what framework is going to be used. This project is using Foundation 6. Then choose a template.

10

This is working dashboard.

11

Go to ‘File’ and ‘Save as’.

12

Create a folder on your desktop and save the file called ‘index.html’ in that folder.

13

Once ‘index.html’ is saved, this is what will appear in the folder. It is a basic HTML structure.

14

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.

15

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.

16

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.

17

Content, images and text was added following video tutorial.

32

Once theme was done and exported, icon with the theme should appear in dashboard of WordPress.

33

This is file structure of exported theme –

34

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’.

35

This is what the theme looks like (please keep in mind that this was only a test!)

36

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

Next step is to find out why files are not connected. Could it be wrong file strucure?

 

 

Pinegrow Web Editor

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.

What is Pinegrow Web Editor?

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.

20

Features – 

  • Quick building of layouts with drag and drop option
  • Visual tools for adding, editing, moving, cloning and deleting HTML elements.
  • WordPress theme builder and live preview of website
  • Converting HTML files into WordPress theme
  • Ability to edit HTML/CSS/PHP codes
  • Multi-page editing
  • Making websites responsive
  • Building website with blocks
  • Editing pages from the web
  • Video tutorials, support, documentation
  • and many more

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.

Decision to use it

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.

Installation

Simply download the right version of Pinegrow (depending if you have Windows, Mac or Linux) from the website and run the installation.

31

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.

Dashboard

This is what dashboard of Pinegrow looks like after activation –

9

 

Cookie and WordPress

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 wordpress_[hash] cookie to store your authentication details. Its use is limited to the admin console area, /wp-admin/
  • After login, wordpress sets the wordpress_logged_in_[hash] cookie, which indicates when you’re logged in, and who you are, for most interface use.
  • wp-settings-{time}-[UID] cookies. The number on the end is your individual user ID from the users database table. This is used to customize your view of admin interface, and possibly also the main site interface.

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:

  • comment_author_{HASH}
  • comment_author_email_{HASH}
  • comment_author_url_{HASH}

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

Types of cookies

There are two types of cookies –

  1. session (stored only whilst you browse the site)
  2. persistent (stored even after you have left – e.g. 1 year)

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 –

  • Cookies to remember items in a shopping basket
  • Cookies providing essential security measures
  • Cookies used for quick loading and distribution of content

Some common web services are NOT considered strictly necessary:

  • Google Analytics, or similar software to analyse visitors
  • Cookies that remember user preferences
  • First and third party advertising cookies
  • Facebook like buttons

Source: https://en.support.wordpress.com/cookies

Source: https://en.support.wordpress.com/cookies

 

WordPress Plugins

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.

30

Conclusion

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.

 

Cookie law

“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

What are cookies?

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.

 

Installation of WordPress through cPanel

1.Log in to cPanel and click on WordPress icon

18

2.Installation of WordPress

The overview of WordPress should be visible with options such as install, features, screenshots etc. provided

19

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.

20
212223

 4.Successful installation 

24

4.Confirmation e-mail

25

5.Current Installations

This option should appear straight after installation of WordPress. It provides easier cloning, editing, backing up and deleting installed WordPress website.

26

6.Viewing installed WordPress website

Type the URL provided in the confirmation email to view the website.

27

7.Logging in to WordPress website

Type the URL provided in the confirmation email to log in to the admin.

28

Dashboard

29