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.
The post Release 2.9 – 26. May 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Starter Theme is an add-on for Pinegrow WordPress Theme Builder that lets you quickly build Bootstrap based WordPress themes. Learn more about Starter Theme, if you’re not already familiar with it. This document describes changes in the 1.2 release.
bbPress is forum software with a twist from the creators of WordPress. It will allow you to easily setup discussion forums inside your WordPress powered site.
Note: The bbPress template is basically a duplicate of the default Page template with the name bbpress.
The bbPress plugin will automatically use it to display your forums.
Try the demo on our demo site.
We have added French language localization and It’s up to you to create new ones by using the recommended application Poedit.
You can create any new translation from the fr_FR.PO file available the languages folder.
Here is a quick video tutorial (not created by us) about how to use Poedit.
Breadcrumbs support is now directly available as a component in the Starter Theme thanks to the Mash extension from Grégory VIGUIER.
Yoast SEO plugin is no more needed but If you activate the breadcrumbs feature from the plugin, it will take over the Starter Theme feature.
TGM-Plugin-Activation 2.61 is now included in the Starter Theme V1.2.
TGM Plugin Activation is a PHP library that allows you to easily require or recommend plugins for your WordPress themes (and plugins). It allows your users to install, update and even automatically activate plugins in singular or bulk fashion using native WordPress classes, functions and interfaces.
You can reference bundled plugins, plugins from the WordPress Plugin Repository or even plugins hosted elsewhere on the internet.
Mandatory and recommended plugins can now be activated directly from the theme and you can – of course – customize the values by editing the corresponding section in functions.php
We highly recommend you to read TGMPA documentation before modifying the default values.
What does that mean?
If you want to include specific plugin requirements in a custom theme that you plan to publicly release , you just have to setup the list of plugins, add a few switches and your users will be aware of the requirements as soon as they activate the theme. Isn’t that convenient?
Custom Backgrounds is a core theme feature that provides for customization of the background color and image.
Custom header is a core theme feature that let’s you customize the image in the theme top header section.
Both features are available through the theme customization options.
You can now fully style the WordPress internal editor to match your needs or to match the default theme styles.
Customization is done by modifying or adding styles in custom-editor-style.css that you will find in the CSS folder. (SCSS version available in the sass folder as well)
You will have to edit the content of custom-editor-style.css with Atom as the file is not linked to any of the templates but loaded through a function from functions.php.
Read more: https://developer.wordpress.org/reference/functions/add_editor_style/
We have spent some time in order to pass the Theme Check plugin.
The result is a success and all of Starter Theme’s 30+ templates now pass the Theme Check!
What does that mean?
As long as you keep your development clean and follow our recommendations you are able to submit your themes to the WordPress.org repository without making any changes to PHP code generated by Pinegrow.
Themeforest requirements (Envato Market) are a bit different, so please, if you plan to submit your theme there, read their guidelines very carefully.
videoheader.html master page template provides a simple site header with HTML5 video.
MP4, Ogg and Webm versions of the video must be available as video_background.xxx in the the videos folder of the project. Video poster is a JPG file with the name video_background.jpg.
page-videoheader.html is a custom page template which uses videoheader.html as master page.
Try the demo on our demo site.
The WordPress functionality plugin is the perfect way to add features and sometimes, workarounds for touchy situations.
Here are the new features for v1.2:
Important: If you modified the Functionality plugin from v1.0 or V1.1 with your own code, you can just copy the new sections to V1.2.
Updated versions of the local libraries are included.
The recommended way is to extract the content of the package somewhere on your hard drive and proceed to the install just like for the previous versions (see our documentation here).
Note: You can now load V1.1 and V1.2 simultaneously in Pinegrow WP.
Version 1.2 of the Starter Theme brings new features and deep structural changes so if you already work on projects with the previous versions of the Starter theme (V1.0 or V1.1), please, finish your project with your current version and only start new ones with 1.2.
The post WordPress Starter Theme Release v1.2 (coming soon) appeared first on Pinegrow Web Editor - Documentation and Tutorials.
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.
The post Release 2.91 – 14. June 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
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.
Plus:
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:
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.
Plus:
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 
The post Release 2.92 – 27. July 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Coming soon in Pinegrow 2.93.
You can make different parts of elements editable:
Everything inside the element is fully editable.
Selected attributes (for example link’s href attribute) are editable.
Selected classes can be added and removed from the element.
Background image (set as inline style) can be changed.
Only selected smart component types can be added, deleted and rearranged inside the content of the element.
Make Font Awesome icon and Bootstrap button type editable with one click.
You can also combine all above mentioned editable modes on a single editable area.
Content contributors (users who edit the content) can use Pinegrow in CMS mode with simplified user interface.
The following features are disabled:
All edits can be done through the PROP panel.
Inline editing for larger sections of editable content.
Convenient buttons to add new items to editable collections.
Delete collection items and rearrange them by dragging them in the tree.
Only editable elements are shown in the document tree.
Three ways to do that:
Pinegrow CMS license is suitable for end-users who will edit the website content. Pinegrow activated with a CMS license runs only in the CMS mode. Only editable areas can be edited. This license is not suitable for general website editing. The price of the license is just $20 (one-time payment, volume discount is available).
Buy Pinegrow CMS Client licenses »
Each individual end-user (content contributor) who will use Pinegrow needs a separate Pinegrow license: either Pinegrow CMS license or a normal Pinegrow PRO license run in CMS mode.
Information about editable areas and components is stored in data-pgc-* attributes directly in the HTML code. This is the standard and valid way of extending HTML attributes. It adds just a couple of extra characters to the code and makes pages self-contained with pure HTML.
One benefit of using WordPress or similar server-side CMSs is that they implement form and comment processing. But having to use a big CMS on your otherwise simple website just because of that, is unnecessary. Instead, you can use online services and embed their widgets into your plain HTML website.
For example:
Use your preferred method of publishing the changes to your hosting provider, either with FTP, Git or provider-specific method. At this time, Pinegrow doesn’t host and upload your files directly. You have to setup the publishing outside of Pinegrow.
The good news is that you can host static HTML websites anywhere. You can even get high-quality hosting for free:
Tutorial – How to host your HTML website on GitHub Pages for free
Mr. Pine Cone – Sample Pinegrow CMS-enabled theme with step-by-step tutorial
Check out Editable areas documentation for examples of what can be done with editable areas
Big CMSs like WordPress are great for websites with lots of content that is regularly updated (like blogs), websites with multiple authors editing the content at the same time or with custom server-side functionality.
But for most websites using server-side CMS is not necessary: they have just a couple of pages (or just one), a single person is updating the content and their purpose is displaying information without running business processes on the server.
Using CMSs like WordPress comes with a price: creating such websites is more expensive and takes more time. Server code is vulnerable to hackers and requires continuous updates. Serving CMS generated pages can lead to performance and stability issues on the server…
Still, many websites use CMSs because they let end-users update the content without editing the website’s HTML code.
Pinegrow CMS is the bridge between simplicity of static HTML websites and user-friendliness of CMS authoring interfaces. It lets end-users edit static HTML websites without touching the HTML code.
The post Pinegrow CMS for static HTML websites appeared first on Pinegrow Web Editor - Documentation and Tutorials.
BTW. Our main website Pinegrow.com is a static HTML website hosted on GitHub Pages.
Create a free GitHub account. Skip this step if you already have one.
Download GitHub Desktop application for Mac or Windows. The app will let you work with git through GUI. Skip this step if you already have the app or prefer to use git command line tools.
Open GitHub Desktop app and click on Add repository. Select the folder where your website is located and click on “Create & Add Repository” button.
Type a commit message and press Commit & Sync master:
A dialog will popup. Enter the name of the repository (that will be a part of the website’s URL), select if you want to keep the repository private (the website will still be public) and press “Publish Repository”:
The repository is on GitHub but the website is not yet on GitHub Pages. To do that, create a branch named “gh-pages” (the name tells GitHub to publish this branch as a website) and click “Create Branch”.
Now, make sure that gh-pages branch is selected and publish the branch (send it to GitHub):
The url of your website will be http://<your-github-username>/github.io/<your-repository-name>. You can even use your own domain, so that the url will be http://<your-domain>
Important: the selected branch should always be gh-pages
To publish changes made to the local copy of your website, open GitHub Desktop app, select your repository, type a commit message and click on “Commit and Sync gh-pages“:
The post How to host your HTML website on GitHub Pages for free appeared first on Pinegrow Web Editor - Documentation and Tutorials.
CMS mode is coming soon in Pinegrow 2.93.
Mr. Pine Cone is a simple one-page HTML website.
In this tutorial we’ll make the website editable with Pinegrow in CMS mode, so that end-users can edit it by themselves, even if they know nothing about HTML. All we need to do is define editable areas on elements that end-user will be allowed to change.
This tutorial is also useful for learning about Editable areas and Components.
If you wish you can follow the tutorial with sample projects:
BTW. you can freely use the Mr. Pine Cone theme to build your own personal or commercial websites.
First, let’s take a look at what parts of the website should be editable. Then we’ll go through those elements one by one and define them as editable areas.
Select the H1 heading and in ACT panel add Define editable area action.
Each editable area needs an id (name) and we have to specify which parts of the element should be editable. Here we select Inner content (checked by default) because we want to make everything inside the H1 element editable.
And we do the same for the H2 subtitle:
Easy, right?
The button will be more interesting because we want to make a couple of its properties editable: the icon, the label, button type (color) and the url of the link.
Notice that we wrapped the label (Let’s plant Pines!) into a <span>, so that we can make the span an editable area for the button label. If we would do the whole content of the button editable, the content would also include the icon. Editing the label “<i class=”fa fa-tree”></i> Let’s plant Pines!” would not be very friendly and could lead to end-user accidentally breaking the icon code or removing the space between the icon and the text.
Let’s do the label first. Select the span element and Define editable area:
Then the icon. Select the Font Awesome icon and Define editable area. Notice that we unchecked the Inner content because the icon element has no editable inner content. Rather the class that controls the icon is editable. Instead of listing all 100s of Font Awesome classes in Classes setting we check the Icon setting, an editable area extension implemented by the Font Awesome Pinegrow plugin (the plugin needs to be activated on the page for this to work).
Making button link and color editable is next. Select the button element and Define editable area. Inner content must be off because we defined individual editable areas to handle the button content: icon on the i element and label on the span element. Make the href attribute editable so that the end-user will be able to change the url of the button link. And check Button type, an extension implemented by the Bootstrap plugin.
Let’s quickly switch to Test CMS mode (Components -> Test CMS mode) to try how things will work in the CMS mode:
In CMS mode editable areas become properties in the PROP panel. Select the button and check out the PROP panel:
Nice! But wouldn’t it be even better if we could have all button’s editable properties displayed at the same time? We can do that by defining button as a component. Switch out of the Test CMS mode and add Define component action from the ACT panel to the button and update components (Components -> Quick update):
Back in the CMS mode we now see all button’s editable properties at the same time. Components are useful to group editable areas like this. And more, as we’ll soon see…
Making the main textual content of the page editable is easy. We select the wrapping section and make it into an editable area with editable inner content. The end-user will be able to double-click on the text and edit it inline (can do the same for the button label, headings and all other editable inner content).
Skills are listed in an unstyled inline list:
We’ll define the list as an editable collection of skill item components. Not sure what that means? Take a look.
First we have to define Skill type component. To do that, select the first skill (list item) and add Define component action:
We also need to make the text of the skill item editable, so that different instances of the Skill item component can hold different values. To do that, we’ll add Define editable area action to the selected skill (list item). Do Components -> Update. By that we defined a simple Skill item component that has editable content.
But notice that only the first list item is marked as Skill item. Let’s make the other four list items into instances of the Skill item component. Select them one by one and in LIB panel, right-click on the Skill Item component and do Make selected an instance of Skill Item. This will convert the list item into a Skill Item.
The end result should be:
Why did we had to do that? Because we’ll now select the list and Define editable area that holds collection of Skill Item component instances. That means that the end-user will be able to add, remove and rearrange Skill Items within this list.
In the CMS mode a handy Add Skill Item button will appear on the list. It will insert a new skill item to the list. End-user can also delete the items (except the first one that is the definition of Skill Item) and rearrange them in the tree.
We’ll make Work and Experience sections into editable collections as well. First, we define the Work Item component:
Make the content of the Work Item editable by adding Define editable area with editable Inner content on the item (like we did for the Skill Item above).
Do Components -> Update.
And then we define the list as an editable collection of Work Items:
We do the same for the Experience section:
Social buttons will also be fun. We’ll define a Social button component with editable icon and link:
Select the first social button and define a Social button component:
Make the href attribute editable (inner content should not be editable because that would destroy the icon inside the button).
Select the icon and make it editable:
Run Components -> Update.
We transform the other two social buttons into Social Button component instances:
Now we can select the social buttons section and define it as an editable collection of Social buttons:
With that we created a editable section where end-user can add / delete / rearrange fully configurable social buttons!
Making the poster image editable is super easy. Select the div.poster that contains the background image and define an editable area with editable background image:
Now, we or the end-user can conveniently change the poster image through the PROP panel:
We defined all visible content of the page as editable areas. We can do the same for the page title in the head element. The inner content is editable because the title text goes inside the title tag: <title>the title</title>.
And we do the same for the page description meta tag. Only here, we make the content attribute editable because the page description is stored there:
In just a couple of minutes we made this website editable by anyone. All they need is an affordable license of Pinegrow CMS Client installed on their computer.
The process is simple: define editable areas on changeable content and define components where collections are required.
The post Getting Mr. Pine Cone ready for Pinegrow CMS – Tutorial appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Some tutorials were recorded with older version of Pinegrow, so the UI shown there might be a bit different from the latest version of Pinegrow. But the way things work is the same.
Pinegrow doesn’t add any code, it doesn’t generate anything. Instead it lets you work with CSS and HTML visually and provides visual tools for working with Bootstrap, Foundation, plain HTML, WordPress and responsive sites in general. Read our post and decide if Pinegrow is for you.
Flatty, a free Bootstrap theme from Black Tie, is a beautiful and elegant theme perfect for a simple landing page. But its grid layout only works properly on large screen sizes. See how we used Pinegrow to fix the layout issues. Plus we made the theme customizable with LESS variables.
Kelvin Pine is a free Pinegrow-ready resume Bootstrap theme based on Kelvin theme created by BlackTie.co. This elegant template is great for putting your resume, portfolio or CV online.
Responsive websites adjust their layout and content so that they work great at any screen size. This is done with CSS rules that use media queries to target different screen sizes. A video tutorial is at the end of the article.
Everybody loves blocks! The idea of having a set of reusable website sections is very appealing. And for a good reason – most websites and web apps share a lot of similar elements: navigation menus, headers, services, portfolios, and so on. So why not package these sections into blocks and use them to quickly build different websites? With Pinegrow, that’s easy & quick!
Follow this tutorial alongside documentation about components.
Learn and experiment with master pages with a comprehensive master pages tutorial. We’ll keep adding more topics and examples.
Our friends at ProteusThemes created an Opening time widget for Bootstrap. We turned it into a reusable Pinegrow component and recorded a step-by-step tutorial along the way.
Using smart components to edit the menu in one place and update changes to all other pages of the website.
This is the first video you should watch to understand the specific “Pinegrow workflow” for WordPress theme building.
In this tutorial we’ll use Pinegrow to convert a one-page portfolio website into a WordPress theme. In the process we’ll cover theme structure, static front pages, custom fields, default & custom loops, using custom PHP code and registering new post types.
Pinegrow is an awesome solution to create beautiful static HTML pages and to create wonderful and dynamic WordPress themes. But before starting any HTML template to WordPress theme conversion, you should ask yourself a few questions and follow some easy rules.
A step by step guide about how to setup a WordPress install on your computer and setup Pinegrow WordPress builder so that you can start creating WordPress themes.
While Pinegrow natively generates fully valid WordPress themes, there are still some items that you should check before zipping your custom theme folder and consider it is done. This is our – not exhaustive – checklist.
A Sidebar is a WordPress theme feature. It’s basically an empty container ready to host one or more widgets that the website administrator can select and configure from the Widgets screen in the WordPress admin. (Appearance > Widgets)
The PG-Hellobar for WordPress is a proof of concept for a fully customizable notification bar that you can add to your WordPress themes created with Pinegrow WP and use to display important notifications to your users.
The PGBootstrapStarter theme is a free WordPress theme fully created with Pinegrow PRO WP and the WordPress Starter Theme.
A free super light WordPress theme for blog writers created with Pinegrow PRO WP.
GitHub is a great place for hosting your HTML websites. It’s free and you can even use your own domain names.
The AnimatorPRO is a third party commercial plugin that you can purchase if you want/need to Create “Code Free” animations and interactions within Pinegrow! Many triggers and Custom animations are available through Pinegrow GUI.
Now you can use Atom and Pinegrow together: code parts that are easier to code in Atom and use Pinegrow’s powerful tools to work with HTML structure, Bootstrap, WordPress, master pages, components and so on.
Pinegrow is not an all-or-nothing web development solution. You can use it for those tasks where it can saves you lots of time and effort while using other tools for tasks more suited to them.
Watch the video and discover how Pinegrow can be a useful tool if you want to learn create the code behind webpages.
The post Useful docs and tutorials to quickly get started with Pinegrow appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Pinegrow PRO is required because we’ll use Smart components.
Let’s say we have an existing website or template with multiple pages. All pages share the same menu and we want to avoid having to edit the menu on all pages whenever the menu changes.
Note, if we would be creating the website from scratch it would be better to use Master pages.
Instead we want to edit the menu in one place and then apply this change to all pages where menu is used.
With Pinegrow and Smart components this is easy!
We will:
Open the main page (usually index.html), select the menu and in ACT panel add Define component action.
Fill in the component id and name.
For detailed instructions read How to define a component?
Our menu looks like “HOME | SERVICES | CONTACT…”, where active page is somehow highlighted. In Bootstrap, this is done by adding the class “active” to the selected menu item.
If we would use the menu component as it is now, the component would be exactly the same on each page of the website. That means that Home menu item would be selected everywhere.
We will use Editable areas to make menu items selectable:
One-by-one, select each menu item, add Define editable area action from ACT panel, fill in the id (for example, menuitem), turn off editable content and list “active” class as editable.
See Editable areas or Master pages tutorial for example.
Do Components -> Update to process the changes.
Now, all we have to do is convert menus on other pages into instances of our menu component:
Read more about converting elements into component instances.
Now, whenever we need to change the menu we just do the change on the main page where the component is defined and use Component -> Update to apply the change to all component instances.
Quick update will update all open pages. Update whole project will update all pages in the project. Remember, that in both cases you need to manually save changed files.
The post How to reuse the same menu component on multiple pages? appeared first on Pinegrow Web Editor - Documentation and Tutorials.
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 lets end-users edit static HTML websites without touching the HTML code. See documentation and tutorials to get started.
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.
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 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.
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.
The post Release 2.93 – Sep 7. 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
PG-Blog is a very light and responsive Free WordPress parent theme dedicated to blog writers who like simplicity and who want to focus on the content.
It is fully designed with Pinegrow WP with simple HTML and CSS. There are no fancy animations, no javascripts and no marketing gimmicks.
You can use the PG-Blog theme for personal and commercial purposes. It’s also a great way to learn about how to create websites with Pinegrow.
Have a look at our Demo site!
Note: This the the very first version of the PG-Blog theme and while we are working hard to provide a clean result, some issues are still possible 
The theme only contains 4 main templates:
The structure is very basic and does not (currently) make use of external templates parts other than the headers and footers.
Also, the theme does not have a Menu and the navigation is exclusively available through the site logo that you can replace from the WordPress theme customizer. Visitors can also use the navigation links available on the index and posts pages.
The demo site make use of 4 main plugins:
Note: If you want to clone the behavior of the demo site, you will have to install these 4 plugins.
IMPORTANT: Our demo site make use of specific webfonts from fonts.com while the package only refer to standard default fonts. Because you can edit the Pinegrow WP project, you are totally free to customize the theme to your likings with fonts from Google or any other webfonts provider.
While you can use the PG-Blog theme as is, you can also download the Pinegrow WP source files from Github and fully edit and transform the theme in Pinegrow!
Note: Basic SASS versions of the stylesheets (CSS) are available in the theme package. You can have a look at my workflow to handle SCSS documents with Pinegrow and external applications HERE.
Stay tuned! In the coming weeks, we will add more details about how to setup and customize the PG-Blog theme.
The post PG-Blog a FREE WordPress theme for blog writers appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Get the Google Maps API key (and learn how to use it).
Edit your page with Pinegrow internal editor (or Atom), find the location of the Google Maps script call, and set the API key like in the following example:
The post How to add your GOOGLE Maps API Key to your Blocks project appeared first on Pinegrow Web Editor - Documentation and Tutorials.
The post Getting Started with Pinegrow WP appeared first on Pinegrow Web Editor - Documentation and Tutorials.
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.
The post Release 2.94 – 27. September 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
Notice: The following requires a good knowledge of Pinegrow Web Editor as well as a medium knowledge of WordPress themes development.
In this post, we are going to discover how to add PHP code to your Pinegrow WP templates and how to create a basic loop for ACF Pro Flexible Content. (available only in the Pro Version of the plugin).
To illustrate the process, let’s have a look at a basic Page Builder project that you can use on your site homepage.
Please download the Demo project on Github so you can easily follow and understand the current document.
With this project, the purpose is to be able to Add/Edit/Remove/Order 3 predefined sections created in Pinegrow and which will be available from the homepage edit menu in WordPress.
These 3 sections are:
Note: You can see the result at the end of the post.
The Conditional Tags will be used in your Template files to change which content is displayed and how that content is displayed depending on specific conditions.
We do not provide a step by step tutorial about how to proceed to create the fields as the demo project comes with an automatic setup (using local JSON file). The data are immediately available from ACF after your first export of the Demo theme.
On the PHP code actions, we use fields/sub fields names from the ACF Flexible content settings. It’s a manual operation as there is currently no automatic process to retrieve these settings from WordPress to Pinegrow.
For the sake of the clarity, we set specific names to different sections of the layout. (using Name In Tree from the PROP panel).
Because we need to add conditionals (IF and ELSE) on some parts of the content, we use wrapper containers:
A Wrapper DIV: We use it to set a IF Conditional so we can check if the ACF plugin is available and activated.
A home-inner DIV: We use it to host the ACF loop. Here again, we set a conditional (IF) which validates that the Flexible Content field homepage_sections contains some rows.
In a standard situation (display of the content of posts or pages) Pinegrow WP can create standard WordPress loops and WP queries almost automagically. In our particular case, because we target Meta content from ACF, we create the loop by hand. (See ACF Basic loop documentation)
This function checks if the flexible content has any rows of data to loop over.
We setup the content of the Loop starting with the first section: jumbotron_section.
We start with a conditional (IF) to target which sub fields to call. In the current situation, we call the jumbotron_section row.
Then, we add the PHP code which will allow us to modify the background-color of the section directly from the the the home-page editor and we set the corresponding options.
We add the PHP code which will allow us to modify the content of the H1 directly from the home-page editor and we set the corresponding options.
We add the PHP code which will allow us to modify the content of the Paragraph directly from the home-page editor and we set the corresponding options.
Then we add the PHP code which will allow us to modify the text of the button directly from the home-page editor and we set the corresponding options.
Replace: Content
Finally, we add the PHP code which will allow us to modify the link of the button and we set the corresponding options.
Replace: Href attribute (with esc_url)
For the second section, we start with a conditional (ELSEIF which is done by associating the ELSE and the IF actions) to target which sub fields to call. In the current situation, we call the three_columns_section row.
Again, we target which sub fields to call. In the current situation, we call the three_columns_section row.
We add the PHP code which will allow us to modify the content of the H2 and we set the corresponding options.
Then, we add the PHP code which will allow us to modify the content of the Paragraph and we set the corresponding options.
Then we add the PHP code which will allow us to modify the text of the button directly from the home-page editor and we set the corresponding options.
Replace: Content
Finally, we add the PHP code which will allow us to modify the link of the button and we set the corresponding options.
Replace: Href attribute (with esc_url)
The process is repeated for the 2 remaining columns.
For this section, the method is the same as for the two other sections.
All the sections are now created, the loop can be closed.
Again this is done by adding code by hand.
In the template, you can notice an element named NO ACF WARNING MESSAGE with a ELSE conditional.
This element (a very basic BS Alert component) will be displayed on the page only if the ACF plugin is not Activated.
You can also notice a second element named NOTHING TO DISPLAY with a ELSE conditional.
This element (a very basic BS Alert component) will be displayed only if there is no content available from the Flexible Content rows.
When you have added, tweaked and ordered your 3 sections (but you can of course add more than one section of the same kind ), you can now have a look at your homepage in all its glory 
This demo project only covers a very small part of what is possible with Pinegrow WP and ACF Pro and we are sure you will find awesome use for this wonderful and (imho) must-have WordPress plugin.
Feel free to share your projects and ideas with us on the Pinegrow Forum and on the Slack Community.
Modular Web Design Meets WordPress with Advanced Custom Fields
The post How to use ACF Pro Flexible Content with Pinegrow WP appeared first on Pinegrow Web Editor - Documentation and Tutorials.
It took me over two years to relaunch my website. I decided to challenge myself by coding everything myself.
Pinegrow’s functionality and a lot of other web resources helped me in that process and hopefully this article will serve as an encouragement to other visual designers wishing to do the same and step into the code.
For as long as I’ve been in the creative business I’ve been interested in the design process of a project and this process is always about making decisions.
There’s often a long haul behind the countless beautiful works out there and I like to understand the story behind them. So I wanted to change my website from an outdated portfolio website to a place where I share this creative process.
On the other side my goal was to give the website literally a personal look. I even had the idea of showing my body in some early scribbles, figuratively letting the visitor see behind the curtain – or at least behind the pullover!
I eventually chose an illustrative and minimalistic language with a touch of self-mockery, which was fine, as I’d decided to only write about my side projects, and none of the actual agency work.
I accordingly designed a rough screen design of the most important elements of the site:
For such cases I use Sketch by Bohemian Coding. It’s a great App for screen design, SVG and exports.
The technical execution of the website was kind of a challenge for me. I’m a stereotypical designer. If code gets too complicated I’m totally lost. So I was thinking of hiring a web developer, as we normally do at the agency. However I was already using Pinegrow in my daily workflow so the thought crossed my mind:
Why not use the WordPress feature of Pinegrow?
I knew it would take me some time. But as I had no deadline, why not extend my skillset?
Firstly I started with the static layout choosing the Foundation framework. I like its unstyled look. Further, I integrated Swiper Slider and Waypoints to trigger both animations and sticky navigation and then embedded Google Fonts.
And so the front end was ready.
As I had no clue where to start with creating a WordPress theme, I began to read all the WordPress tutorials in the Pinegrow Docs. I set up a local server with MAMP, used Bitbucket together with the Sourcetree App for version controlling and started to experiment.
I was impressed how easy it was to use Pinegrow’s basic features and create a theme but the difficult part was to decide which WordPress actions to use.
For the front page I used regular post, with custom post types for the logo slider, dates and images. The customizer served for the About Me and the Footer section. And the Contact Form is a simple widget.
I like blogs where there is some variety in the layout. So I was looking for a way to build flexible layouts. I experimented with custom post templates. I created four different post templates with different positioning of Title and Post Thumbnail Image. But I wasn’t fully satisfied.
The Content of the post should be also flexible. So I started to learn about Advanced Custom Fields and layout modules.
There are a lot of good tutorials out there. The great thing with modules is, you can change them and it will affect the whole WordPress site. That can be a huge time saver.
In conclusion I’m quite happy with the final result. It’s nothing special, nothing fancy but exactly what I wanted. And I can modify the theme every time I want. And I will certainly do that in the future.
The project:
www.herrbuerli.ch
I’m 31 and a UI/UX and Graphic Designer named Manuel, who is married to the lovely Sarah and works for the Basel West, Communication Agency in Switzerland.
I’m involved in a lot of different web projects where I do conceptual work as well as screen design. I’m interested in almost everything that’s connected to design. I love good typography, packaging design, motion design and handcrafted things.
As a designer, I mostly employ a visual approach. Pinegrow helps me to handle code in a natural way.
Although there’s room for improvement, the software gets better with every update, and by the way, I like the fact that a small company from Slovenia (not California) develops great software. The community (slack and forum) behind it is great too.
Herr Bürli, Manuel (October 2016)
The post Experience Feedback: The relaunch of Mr. Bürli appeared first on Pinegrow Web Editor - Documentation and Tutorials.
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:
Bug fixes.
The post Release 2.95 – 27. October 2016 appeared first on Pinegrow Web Editor - Documentation and Tutorials.
The parallax.js script comes from http://pixelcog.github.io/parallax.js/ and because the original version is (unfortunately) incompatible with the most recent versions of jQuery, we have just changed the version of jQuery to jQuery v1.12.4 in order to make it work.
Here is the demo.
Download the project: pg-parallax.zip (Demo)
The post Simple Parallax Scrolling with Pinegrow + parallax.js appeared first on Pinegrow Web Editor - Documentation and Tutorials.
For 3.0 we didn’t set any deadlines. Instead we took as much time as needed to create the best web development tool we could. It took our small team more than one year (and counting) to do that.
And now we’re almost there…
Instead of waiting for the day of the release to pull the curtain off the new Pinegrow, we’ll introduce one new feature or major improvement per week – all the way up to the final release. Doing that will also help us to keep up the development pace and wrap up the work on time.
Pinegrow 3 will have a brand new CSS editor with visual controls for most of CSS properties, including: shadows, transforms, transitions and Flexbox.
Please note that we’re still working on some of the icons shown in this preview.
Watch a short YouTube video to see the new CSS styling in action.
Pinegrow is not only a visual website builder – you can also use it to work with code.
“Edit element code” is a convenient feature that lets you edit the code of individual elements. Instead of dealing with the whole page you focus only on the relevant parts of the code.
In Pinegrow 3 you’re no longer limited to editing the code of a single element.
Just type before or after the edited element to insert new elements, or edit multiple elements by selecting a range of elements on the page. You can even open multiple code editors.
And if you prefer a cleaner syntax, you can switch to Jade mode. Pinegrow will automatically convert HTML code to Jade and back.
Watch a short one minute YouTube video to see the new “Edit element code” in action.
The Repeater is a tiny feature that will become your best friend. Just type a number and Pinegrow will repeat the next operation that many times.
For example, type 5 and then click on Duplicate. Pinegrow will create 5 copies of the element.
Repeater works with all operations that insert elements to the page. Type a number in the middle of a drag and drop move, during quick insert or use it in combination with copy paste.
Watch a short one minute YouTube video to see how repeater works.
Our drag & drop used to be a bit clumsy. Not anymore!
With the help of the new guiding system it’s easy to drop the element right in the place where you want it. And Pinegrow intelligently handles editing multiple elements at the same time. Just show Pinegrow what you want to do on one element and it will try to do the same operation on all other selected elements.
Watch a short two minute YouTube video to see how drag & drop works. This time the video has audio. Our son Benjamin did the narration, hope you don’t mind. We just couldn’t resist having some creative family time. Captions are also provided.
Tree panel is a useful tool that displays the structure of the page. It offers precise control over the element placement and clear view into how the layout of the page is constructed.
Here’s a short two minute YouTube video showing how the new TREE panel works (turn on captions for explanation):
Here’s the recap:
Here’s a short one minute YouTube video showing how the new LIB panel works (turn on captions for explanation):
Here’s the recap:
The major goal of Pinegrow 3.0 is to make editing HTML layout more efficient. Not only compared to older versions of Pinegrow but also compared to coding the HTML by hand. Selecting and editing more than one element at the same time is a great time saver.
Here’s a short one minute YouTube video showing how elements can be selected (turn on captions for explanation):
Here’s the recap:
Viewing and editing multiple views of the same page is one of unique Pinegrow’s features. For example, having one view showing the desktop size and another one showing the mobile size. All edits are done to the underlying page and are synced between all views.
For Pinegrow 3.0 we greatly improved this useful feature. Here’s a short one minute YouTube video showing the new page views (turn on captions for explanation):
See you next week for the next episode of our Countdown to Pinegrow 3.0!
The post Countdown to Pinegrow 3.0 – A New Feature Presented Every Week appeared first on Pinegrow Web Editor - Documentation and Tutorials.
jQuery v1.12.4 is the version which is currently used in WordPress and a lot of plugins rely on that particular version so it is important to stick with it.
Here is how to proceed:
And export your WordPress theme.
Your are now inline with the WordPress guidelines and you shouldn’t face any issues with plugins.
You can also read our post about jQuery and Pinegrow
The post Use the right jQuery version in your WordPress themes projects with Bootstrap V3.3.x appeared first on Pinegrow Web Editor - Documentation and Tutorials.
