In Pinegrow we use partials for editing dialog boxes.

Take a look at Open as partial… dialog box:

Instead of hard coding the layout of the dialog in the code, we have a special HTML file where this and similar dialogs are defined. This makes it super easy to edit them with Pinegrow:

With the help of Save partial action we than export each dialog to its HTML partial file (the file contains just the HTML code of the dialog). For example, we export the Open as partial dialog into open-partial.html file:

Then in the code that creates the dialog we just use a simple function that loads the partial through Ajax call and use the returned HTML to construct the dialog box:

And that’s it!

Of course, you would need to define your own function for loading the partial into your app. It can be a simple Ajax get call.

The post Using partials for Pinegrow UI dialogs appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Create new Foundation sites

To create a new Foundation site simply select Foundation 5 or 6 and then chose one of the starting pages and save it. Pinegrow will create a project with all Foundation CSS and Javascript files linked to the page and ready to be used.

Note, the videos in this document have no sound.

If you want to use SASS create a project with Foundation source files, Yeti Launch or another tool and then open the project in Pinegrow. Read more about SASS below.

Open existing Foundation websites

Open an existing Foundation document (or the whole folder if you want to work with projects) and edit it in Pinegrow. Use Page -> Manage libraries and plugins if Pinegrow doesn’t auto-detect the version of Foundation that is used on the page.

Edit the grid

Place rows and columns on the page and control all their properties including responsive behaviour. Use multiple views to edit the grid at different screen sizes.

Use full range of Foundation components

Place components from the Library to the page and control their Properties. Use the tree to effectively work with the structure of the page.

Foundation properties for all elements

With Pinegrow you can easily set Foundation properties for text, layout, responsivenes, accesability and more. Simply select any element on the page and set its properties.

Topbars

Topbars are complex elements. Pinegrow makes working with them easy.

Offcanvas

Easily create and manage dynamic Foundation components like Offcanvas. Use Test clicks or SHIFT + Click to interact with the component while editing it.

Orbit slider

Pinegrow lets you easily add Orbit sliders and slides. Not only that, you can even control the slider while you’re editing it.

Tooltips

Add tooltips to any element by assigning Tooltip action to it in the ACT panel. Refresh the page to activate the changes and use Test clicks to see the tooltip in action during editing.

Modals

Create, edit and test modals – all at the same time. Use Test click (or SHIFT + Click) to open the modal and then edit its content.

Using SASS with Foundation sites

At the moment Pinegrow doesn’t support editing SASS directly. Instead, edit and compile SASS files as you normally do. Pinegrow will detect that CSS files were changed and reload them automatically. Of course that means that any changes done to CSS files through Pinegrow would be overwritten by SASS generation process.

And a lot more

These are just few examples of what you can do. Pinegrow supports the complete range of Foundation 5 and 6 components like Icon bar, Pagination, Flex video… And that’s just Foundation! With Pinegrow you can do a lot more: edit CSS, work with HTML code, create master pages and smart components… Check out the user manual for details.

The post Working with Foundation in Pinegrow appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Take it for a spin if you’re interested in:

• Foundation 6
• Breakpoints and media queries in units other than px (em, for example)
• Select elements inside collapsed sections
• Loading pages that contain iframes (2.4 had a bug that prevented that)
• And other bug fixes

http://pinegrow.s3.amazonaws.com/PinegrowWinSetup.2.5.BETA.exe

http://pinegrow.s3.amazonaws.com/PinegrowMac.2.5.BETA.dmg

http://pinegrow.s3.amazonaws.com/PinegrowLinux64.2.5.BETA.zip

The post Pinegrow 2.5 Beta appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Download the free Opening time component and use it on your websites or websites you create for your clients.

IMPORTANT: Using components requires that you open your website as a project (File -> Open project), not just opening a single file.

See how we created the component and how it is used. After watching this you’ll be able to create powerful reusable components of your own.

Define the component

Use Define component action to turn an element into a reusable component:

Test and fix its layout

Make the Opening time component responsive & see how easy it is to work with Bootstrap in Pinegrow:

Define editable areas

Make texts editable, so that they are not lost when the component is updated:

Define editable classes

Even classes can be editable:

Add resources

Package CSS and JS files with the library:

Use the component in website projects

Add the component library into a new project and explore how it can be updated (or not) and duplicated into a new component definition:

A peek under the hood

See how component definitions are stored as HTML element attributes:

The post Opening times – Component and Tutorial appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Let’s build a set of blocks right now.

To start we need a source website that we’ll cut into blocks. We can create it from scratch or use one of our existing websites or templates.

Here we’ll use an existing website, a typical one-page website of a digital services agency. To play along, download the sample website or open one of your websites that contains sections you would like to turn into blocks.

If you’ll be using an existing website, it’s a good idea to make a copy of the website and define blocks on the copy. That project will become a blocks library.

Download the Pine template (PineThemeOriginal) used in this tutorial and the finished blocks library (PineBlocks) that you can use to build you own websites.

IMPORTANT: Using components requires that you open your website as a project (File -> Open project), not just opening a single file.

Structure

First, we have to decide how to split the webpage into blocks. The document tree lets us explore the page structure.

For some elements the decision is straightforward:

The whole navbar should become a Navbar block.

The whole section#intro should be an Intro block, because both its children – the div with a background image and the container with content – are integral parts of the intro.

One block = One element. We can’t build a block consisting of two top elements. Of course, the top element can contain as many descendants as we want.

The three colored boxes where the company is boasting about its solutions and creative ideas is just a fluid container, without a section wrapping it. Personally I would wrap it in a section so that we would have a consistent layout structure.

About section, on the other hand, contains a couple of parts that would be more useful as separate blocks: content block with image, call to action, Twitter feed carousel, testimonials, vision & mission, the team and counters of achievements. So there we don’t want to add the whole section as a single block.

Some are straight up containers, while others are containers wrapped in divs. That divs create full-width areas with light grey background. Here we have a choice: do we add divs as blocks or just containers? Both options have their advantages and neither is wrong. But whatever we decide it’s a good idea to be consistent. So, either all blocks should contain the full-width color band div (remember, transparent is also a color) or none should.

Here we’ll use the first approach – each block, except navbar, will come wrapped in a section element. To do that we’ll reorder children of the about us section and make each into an individual section.

What we decide here will not fix the way blocks can be used. We’ll still be able to change layout when we use our blocks to build websites.

Once we set the structure and decide on the approach the rest is easy.

Making blocks

We’ll use Pinegrow’s Smart components to create blocks.

Let’s start with the navbar.

Select the navbar in the tree, switch to ACT (Actions) panel and add Define component action to the selected element. Clicking on the action name will add the action and show its properties. Clicking on the name again will remove the action from the element. Another click will add it back. And so on.

Every component needs an unique id and a name. A good way to organise ids is to use a unique project prefix. In our case, we’ll use “pine.” since Pine is the name of our template.

So, the id will be pine.navbar and the name will be Navbar. The name doesn’t have to be unique. Just use something that makes sense.

By default Smart components are auto-updatable. That means that updating the project with Components -> Update will replace all instances of the component with its latest definition. We can even define editable areas within the component that will be preserved during updates. That’s a very powerful feature that is useful in many situations. But that’s probably something we don’t want for our simple blocks.

We want to be able to define blocks, place them on pages in various projects and customise them according to the needs of each project, without thinking about updates and editable areas.

So let’s uncheck the Update instances property.

We’ll still be able to change this setting later or to update blocks manually.

With that the component is defined and we use Components -> Update to let Pinegrow process it and list it in the LIB panel from where it can be reused.

Component -> Update is needed for changes to component definitions to take effect.

Let’s also take the photo of the component so that we get a nice image of the block shown in the LIB.

Turning the rest of the sections into blocks is easy.

Resources

Usually, it’s not enough to just define HTML elements as blocks. They also require CSS stylesheets, Javascript code, images and other files to display and function correctly. We call these files resources.

To set which CSS stylesheets and Javascript files are required by our blocks open Resources Manager and use Project view to add required files. As a good practice, do not add framework files (like Bootstrap or Foundation) into resources because projects where blocks will be used will most likely already contain the required framework files or could even use customised versions of the files. It’s much better to simply say: “Pine Blocks require Bootstrap.”

For Javascript resource files we’ll choose the option to include them in the footer of the page.

Let’s also add the images folder so that the image placeholders will be there when we use the blocks.

Resources will be included in documents in the order of how they are listed in Resources Manager. Files in the Resources Manager can be reordered at any time.

Script blocks

Just one more thing to do. Notice that our blocks page uses an inline script block to initialise Javascript plugins. Without this code, the Javascript part of our blocks will not function correctly. But we can’t include this code as a resource in Resource manager because it is not a Javascript file.

This part is specific to our example template. But we often find inline script in the wild and it’s good to know how to handle them.

We have two options here:

1. Save the code into a separate Javascript file and include it with Resource manager – or –
2. Add the script as a block and remember to manually add it to the page where we’ll use blocks.

We’ll use the second approach because it is cool that we can convert scripts into blocks.

Here’s the whole process:

With that our Pine blocks library is complete.

Using blocks

We can use blocks in the same project where they are defined or in other projects.

Why would we want to use blocks in the same project where they are defined?

Imagine we have a project, a website about a very specialised topic with many subpages. We could define a set of blocks specific to that topic and reuse them across those pages. In practice it might be better to use auto-updatable components with editable areas for such scenarios. That’s a topic for later.

We can either add blocks to an existing project or start a new one.

We’ll use our freshly baked blocks to create a new website project.

Let’s open a new Pinegrow window and select File -> New page -> Bootstrap -> Index. Save the file into a new folder and choose to open the folder as a project.

Adding blocks library to the project

Use Page -> Manage libraries and plugins -> Load component library to load Pine blocks. Simply select the project folder where blocks are defined.

Pinegrow will load the library.

We have to activate the library for the current page / project to actually use it there.

Pinegrow will ask if we want to add the required resource files to the project. Say yes, of course. At the moment our project has only one HTML page so it doesn’t matter wether we choose to add resources to the current file or to all files in the project. We can also add or update resources later by going to Library & Plugins manager and clicking on Resources next to the library.

Placing blocks on the page

Blocks are now listed in the LIB panel.

From there we can drag them to the page or to the tree, just like any other element from the LIB panel.

By default, only editable areas of Pinegrow components can be edited. But, remember, we unchecked the Auto update property on our block components. That means that we can freely edit any part of our block. We have to be aware though, that updating component instances (blocks placed on the page) will restore the block instance to its original definition and all our edits will be lost.

Changing and updating blocks

At any time we can open the project where blocks are defined (the Pine template in our case) and modify the blocks. To update blocks instances in projects where they are used, open that project, refresh libraries and then update blocks one by one, by selecting a block and using Actions -> Update instance.

In case of auto-updatable components Components -> Update command would do that for us automatically.

Master pages

Even though our Pine blocks are defined on a single HTML page, we can place them on multiple pages within our new project. To do that we simply duplicate or add new pages and add blocks to them as desired.

As soon as we have more than one HTML page in our project it makes sense to start using Master pages. We can create a special page called master.html (or similar) or we can just use the index.html as the master page. Let’s do that.

We have to choose which element on the master page will be the editable content area. For this purpose we might have to add an element like div that will act as the container for the content that will differ from page to page.

In most cases it is best to define the navbar on the non-editable parts of the master page and set editable classes on menu items so that each subpage can highlight a different menu item.

Page title and description fields in the HTML head are also good candidates for editable areas, so that each page can have its own title and description.

Master pages will let us quickly apply edits to all pages in the project.

WordPress & PHP blocks

When defining and reusing blocks (and components in general) we’re not limited to HTML. We can also create block with Pinegrow WordPress actions or blocks that contain PHP code blocks. Bootstrap Blocks for WordPress are a good example of that.

Doing that lets you create reusable building blocks for WordPress themes and PHP applications.

Collaboration and source control

Blocks are defined by simply adding data-pgc-* attributes to the regular HTML code. That means that you can freely use source control like Git or any other web development & team collaboration tool that operates on HTML and CSS files to edit and manage blocks libraries.

Organising libraries with lots of blocks

Our Pine template had just a couple of blocks, so it made sense to keep them all on the same page and displayed in the same section in the LIB panel.

In larger libraries we can define blocks on multiple pages and use Define section actions to organise blocks into different LIB sections.

Guidelines to remember:

1. One element = one block. If you need two or more elements at the top-level of the block, wrap them in a div (or section) and make that a block.
2. Consistency across the whole library is more important than optimising blocks on individual basis.
3. Avoid using HTML ids in CSS selectors. That will make it impossible to place more than one instances of the block on any given page because ids have to be unique. After changing the id of such a block CSS rules won’t target it any more.
4. Use unique and sensible prefixes for all component ids.
5. Use auto-updatable components if you need to update existing block instances after changing the block definition.

The post Build your own Blocks appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Happy birthday Pinegrow! Two years ago, the first version was released.

Foundation 6

Pinegrow now lets you easily create and edit Foundation 6 projects, in addition to Foundation 5, Bootstrap, MaterializeCSS, AngularJS and general HTML. See how you can easily work with the full range of Foundation components.

Components, Libraries and Master pages

Pinegrow PRO has lots of powerful features that can make your web development work easier and quicker. In this series of articles we’ll start with simple things and then go deeper:

Build your own Blocks – Tutorial

Opening Times – Free component & Tutorial

Plus, components have new & improved features:

• Choose if components are auto-updatable or not (check the tutorials for more)
• Nested component definitions are supported now

WordPress theme builder

Pinegrow provides a very efficient way to build professional WordPress themes and we’re continuing to improve the process.

Define multiple master pages with custom headers and footers

With Pinegrow 2.5 you can now have more than one header and footer template in your WordPress theme.

Set Define master page action to the top level of your HTML template and you will be able to customize everything that is on top and below the Site content element.

This action overrides the Use master page setting on the WordPress site action.

If the page is not index.html, page name is used as a slug for the header and footer.

Read more about headers and footers

Apply master pages to all open files

A real time saver! You can now apply the master page settings to all the open files in Pinegrow editor.

It is very convenient if you proceed to some modifications to your master page HEADER and FOOTER and need to spread the modifications to all the other templates of the project.

Watch more about Master Pages in Pinegrow WP

Enclose multiple elements in conditional statements

By using the new action Add to previous if, you now can include any element into the if statement of the previous element.

The action can also be added to a string of subsequent elements to include all of them into a single if block statement.

Read more about conditionals with Pinegrow WP

Create template parts with content of the element

In Define template part action, It is now possible to set a template part on a container (DIV for example) but using only its content.

Here is an example of a full featured comments template which elements are in a DIV but the DIV is not included in the final template export, only its content:

Read more about partial templates in our post about the comments template.

Organize theme files in subfolders

You can now create subdirectories in your theme folder and organize your templates files according to your needs.

The subfolders and their contents will be exported in your WordPress theme just like the other files located at the root of your project.

UI tool for Google fonts

Easily browse and add Google Fonts to your projects – right within Pinegrow. Support for Google Fonts is a part of evolving Asset manager and is currently in Beta.

To manage Google Fonts open Page -> Manage assets. From there you can search and add new fonts, select styles and charsets and get the font family name for use in CSS rules:

UI tweaks

Selecting an element inside a collapsed section will now select that element and open the collapsed section in the tree. Once the element is de-selected the section will close again. Before 2.5, clicking on any element within the collapsed section selected the whole section.

Page tabs have unsaved changes indicator. Finally!

Bug fixes

Among them, the issue with opening pages that contain other HTML documents in iframes and bugs with restoring window position and size.

The post Release 2.5 – 8. Jan 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

To update your installation of Pinegrow, simply download the install package for your OS and install it over your existing installation.

Pinegrow 2.51 has a couple of important bug fixes and improvements:

• Blocks for WordPress: missing PHP files broke exported WordPress theme
• Certain HTML syntax errors prevented Pinegrow from loading the page
• Better error messages in case of missing files
• “Components -> Add/Update resources from libraries” can now be used to update resources on pages in the same project where resources are defined.
• Internal id of the FontAwesome plugin was changed, so the plugin needs to be activated again on pages where you want to use it.

The post Release 2.51 – 14. Jan 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Can you tell us a little bit about yourself ? What are your “specialties” and since when are you in this business ?

My name is Hendra Setiawan I’m a PHP web developer.

Since 2009, I worked at Telkom Indonesia as a Web Apps developer. At the end of 2015, I decided to resign from that company and I started to work at Exclusive Piano Group Australia, a division of the Exclusive Piano Group who are the Australian National Distributors for Steinway & Sons.

My current specialties is WordPress developer.

When and how did you discover Pinegrow?

In late december 2015, I was given the mission to convert the official site of Steinway Pianos Australia to a WordPress site. The timeline was short so I needed to find a way to meet the deadline.

And then my boss suggested me to try Pinegrow. I tried the trial version of and I thought that it could help me a lot to speed up the job.

Finally, after the trial version was expired, I decided to purchase the Individual Licence.

What applications have you used before Pinegrow?

Sublime Text. Honestly, I have never used any GUI editor before.

What is your “typical workflow” with Pinegrow?

I have purchased Pinegrow to help me speed up my working time to convert a non WordPress site into a WordPress site.

So my workflow is :

• Find the URL of the page that I want to replicate to WordPress
• Open Pinegrow -> Open URL
• After I click OK, Pinegrow will load the complete page
• Save the page and I just need to slice it into header, body, footer, etc.
• Everything is on Drag and Drop and it’s very easy.

What features of Pinegrow do you use most often?

I love the Open URL feature and WordPress theme builder. It’s really helps me to save my time.

What features of Pinegrow would you like to see improved?

I think everything is perfect.

What features do you think are lacking in Pinegrow right now and for which you use other applications?

Nothing. I use Pinegrow for my whole job and it works perfectly.

Can you tell us a bit more about the Steinway project that you have created with Pinegrow?

The old version of the site was not a WordPress site. It had a complex back end system and this is one of the reason why my boss wanted to use WordPress for the new version.

Then, I realized that I needed to build a custom WordPress theme for this project. Because of the close deadline, I needed to find the best way to save my time.

Luckily, my boss suggested me to use Pinegrow.

And yes! It’s really saved my time to build the WordPress theme so I was able to focus on the building of the back end system.

Thanks to Pingrow this was not only possible but I plan to use this software for all future projects.

For future versions of Pinegrow, according to you, what should be the priorities?

If there is any possibility to add new feature on the WordPress theme builder, it would be amazing.

Thanks a lot for your time Hendra!

You are a web developer and you also want to tell us about your business and your experience with Pinegrow? Please contact us!

The post Interview : Hendra Setiawan PHP web developer at Exclusive Piano Group Australia appeared first on Pinegrow Web Editor - Documentation and Tutorials.

In our documentation How to Start your WordPress theme development, we evoked the common templates files (single, page, archive, front-page …) and how important it is to master the WordPress template hierarchy and terminology to create a theme which conforms to the WordPress development guidelines.

Not all common template files generate the entire content that will be rendered by the browser. Some template files are pulled in by other template files such as comments.php to handle the comments section, header.php and footer.php, sidebar.php and content-{$slug}.php to put the code displaying the content of specific pages in separate template files.

We call these partials or miscellaneous templates.

Partials templates are a very convenient solution to optimize your theme development and reuse parts of your code in more than one common template.

Starting from Pinegrow 2.6, these partial templates can now be linked with Pinegrow Smart components.

The goal here is to to facilitate the creative process by building a library of partial templates as components that you will be able to easily instantiate in the common templates.

Define a template part

To illustrate the process, let’s study the situation were we create a partial template to display the contents for the single.php common template.

The following documentation does not provide details about how to create the content but focus on how to create the partial template instead. Please have a look at our WordPress tutorials if you need more details about WordPress theme development.

From the tree, select your content element and from the WP tab, in Template Parts section, select Define template part action and set the name of the template in the Slug field.

The location of the template part can be specified, for example template-parts/content-page will export content-page.php partial template in the template-parts subfolder of your theme folder.

Note: Use only content option can be very useful if you want to group your actions in a container which will be excluded from the content of the partial template.

Link template part with Smart Component

Checking the option will invite you to add Define component action from the ACT panel to this element to link the template part to a Smart component.

Doing this will:

• List the component / template part in the LIB panel
• Replace Define template part action with Use template part action on all instances of this component (while component definition keeps Define template part)
• Automatically update template part settings on all instances when you change and update the component definition

Include template part

It is now mandatory to add the Include template part action to your element. It will load the template part into your template.

Define Component

Because our goal is to set our partial template as a smart component, from the ACT tab, you can now Define the component.

You can set any ID but it must be unique across all libraries and plugins that are activated on a page and choose a descriptive Display name.

Important: The Define editable area is added automatically by Pinegrow. Don’t remove it or your custom component will not work anymore.

Finally, UPDATE your new component with CMD+U or by clicking on the UPDATE button, on top of Pinegrow interface.

Use your new component

From the page where the template is defined, the tree view should look like the following screen. Define template part, Include template part and Define comp actions are visible.

You will notice that when you drag the component from your custom library to a common template, the Define template part action is automatically removed and the component instance only keep the Include template part action. This is normal, the same partial template can only defined once.

Your partial template is now available as a smart component in your custom Library (LIB) and you can drag it in any of your common template where it is needed.

The post How to Link Template parts with Smart components appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Pinegrow 2.6 is available for download. Our focus for this release has been making the user interface easier to use, making it more flexible and consistent.

Lots of further UI improvements will happen in the next few months. Instead of releasing one big UI redesign that would be unfamiliar to most users, we’ll implement and release changes in a gradual way.

Let’s take a look at what’s new:

Rearrange UI panels

Select the best position for LIB panel, document outline tree and page views. Tree and pages are also horizontally resizable.

Edit code in a separate window

Open code editor in a separate window. That’s especially handy if you have multiple screens.

Better tree visibility

The tree displays vertical guides for different nesting levels with a highlighted guide for the current level.

Quickly switch between panels

Keyboard shortcuts (CTRL/CMD + 1..6) will switch between LIB, PROP, CSS, ACT, WP and PRJ panels.

Components: Make the selected element an instance of a chosen component

This is a very useful feature, especially if you’re adding components to an existing page. For example, after creating a component definition for a team member, select team members on the page and use “Make the selected element an instance of” to make them into instances of the team member component. Pinegrow will even take care of editable areas for you.

WordPress: Link Template parts with Smart components

WordPress template parts can now be easily linked with Smart components so that they appear in the LIB panel from where they can be easily added to any page in your theme. Learn more »

Better handling of PHP tags in HTML attributes

Pinegrow can now handle HTML attributes that contain PHP code, for example: <img src="<?php echo "images/".$image; ?>" />

—

And as always, we also have a bunch of bug fixes.

The post Release 2.6 – 3. Feb 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

What’s new?

Smart components can now have descriptions that are shown when you hover over the component in the LIB panel. And you can set that component photos are only used for previews and not shown in the LIB panel.

The link between WordPress Template parts and Smart components has been improved so that it can also be used on template parts that are included with get_sidebar, comments_template and similar tags. To make this work the component / template part definition must also include the action that will display the template part, for example “Include template part”, “Get sidebar” or “Comments template”. Read more…

Bootstrap was upgraded to 3.3.6. We’re still waiting for 4.0 to be released.

In Bootstrap Blocks “Soft scroll #links” property was added. It enables soft scroll on # links (#links are no longer auto-scrolled by default). This change only affects new Blocks projects.

Font Awesome plugin now adds Font Awesome CSS resources through Page -> Manage plugins & libraries -> Font Awesome -> (Activate if not yet activated) -> Resources.

And Bug fixes.

The post Release 2.65 – 16. Feb 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

SPECIAL INTRODUCTORY OFFER – Get Starter Theme for only $39 (regular price is $59) with lifetime free updates and 30 days money back guarantee!

What is the WordPress Starter Theme?

WordPress Starter Theme is a foundation for quickly developing your own custom themes. 

The Starter theme is based on Bootstrap, with a complete set of WordPress common templates and support for Jetpack, WooCommerce and Easy Digital Downloads.

Starter Theme is a paid add-on for Pinegrow PRO with WP. Starter Theme requires Pinegrow PRO with WordPress builder, it will not work without it.

Starter Theme is a plugin for Pinegrow: to create your new custom theme, simply go to New page and add the WordPress templates you need from Starter Theme to your project. On top of that, shared template parts, like different types of post loops, are available from the LIB panel from where you can place them on any page.

The layout is basic and the CSS styling is minimal so that you can easily customize it.

Watch the intro video

What are the benefits of using the WordPress Starter Theme?

• Skip the boring parts of theme development: all standard templates and boilerplate code are ready. Starter Theme lets you go straight to building and customising your theme.
• Starter Theme lets you use a visual approach to designing and coding WordPress themes through the power of Pinegrow’s tools for visually editing HTML and CSS.
• The theme uses template parts (a WordPress recommended best practice) linked with Pinegrow smart components. You can drag template parts from the LIB panel to any page where you need them.
• The most common templates from the WordPress template hierarchy are immediately available as well as basic templates for the most popular e-commerce plugins WooCommerce and Easy Digital Downloads.
• There is no CSS bloat. The CSS is intentionally minimalist and is not meant to be awesome. It only provides what is necessary for a basic display of the default layout + the WordPress CSS essentials. With Pinegrow, you can easily customize the default style.css to fit your needs (SCSS version is also available if you want to use SASS with an external editor).
• Starter Theme is fully compliant with WordPress theme guidelines.
• Generous license terms: you can use a single license of Starter Theme to create as many projects as you want and distribute them in any way you please.
• The theme comes with lifetime free updates (but that’s a limited time special intro deal).

What is inside the package?

• Partial templates available through Smart components
• Minimum CSS styling to ease customization
• Blog
• Pages
• Common templates and custom page templates (see list below)
• Breadcrumbs integration (Requires free Yoast WordPress SEO plugin)
• Basic Woocommerce store
• Basic Easy Digital Downloads store
• Jetpack ready
• Fully cutomizable (layout, CSS  with SASS version included, features…)
• Functionality plugin included
• 100% Bootstrap (Currently v3.3.6)
• Font Awesome (Currently 4.5.0)
• Translation ready / I18n
• Fully Animator Pro compatible (“Code Free” custom animations, triggers and interactions through Pinegrow GUI)

WordPress common templates

Read more about WordPress common templates and the WordPress templates hierarchy.

• index.html > index.php
• front-page.html > front-page.php
• home.html > home.php
• category.html > category.php
• author.html > author.php
• page.html > page.php
• attachment.html > attachment.php
• search.html > search.php
• archive.html > archive.php
• 404.html > 404.php
• single.html > single.php
• tag.html > tag.php
• taxonomy.html > taxonomy.php

Custom Page templates

See our documentation about Page Templates.

• page-nosidebar.html > page-nosidebar.php
• page-sidebarleft.html > page-sidebarleft.php
• template-store.html (Easy Digital Download related) > template-store.php

Jetpack templates

Read more about Jetpack Custom Content Types.

• archive-jetpack-portfolio.html > archive-jetpack-portfolio.php
• single-jetpack-portfolio.html > single-jetpack-portfolio.php
• archive-jetpack-testimonial.html > archive-jetpack-testimonial.php
• single-jetpack-testimonial.html > single-jetpack-testimonial.php

WooCommerce templates

Read more about WooCommerce integration.

• woocommerce.html > woocommerce.php

You can read more about WooCommerce customization by visiting ​Five Quick WooCommerce Customization Tips ​from the WooThemes team.

Easy Digital Downloads templates

Read more about Easy Digital Downloads template files.

• taxonomy-download_category.html > taxonomy-download_category.php
• taxonomy-download_tag.html > taxonomy-download_tag.php
• single-download.html > single-download.php
• archive-download.html > archive-download.php

You need to go further with EDD templates? Watch this video!

The current site makes use of ALL the 24 templates mentioned above (+ a few partial templates).

Check out the demo site to see everything that Starter Theme can do.

Requirements

WordPress Starter Theme requires Pinegrow PRO with WordPress builder version 2.71 or newer.

You can also use the trial version of Pinegrow if you don’t own a license yet.

Purchase WordPress Starter Theme – SPECIAL OFFER

Special introductory deal:  $39.00 + Free lifetime updates – Regular price $59

Buy now for $39

Not sure if Starter Theme is right for you? No problem, we have a 30 days money back guarantee!

Note: You will receive a download link right after your purchase. Your country’s VAT will be added if you’re from EU.

If you’re getting Starter Theme for your company, please note that you need a separate license for every user that will be using Starter Theme in Pinegrow.

How to use WordPress Starter Theme?

First, you need to add Starter Theme as a plugin in Pinegrow (instructions are at the bottom of this page). That’s done only once.

Then, to create a new WordPress theme project based on Starter Theme start a New page:

Select WP Starter Theme and choose the first template that you want to create:

If you don’t select index.html as your first template, it will be automatically added to your project as the theme master page. It’s an important template which will allow you to enter the theme settings and customize the header and footer of your whole theme.

Save your first page in a new folder:

A couple of useful tips show up:

As the first step, from the PRJ tab (project view) open index.html

Then, select the top node of the document from the tree view.

And from the WP tab, configure the WordPress theme settings:

You can read our documentation about How to setup Pinegrow for WordPress theme development for more details about how to configure your HTML template.

Add more templates to your theme with Project -> Add new page, as needed: page.html and single.html are two good candidates for a first step!

You can now play with your templates, modify the layout, tweak the CSS and add some new elements from the LIB panel, you have full creativity freedom over your documents.

If you need help about editing within Pinegrow, please, have a look at our documentation about How to build a layout.

WordPress basic Settings

To preview your theme during editing it is recommended to setup a local instance of WordPress on your computer.

You can read our Useful WordPress Resources documentation for more details about how to do that on your system. When your local instance is ready and fully functional, log in to the admin.

From the settings menu

• Permalinks settings: Post name > http://yoursite-url/sample-post/ + Save.
• Media: Uncheck “Organize my uploads into month- and year-based folders” + Save.

Import demo content to your local instance

Every WordPress site needs content! To make development and testing easier you can import the content from our demo site (posts, pages, images …) to your local WordPress instance:

Download and Install the WordPress Importer plugin

Download and import the following file: wpstartertheme.wordpress.2016-02-29.xml

IMPORTANT: The demo content should be imported AFTER WooCommerce plugin setup (see below) to prevent import errors.

Please read the documentation about how to import Theme unit test content and configure your WordPress accordingly. We also recommend you to read the Theme testing process documentation. And finally, if you want to know even more, we have a related documentation on Pinegrow Documentation site!

The WordPress Functionality Plugin

The WordPress functionality plugin is a special bonus plugin included with the WP Starter Theme. It is designed to host theme independent code snippets that extend and customize WordPress including features, optimization and security:

• Remove ‘Editor’ from ‘Appearance’ Menu (security)
• Add the ability to use shortcodes in widgets (feature)
• Prevent WordPress from compressing images (feature)
• Disable any and all mention of emoji’s (optimization)
• Remove items from the <head> section (security)
• Limit the number of post revisions to keep (feature)
• Login Screen: Change login logo (white label, feature)
• Login Screen: Use your own URL for login logo link (feature)
• Login Screen: Set the ‘remember me’ option to be checked (security)
• Login Screen: Don’t inform user which piece of credential was incorrect (security)
• Modify the admin footer text with your own details (white label)
• Add a theme info box into WordPress Dashboard (white label)
• More to come …

Your are encouraged to edit and modify the file wordpress-functionality-plugin.php with your favorite code editor (For example, Atom or Sublime …). All sections are commented, so the process is quite simple.

You can of course add any new settings you need. The functionality plugins can and should contain all of the code that is important for the necessary structure and functionality of your website.

The functionality plugin is available by default (unzipped) in any Starter Theme project folder.

How to install and activate the functionality plugin?

On a local WordPress setup, you can drag and drop the wordpress-functionality-plugin folder directly from your project folder to your WordPress plugins folder then activate it from the Plugins menu.

If you want to install the plugin on a remote WordPress setup, you will have to zip the wordpress-functionality-plugin folder and upload the zipped file through the Upload plugin feature in WordPress,. Again, you will have to activate it. (see previous step)

Other Plugins to activate

Akismet (FREE)
https://wordpress.org/plugins/akismet/
Akismet checks your comments against the Akismet Web service to see if they look like spam or not and lets you review the spam it catches under your blog’s “Comments” admin screen.

Advanced Responsive Video Embedder (FREE)
https://wordpress.org/plugins/advanced-responsive-video-embedder/
The best WordPress plugin for videos? Supports close to everything you can imagine, still keeping it easy & simple.

Login Logout Menu (FREE)
https://wordpress.org/plugins/baw-login-logout-menu/
With this plugin you can now add a real log in/logout item menu with autoswitch when user is logged in or not. Nonce token is present on logout item. 2 titles, one for ‘log in’ and one for ‘logout’ can be set up. Also, you can set the redirecion page you want, just awesome.

Easy Digital Downloads (FREE)
https://wordpress.org/plugins/easy-digital-downloads/
Easy Digital Downloads is a complete e-commerce solution for selling digital and other non-physical products in a light, performant, and easy to use plugin. Rather than attempting to provide every feature under the sun, Easy Digital Downloads makes selling digital simple and complete by providing just the features you need.

Jetpack by WordPress.com (FREE)
https://wordpress.org/plugins/jetpack/
Jetpack simplifies managing WordPress sites by giving you visitor stats, security services, speeding up images, and helping you get more traffic. Jetpack is a free plugin.

It is recommended that you activate the development mode.

Important: While in Development Mode, some features will not be available at all as they require a WordPress.com for all functionality—Related Posts, for example. Other features will have reduced functionality to give developers a good-faith representation of the feature. For example, Tiled Galleries requires the WordPress.com Photon CDN; however, in Development Mode, Jetpack provides a fallback so developers can have a similar experience during development and testing.

Activated settings:

• Contact Form
• Custom Content Types
• Extra Sidebar widgets
• Manage
• Monitor
• Omnisearch
• Protect
• Related Posts
• Sharing
• Site Stats
• Sitemaps
• Subscriptions
• Tiled Galleries
• Widget Visibility

Relevanssi – A Better Search (FREE)
https://wordpress.org/plugins/relevanssi/
Relevanssi replaces the standard WordPress search with a better search engine, with lots of features and configurable options. You’ll get better results, better presentation of results – your users will thank you.

WooCommerce (FREE)
https://wordpress.org/plugins/woocommerce/
WooCommerce is a free eCommerce plugin that allows you to sell anything, beautifully. Built to integrate seamlessly with WordPress, WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Import WooCommerce Dummy Data:
https://docs.woothemes.com/document/importing-woocommerce-dummy-data/

WooCommerce Menu Cart (FREE)
https://wordpress.org/plugins/woocommerce-menu-bar-cart/
This plugin installs a shopping cart button in the navigation bar.

Yoast SEO (FREE)
https://wordpress.org/plugins/wordpress-seo/
This plugin is written from the ground up by Joost de Valk and his team at Yoast to improve your site’s SEO on all needed aspects.

Advanced > Enable Breadcrumbs

Recommended and useful plugins

WP Rocket (PREMIUM)
http://www.wp-rocket.me/
WP Rocket is a caching and performance optimization plugin to improve the loading speed of WordPress websites.

Unsplash WP (FREE)
https://wordpress.org/plugins/unsplash-stock-photo-library/
Unsplash WP is the fastest way to upload high quality stock photos from unsplash.com directly to your media library — all without ever leaving WordPress!

Reveal Template (FREE)
https://wordpress.org/plugins/reveal-template/
This plugin displays the exact template being utilized to render the currently displayed page in WordPress.

Quick Featured Images (FREE)
https://wordpress.org/plugins/quick-featured-images/
The plugin ‘Quick Featured Images’ helps you bulk managing featured images, setting automatic default featured images to save your time.

Bootstrap Shortcodes for WordPress (FREE)
https://wordpress.org/plugins/bootstrap-3-shortcodes/
Implements Bootstrap 3 styles and components in WordPress through shortcodes. This plugin creates a simple, out of the way button just above the WordPress editor which pops up the plugin’s documentation and shortcode examples for reference and handy “Insert Example” links to send the example shortcodes straight to the editor. There are no additional buttons to clutter up your screen, just great, easy to use shortcodes!

Scroll Back To Top (FREE)
https://wordpress.org/plugins/scroll-back-to-top/
Scroll Back to Top is a WordPress plugin to add a button that appears only when users scroll down the page allowing them to scroll to the top of the page. The plugin comes pre-configured and is fully functional on activation.

Create a Screenshot for your WordPress theme

The screenshot must be named screenshot.png, and should be placed at the root level of your project directory. The screenshot should accurately show the theme design and saved in PNG format. The recommended image size is 1200×900.

The screenshot will only be shown as 387×290, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

You can watch our video about How to create a screenshot for your WordPress theme.

Package your WordPress theme

When your theme is done, you can create a package so that you will be able to install it on any remote WordPress setup.

The process is simple:

From your local wordpress setup, in wp-content/themes locate your theme directory, ensure that the style.css, screenshot.png and the main template files are in in the theme’s root folder and then just zip the theme’s folder.

Your theme is now ready for the primetime!

If you plan to publish your masterpiece on the WordPress repository or sell it on a marketplace, it can be a good idea to read the Theme Review Requirements and Documentation.

Install the Starter Theme

• Unzip the Starter Theme package somewhere on your hard drive.
• In Pinegrow, File > Manage libraries & Plugins > Load Plugin > Select <location of the extracted archive>/pinegrowplugin/pg.plugin.starter.theme.js -> and click Add.

This operation needs to be done only once.

After that, the Starter Theme is available in File -> New page.

Technical support

A dedicated support channel (#starter-theme) is available on the Pinegrow community  on Slack.

Terms of use

There are no distribution restrictions for themes created with the help of the WordPress Starter theme: build sites for clients, sell themes in marketplaces or give them away for free. Reselling or sharing the WordPress Starter theme itself is not allowed.

Get WordPress Starter Theme – SPECIAL OFFER

Special introductory deal:  $39.00 + Lifetime updates – Regular price $59

Buy now for $39

Not sure if Starter Theme is right for you? No problem, we have a 30 days money back guarantee!

Note: You will receive a download link right after your purchase. Your country’s VAT will be added if you’re from EU.

If you’re getting Starter Theme for your company, please note that you need a separate license for every user that will be using Starter Theme in Pinegrow.

The post Pinegrow WordPress Starter Theme appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Editable areas in PROP panel

Editable elements, attributes and classes of smart components can now be edited directly in the PROP panel. This happens automatically. All you have to do is define component’s editable areas.

Learn how to use components

Documentation about Components is finally complete. All features are explained through practical examples, sample projects and tutorials. Just scroll through the page to see how Pinegrow PRO can super-charge your workflow.

Collapse tree level

Whole tree level can now be collapsed or uncollapsed with a single click. ALT + Click on the collapse icon to collapse or uncollapse all elements on that level.

Foundation and Materialize

Foundation was updated to 6.2.0 and we have an updated Materialize plugin with more starting templates, new components like carousel and paralax, bug fixes and better organisation in the LIB panel.

The post Release 2.7 – 3. Mar 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Unlike in Bootstrap, collapsable top menu behaviour doesn’t come out of the box with Foundation 6.

Still it is easy to do by adding responsive title bar element above the top bar menu.

Download sample project.

Here’s the sample code:

<div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="menu">
<div class="top-bar-left">
<ul class="dropdown vertical medium-horizontal menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</div>

The post How to make top menu collapsable with Foundation 6 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Pinegrow 2.71 is just a quick bug fix release solving issues with loading and unloading Pinegrow plugins.

This release is also required for our latest PG PRO WP add-on WordPress Starter Theme.

See what was added in 2.7 (editable areas in PROP panel and more).

The post Release 2.71 – 8. March 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Important update Notice

Version 1.1 brings new features and if you already work on projects with the previous version of the Starter theme (V1.0), the only way to import the new components in your project is to create a new Starter Theme project with v1.1 and copy / paste the relevant bits to your old project.

If you start a new project from scratch, you will be able to use the new features immediately.

How to install the new version?

The recommended way is to overwrite the previous version of the Starter Theme and restart Pinegrow.

New Slider component

We introduce the highly anticipated Slider component.

The slider component uses Bootstrap carousel and it can be deeply customized from the lib.html page of any Starter Theme project. It displays the featured images AND excerpts from the last 10 posts of the Home Slider category.

All the slider settings including the default delay between each slide can be changed from the PROP panel in Pinegrow.

In WordPress, Home Slider category must be created and posts added to that category.

Posts must have a featured image and an excerpt.

The loop settings can be modified (category to target, number of posts ….) from the WP panel in Pinegrow.

Important: There are 2 loops with the exact same settings for the Slider component. One for the Carousel indicators (List items), and one for the Carousel slides. So if you make a change, you have to make the edit on both loops.

The Bootstrap Carousel component which powers the Starter Theme slider is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.

Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don’t support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers.

IMPORTANT: While you can use the slider component everywhere in your templates, it is advised to prevent the display of sliders on mobile views under 480px. You can create specific media queries to handle the situation.

Pro Tip: The easiest way to replace the default static header with the Home Slider is to select the Jumbotron element in the header and then, from the LIB panel, right-click on the Home Slider component and click -> Make selected instance of Home Slider.

New Jetpack related templates

We love JetPack because its a versatile and easy to use plugin but also because its from Automattic the maker of WordPress so we feel confidents with the quality!

With JetPack, you can activate Portfolio and Testimonials Custom Content Types and while we already had several related templates in the Starter Theme, the “archive display” of tags and project types were missing. It’s fixed now and you can offer both views to your users.

• taxonomy-jetpack-portfolio-tag.html : This template will allow you to add an archive of the tags from your Portfolio projects.
• taxonomy-jetpack-portfolio-type.html : This template will allow you to add an archive of the project types from your Portfolio.

New Master Page template

sliderheader.html is a master page template that you can use to replace the standard index.html HEADER and FOOTER.

• From any template,  in WordPress site settings define Use master page to sliderheader.html to use it.
• Save your page and then, use WordPress > Apply master page to import the new header/footer into your template.

IMPORTANT: You must add this template to your project before adding the page-slider.html template (which uses it).

New custom page templates

page-slider.html is a custom page template which uses sliderheader.html as its master page.

You can select that template from any page in WordPress under the Page Attributes > Template metabox.

Functionality Plugin

The WordPress functionality plugin is the perfect way to add features and sometimes, workarounds for touchy situations. For the V1.1, we address 2 very useful cases.

Important: If you have already modified the Functionality plugin from v1.0 with your own snippets, you can just copy the new sections from v1.1.

Add Custom Post Types to Tags and Categories in WordPress

Because out of the box, WordPress does not automatically take your newly created custom post types and add them to the archive pages for existing taxonomies ‘categories’ or ‘tags.’ we provide you with a fancy solution.

Remove Jetpack Sharing Buttons from Excerpts

We are pretty sure that you don’t want JetPack social sharing buttons to appear in your sliders (if you have activated the feature). So here is the workaround!

Fixes

We have removed unnecessary elements from the Enqueue scripts and Enqueue styles sections in the default functions.php file.

The post WordPress Starter Theme Release v1.1 – 30. March 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Pinegrow 2.8 has lots of useful improvements that will let you work with web documents faster and smarter:

Copy & paste – Finally!

Pinegrow came far without it. But now proper copy, cut and paste with clipboard manager is here:

Auto-complete in PROP and ACT panels

Pinegrow scans the whole project (or all open pages in case of Pinegrow standard) and offers auto-complete suggestions for attributes…

…component definitions and instances…

…classes and more:

Edit Javascript and other non-HTML files

These files can now be edited directly in Pinegrow. Use “Open in code editor” command in PRJ panel. To re-run the Javascript code after changing it use Page -> Refresh (CTRL/CMD + R).

Search document tree by selector

Use selectors like div.active, [href=”#”] or any other CSS selector to search the page. By default Pinegrow searches by text and selector (for example, searching for “p” will find all elements with the text “p” and all <p> elements). To force the selector search prepend the selector with $ (for example, “$p” will find only <p> elements);

Page properties

Select the top page element in the tree and use PROP panel to edit page title, keywords, description and author fields. Meta field is also available in LIB panel from where you can place it to the <head> element.

Removing ACT and WP actions

ACT and WP actions are now removed from elements by clicking on the x icon. In previous versions actions were removed by clicking on the action name.

And:

• Detect problems with the internal webserver and offer solutions.
• WordPress quick export can be turned off (WordPress -> Quick export on save). The export happens also when HTML and CSS files are modified outside of Pinegrow.
• Bug fixes and probably a couple of new bugs

The post Release 2.8 – 20. April 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

I’m Emmanuel Arnoud and I’m webdesigner. I’m part of the Pinegrow team where I work on WordPress related stuff like the Starter Theme.

The following is a short summary of my current webdesign process when I work on a WordPress theme with Pinegrow .

Note: I use a Macbook Pro 15′ and a basic 19′ external monitor + Spaces. (Windows 10 users can use the same kind of feature with virtual desktops.)

Building the layout

When I have a clear vision about the work I wish to accomplish (templates, layouts, structure, which WordPress features will be used in the project) I start to design with the default Bootstrap components in Pinegrow.

To help me make the right choices, I follow the Bootstrap documentation and I use HTML5 tags as much as possible.

See: http://docs.pinegrow.com/editing/building-the-layout
See : http://docs.pinegrow.com/wordpress-themes/how-to-start-your-wordpress-theme-development-with-pinegrow-wp

The result is one (or more) static document with the default Bootstrap CSS look BUT ready for further customization.

Styling the layout

Pinegrow provides a cool and visual CSS editor with LESS variables support but I like to edit my stylesheets by hand AND I like/want to use SASS which is not (yet) part of the application.

Pinegrow is not an all-or-nothing web development solution. I can use it for those tasks where it can save me lots of time and effort while using other tools for tasks more suited to them.

See: http://docs.pinegrow.com/editing/use-pinegrow-alongside-other-web-development-tools

I use 4 external applications for the job:

1 – Mamp Pro (€39.00) for my local webserver

Because I work on WordPress themes, I use MAMP Pro to setup and manage my local WordPress instances.

See: http://docs.pinegrow.com/wordpress-themes/useful-wordpress-resources#local-development

2 – Atom (Free) for the SASS/CSS editing

I use SASS to write my CSS rules because that very popular CSS preprocessor is packed with many useful features and also because – its my personal experience – I feel that SASS documents are easier to manage than standard CSS files in the long run.

Atom is a really sleek editor with a lot of useful extensions. The application is “GIT ready” so I can have a full view of my project modifications and even use it to commit my changes.

Use case 1: From Pinegrow, if I need a new CSS property, I switch to Atom editor, create the property in my style.scss file (SASS).

Then I save the file which is then automatically compiled with Codekit (see below) and style.css is generated at the right location.

I switch back to Pinegrow, the style.css has been updated (Pinegrow detects changes done in external programs)​ so I can pick and apply this new property to my element..

Use case 2: I want to update an existing CSS property (change a background color or a padding for example) so I switch to Atom editor, I modify the corresponding rule and I save the file which is then automatically compiled with Codekit (see below) and the style.css is automatically updated.

When I switch back to Pinegrow, style.css has been automatically reloaded, the CSS is modified and changes are visible on the element.

For both use cases, because of the Automatic Quick Export on file change from external apps included in Pinegrow since version 2.8, my WordPress theme is updated and thanks to BrowserSync (see below), I can see the modifications in real time!

SASS is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS.

3 – Codekit (€39.00) for the SASS compilation job

Codekit is an application for the Mac. “Basically”, it’s a very sleek frontend to the most popular CSS, JS (and more) preprocessors compilers and it is really easy to setup.

Codekit monitors in real time my changes on the SASS document and automatically compile it to a standard CSS file at the correct location.

Browser specific prefixes (Autoprefixer) are added on CSS properties, minified output, source map are possible and a lot more.

Codekit Alternatives for Windows:

• Koala
• Prepros
• Scout

4 – BrowserSync for the automatic live display of the changes in the browser

BrowserSync is the final link in the chain. It monitors all the changes in my WordPress THEME folder and automagically live reloads the display in as much browsers as I want/need. (desktop (mac, pc, linux), mobiles, tablets …)

Here are some of the major features:

• Browsers are automatically updated as you change HTML, CSS, images and other project files.
• I can test my website against a slower connection. Even when my devices are connected to wifi.
• Scroll, click, refresh and form actions are mirrored between browsers while I test.
• I can records my test URLs so I can push them back out to all devices with a single click.
• and more  ….

PRO TIP: From Pinegrow version 2.8, WordPress Theme Quick Export happens also when HTML and CSS files are modified outside of Pinegrow.
It’s really convenient when I work with external applications and so, thanks to BrowserSync, I can see my HTML and CSS changes in real time on my local WordPress site, with real content, instead of a static page.

Adding WordPress actions

When the layout and the styling is done, I can focus on the WordPress development and from Pinegrow, I add the corresponding actions to my elements.

For that part, a good knowledge of WordPress features is key and the WordPress CODEX is my main documentation.

See: http://docs.pinegrow.com/wordpress-themes/converting-html-website-to-wordpress-theme

Of course, most of the time, I need to go back to styling and layout modifications to handle specific cases, but because the biggest part of the job is already done, the mission is quite straightforward.

If you want more details about my process, feel free to join the Pinegrow Slack community and ask your questions there.

You can also send an email to support@pinegrow.com

If you use external applications in your webdesign workflow with Pinegrow, send us a little not about your experience, we will be glad to publish your feedback!

The post Designer Feedback: Working with Pinegrow and External Applications appeared first on Pinegrow Web Editor - Documentation and Tutorials.

Pinegrow 2.81 brings improved performance and lower memory usage as well as:

• Enable or disable Javascript on edited pages in Settings (Javascript code in edited pages can cause stability and performance issues during editing in Pinegrow).
• Blocks updated to Bootstrap 3.3.6.
• Font Awesome plugin updated to the latest version.

Pinegrow 2.81 is a free update if it falls within one year of your license purchase. Download and install the package for your operating system to update.

Missed Pinegrow 2.8? Check out all the useful improvements.

The post Release 2.81 – 27. April 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.

We recommend using online form builders or WordPress forms plugins instead of built-in PHP email script because of better security and easier configuration.

Its easy and convenient to add a Wufoo form in your HTML pages.

1. Register at Wufoo.
2. Have a look at the documentation
3. Click New Form.
4. Create your first form or use one from the Wufoo Form Gallery.
5. Configure your form (behavior, theme …)
6. Save your form and Select Share.
7. Select Embed with JavaScript or Embed with iFrame depending on your needs.
8. Copy the Code

From Pinegrow:

1. Create a new HTML document or use an existing one.
2. Activate Javascript if you have selected the Embed with JavaScript solution.
3. Show the clipboard manager and configure “On paste” to your liking (you should see the clipboard entry for the form code).
4. From the tree, select the location where you need to put your form (select an element in the tree where you want to put your form before or after).
5. Paste the Wufoo code.
6. Your form is now visible in your page.
7. Save your document.

Note: You can also use Google forms  but here at Pinegrow, we think Wufoo offers a superior set of features.

The post How to add Contact forms, surveys and more with Wufoo appeared first on Pinegrow Web Editor - Documentation and Tutorials.