Pinegrow 2.951 fixes bug with Pinegrow occasionally freezing when entering the Edit code mode.
Status bar with path to the selected element that lets you easily select any of the element’s parents. After the parent is selected the path to originally selected element stays displayed for quick navigation. Use right-click to open context menu on elements and -/+ icon to hide/show the status bar:
ASP, ASPX and ERB template editing in addition to PHP. Pinegrow now supports editing HTML templates with <?php, <?, <?= and various forms of <% server-side code tags. Learn more.
Improved backup: Pinegrow keeps 20 (changable in settings) revisions of any saved file and deletes older backups to prevent old backup files piling up. Also for projects, a single _pgbackup folder is located at the root of the project, not in every subfolder as before:
You can also delete project backups from the PRJ project menu:
Edit files without extension. To enable that list “NOEXT” among editable file types in Support -> Settings:
Classes shown in the tree are now updated when properties in PROP panel change:
Use Name in tree property in Info section of the PROP panel to name elements in the tree:
Manage Google Fonts (old asset manager) was added to Page menu. It lets you easily add and remove Google fonts from the page:
Code editor is now focused when opened.
FIXED: Selecting code in the code editor in the external window no longer deletes the selected code. That was a very annoying bug, we’re happy it is gone now 🙂
SVG elements can be edited with Element edit code without freezing Pinegrow.
Note: just like the previous release 2.92, this release also deserves more than just a 0.0x version bump, but we ran out of decent numbers before the 3.0 release.
Pinegrow CMS for static HTML websites
Pinegrow CMS lets end-users edit static HTML websites without touching the HTML code. See documentation and tutorials to get started.
Add and Remove links
To add a link to the selected element use Actions -> Add link and Actions -> Remove link. Link url and other properties can then be edited in the PROP panel.
Auto update CSS rules display in Style PROP section
The list of CSS rules that affect the selected element is now updated automatically without having to re-select the element after making a change.
Editable areas extensions
Editable area properties have been simplified and plugins can now add their own editable area extensions. Currently, Font Awesome icon and Bootstrap button size and type are implemented.
Bootstrap and Foundation
- Foundation was updated to 6.2.3.
- Bootstrap was updated to 3.3.7. We’re still waiting for the official 4.0 release.
- Bootstrap and Foundation resources to an existing page with Manage libraries & plugins -> Bootstrap (or Foundation) -> Resources.
Free WordPress and HTML templates
We also released two useful themes:
PG-Blog – A pure HTML+CSS (no frameworks) WordPress Theme with PGWP source files.
Mr. Pine Cone – A simple personal HTML website.
You can use them for personal and commercial purposes. They’re also a great way to learn about how to create websites with Pinegrow.
First of all, this release deserves more than just a 0.0x version bump, but we ran out of decent numbers before the upcoming major 3.0 update.
Pinegrow 2.92 has lots of small improvements that add up to a significant advance in productivity and user friendliness.
Double clicking on an image will open image selection dialog.
When selecting an image located outside of the project folder, Pinegrow asks if you want to copy the file to the project.
Classes are shown in the tree. The first class is displayed, all can be seen by hovering the mouse over the it.
Background image property was added to Style section of the PROP panel.
ESC key exits the inline edit mode, no more mouse clicking the Done button.
- Setting for ignored subfolders, for example node_modules. This significantly speeds up working with projects.
- Larger click area for assigning classes in the CSS panel.
- Deleting an element will select the next element. Up to now, no element was selected after deletion.
- File -> Quit menu added.
Master pages & components
Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.
Editable areas can have additional options:
- Background image can be editable (inline style background-image property).
- Listing which component types can be edited in the inner content of the editable area. All other elements will be locked. “Add instance” buttons will be shown in the PROP panel when the component or editable area is selected.
Components -> Quick update now runs in the interactive mode that will ask you what to do when updating a component or child page would cause some editable information to be lost. See 5-LostEditableArea in Master pages tutorial for an example.
- When duplicating an element that is also a component definition, Pinegrow will offer the choice to duplicate the definition or to make the cloned element an instance of the component.
- A warning notice before a component definition is deleted.
- Child pages: added Page -> Restore master page optional areas to bring back optional editable areas that were deleted on the child page.
WordPress theme builder
Better handling of large projects that contain multiple pages with the same name. For example, in case you have multiple index.html pages Pinegrow will select the one that is a master page when exporting the theme.
Those of you that like to poke around might notice something called “Content contributor mode”. That’s a feature that lets Pinegrow be used as CMS for static HTML websites. At the moment it is still rough around the edges and lacks documentation. Try to figure it out if you like puzzles and mysteries 🙂
WordPress Starter Theme 1.2 has lots of useful improvements like new LIB components, bbPress support, automatic plugin installation, custom backgrounds & headers, 100% WP theme check pass, new templates and more.
WordPress Theme Builder: Custom theme header can be displayed as default value of The Post Thumbnail action and as a standalone action that can be placed on any image. Note, the code for configuring theme header has to be added to functions.php manually.
Bug fix: Multiple editable attributes of a selected component instance can now be edited in PROP panel.
Now you can use Atom code editor and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, master pages, components and so on.
Read more about using Atom with Pinegrow
Pinegrow 2.9 also contains bug fixes and performance improvements.
Last week we released Pinegrow Web Editor 2.8 with many useful improvements like copy & paste with clipboard, editing JS files directly in Pinegrow and more.
But together with all the good stuff we also got some performance issues: high memory usage that led to laggy speed with continued use.
So we spent the last few days hunting bugs, memory leaks and making Pinegrow faster. We’re happy with the result. Pinegrow 2.81 is faster and uses less memory than ever before.
That is now my default choice for editing files in Pinegrow. Why do I like it?
Special deal on volume licensing for companies
Do you use Pinegrow at your job and think it would be useful for others on your team or in your company?
We’ve now made it easier for companies to buy multiple Pinegrow licenses, either as subscriptions or one-time license purchases with significant discounts. Regular discounts go from 20% for 5+ licenses to 50% for 50 or more licenses.
Get Pinegrow for your team or company »
And to celebrate the launch of the volume licensing plan we’re adding additional 15% discount – for a limited time only. So, from 35% for 5+ licenses to 65% for 50+ licenses.
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:
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);
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.
- 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 🙂
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).
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.
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.
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.
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.
Happy birthday Pinegrow! Two years ago, the first version was released.
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:
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!
Among them, the issue with opening pages that contain other HTML documents in iframes and bugs with restoring window position and size.
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