Foundation Shortcode Buttons In WYSIWYG Editor

[joshrathke]

There are a couple plugins that already do this, but from my experience they are clunky to install and in some cases come with another version of Foundation to guarantee functionality, which can cause some styles to be overridden in the front end.

Would anybody on here want to join forces and do a proof of concept for adding a few basic layout features of Foundation to the WordPress Editor within FoundationPress? I think it would really take this theme to the next level if we provided some basic interface between the end user and Foundation.

[Luciaisacomputer]

Could be very interesting, what do you think the best approach would be?

[colin-marshall]

None of the Foundation Shortcodes plugins look like they support Foundation 6 yet. At the very least some shortcodes for rows and columns would be nice.

[Luciaisacomputer]

Totally, I find myself need buttons in the editor so maybe starting with the essentials like layout and certain much-used UI elements?

[joshrathke]

Wordpress has a great engine for implementing new buttons into the wysiwyg interface, and translating it into shortcodes, which can then spit out HTML on the frontend.

Typically once the user has clicked on a button a modal pops up revealing several options. For example if you wanted to implement a "grid" within the content of a post, which is something I want to do frequently, a modal would pop up asking what you want the breakdown to be. How many columns? What size? What order? Do you want to push/pull any of the columns? The list goes on...

This is where I get a bit queasy about the idea. Lot's of variables...

I would struggle with the interface within the modal, but I could handle most of the registering and rendering of shortcodes.

[colin-marshall]

To keep things simple we could build it without the WYSIWYG interface to begin with, and then add that in later.

[joshrathke]

@colin-marshall, what do you mean? I was thinking we would just implement it into the WP Post Editor.

[colin-marshall]

Sorry, that was definitely confusing the way I worded that. I meant we could start by adding the functionality where you type the shortcodes into the post editor manually, without a button that pops up a modal with a form in it. I thought that's the part you were saying would be the most difficult, so I was suggesting that we could add shortcodes without that to begin with.

[joshrathke]

Grid, Done!

I went ahead and made a proof of concept on My Fork of FoundationPress. You'll find a folder in the library called editor-shortcodes. It contains all of the infrastructure to begin building this out. The file shortcodes-settings.php gathers all of the shortcodes (currently only 'grid'), and allows the developer to comment them in or out depending on what he/she wants their end users to be capable of. Then the shortcodes-settings.php file gets called in the functions.php file.

The example below will create a grid with two columns, the first 4 columns wide, and the second 8 columns wide. Currently the column shortcode will support width attributes sm-width, md-width and lg-width, and insert the classes accordingly. Multiple attributes at the same time are supported for granular responsive control.

[fdn-row]
[fdn-column md-width="4"]Four Columns[/fdn-column]
[fdn-column md-width="8"]Eight Columns[/fdn-column]
[/fdn-row]

I like the idea of keeping this all conained within a folder in the library so that projects that have strayed too far away from the FoundationPress origin to merge updates can still grab the folder, plop it in their library and pull it into their functions file, assuming they are running Foundation 6.

[tomhermans]

tried it in my fork. and works. nice addition.

[colin-marshall]

Nice work @josh-rathke! I'll test it out when I get a chance.

One suggestion would be to change the text you use for the column sizing. Could we just leave off the word "width" to make everything shorter? The post editor can get really messy when using a bunch of shortcodes.

[fdn-row]
[fdn-column md="4"]Four Columns[/fdn-column]
[fdn-column md="8"]Eight Columns[/fdn-column]
[/fdn-row]

Also, I've seen shortcode attributes before that don't use equal to. Not sure how it's done, but if you did it that way you could make it match Foundation's classes like this:

[fdn-row]
[fdn-column small-12 medium-6]Small 12 columns, Medium 6 columns[/fdn-column]
[fdn-column small-12 medium-6]Small 12 columns, Medium 6 columns[/fdn-column]
[/fdn-row]

What do you think?

[joshrathke]

I did think about leaving off "width", but then I realized that the width is the first of many attributes that will need a screen size associated with it. For example what if I wanted a 4 column wide column that was offset by 2? You would need something like: [fdn-column md-width="4" md-off="2"]Four Columns[/fdn-column] In that case abbreviating it down to "md" could cause issues, unless you want to use complete abbreviations for the width attribute only, which could be a possibility, so you would end up with. [fdn-column md="4" md-off="2"]Four Columns[/fdn-column]

I think getting offsets and push/pull would be a pretty solid foundation to have as a starting point for making this really useful to an end user.

In terms of using the format medium-8 rather than md="8", I can't find any documentation on the attributes getting passed through the WP Shortcode API that way. Doesn't mean it won't work, just means I don't know how to get the values, I may tinker around with it. Using attributes without values may just send a boolean response for that particular string, which would mean on the backend we would have to program values for every possible combination.

[joshrathke]

Okay, I went ahead and implemented some more features along with merging some suggestions from above comments, which by the way were great! Thanks to everyone who contributed so far, it hasn't even been 24 hours yet!

I went ahead and made the "width" attribute as simple as sm="4", md="4", and lg="4". Along with adding functionality for offsets, centered columns, and source ordering. Offsets and source ordering are named attributes, so they are declared using an equals sign and the value you want the attribute to carry, for example: md-off="4" will result in an offset of 4 columns on a medium screen. Source ordering is similar; md-pull="4" will result in the column being pulled 4 columns to the left on a medium screen. It's worth noting that source ordering works best in a push/pull configuration, meaning if you move one column, you need to also move a different one out of the way resulting in a push/pull motion.

@colin-marshall This Article will interest you! In order to achieve column centering I implemented what is known as an "unnamed attribute", meaning it doesn't necessarily have a value attached to it. These are stored in the attributes array using an array key which makes them difficult to retrieve unless you process them first and replace the key with something that won't be so dynamic such as a string, at which point you can treat it like a boolean operator. So centering works like this sm-ctr will center the column on a small screen. All that to say, there is now a function in the shortcodes-settings.php file called normalize_attributes() (from that article) that takes unnamed attributes and gives them a identifiable key.

[colin-marshall]

Again, great work @josh-rathke! Thanks for digging up that article on unnamed attributes. I actually found it myself a couple hours ago. I came to the same conclusion you did about how it would require processing to get the unnamed atts working with column widths. It definitely makes more sense to set the attributes to a value for the column widths, while something like sm-ctr is the perfect use case for the unnamed att.

When you said md-pull-4 did you mean md-pull="4"?

[joshrathke]

Yep, totally meant md-pull="4".

[joshrathke]

I guess the functionality is there now. The hard part is going to be figuring how to pack all of this into an easy to use interface. I don't see it being too fancy or anything.

[joshrathke]

Hey Guy's, I have given this some thought and I really think it could be a huge feature to have in FoundationPress. That said, I still would want @olefredrik to weigh in on it, and if it's a "Yes, let's pursue it", doesn't anyone know what the best way to develop a feature like this would be? I am fine with using my Fork until we think it's ready to merged into the primary FoundationPress repo, but even in terms of collaboration what would be the best? Continuing to use this issue as a communication point will get messy eventually.

[colin-marshall]

If @olefredrik thinks this is worth pursuing, it would probably work best if he made a shortcodes branch for us to develop on. I'm not sure if it's possible for me to contribute to your fork since I can't make a fork of your fork.

[joshrathke]

I think a new branch would be the easiest. I don't really anticipate putting a ton of new short codes into the build. I think the addition of a couple more would be good, but nowhere near what some of the plugins offer. I think tables, buttons, responsive media....basic front end stuff would be helpful to offer to someone able to edit pages.

As a developer I get excited about the idea of not having to develop custom page templates every time someone wants something "a little different" on a page. Templates are great, but they are easily broken, that's where I see some basic foundation implementation being the most handy.

Josh Rathke I.T. Director & Web Developer, YWAM Montana | Lakeside p: (406) 844-2221 m: (765) 637-5847 a: 501 Blacktail Rd. Lakeside MT, 59922 s: www.ywammontana.org e: josh.rathke@ywammontana.org

On Sat, Dec 12, 2015 at 4:40 PM, Colin Marshall notifications@github.com wrote:

If @olefredrik https://github.com/olefredrik thinks this is worth pursuing, it would probably work best if he made a shortcodes branch for us to develop on. I'm not sure if it's possible for me to contribute to your fork since I can't make a fork of your fork.

— Reply to this email directly or view it on GitHub https://github.com/olefredrik/FoundationPress/issues/599#issuecomment-164202212 .

[olefredrik]

@josh-rathke @colin-marshall : Shortcodes for the most commonly used components, is in my opinion a very useful feature to have. How much freedom and flexibility we would want to provide to end users, is a very relevant question. Therefore, I believe that additional nice-to-have functionality should be developed as plugins (bundled with FP or stand-alone). It makes sense if short code functionality is an embedded part of the theme. Developers who want to restrict end-user's creativity, can just remove the include statement for shortcodes in functions.php.

So let's do this!? I have created a new development branch, which is up to date with the current master branch. If you submit pull requests to the development branch, we can merge that branch into master when we're ready. If this is done right, and simple enough (for the end-users), I believe that it is something that will lift FP to the next level.

[Tralapo]

This sounds nice! I once added some buttons to the simple text editor, so not the wysiwyg editor.

The once I mostly use are the button for flex-video and one for Alerts.

[colin-marshall]

@josh-rathke: I made a little Roadmap so we can track our progress on the shortcodes @ https://github.com/olefredrik/FoundationPress/wiki/Roadmap. Feel free to modify it where you see fit.

After adding TinyMCE functionality for buttons I realized that we will need to break up the javascript into modules/separate files for each shortcode component. We can definitely do this with Browserify, or RequireJS. I'm not sure if it's possible, but ideally I would do this with Babel and ES6 modules. I have yet to figure out if that will work client-side though. Any thoughts?

[joshrathke]

@colin-marshall This is great! Sorry I haven't had much time to contribute to this thing. I'll have a little bit of time here and there throughout the holidays to mess around a bit. It looks like this is coming along nicely.

[joshrathke]

I'll add this to the roadmap, but responsive video would be one I would use a ton!

[colin-marshall]

@josh-rathke did you see that @olefredrik recently added flex-video classes to the automatic embedding of videos from youtube and vimeo?

Commit: https://github.com/olefredrik/FoundationPress/commit/5158a3dfa93871c07b68791ddfcdbceede22c943

[joshrathke]

Sweet! @olefredrik out of curiosity do we have a list of all of the ways we have altered content within Wordpress?

I am not trying to gripe about anything at all. But it seems like in a couple situations, cleanup.php for example, we have taken a lot of liberty in assuming that developers want the image tag stripped. I don't know, I feel like we need to embed a centralized FoundationPress settings file that allows developers to turn some of this stuff on or off with a quick comment, or at least have an awareness of what kind of filters data is being run through upon activation of the theme.

On Saturday, December 26, 2015, Colin Marshall notifications@github.com wrote:

@josh-rathke https://github.com/josh-rathke did you see that @olefredrik https://github.com/olefredrik recently added flex-video classes to the automatic embedding of videos from youtube and vimeo?

5158a3d https://github.com/olefredrik/FoundationPress/commit/5158a3dfa93871c07b68791ddfcdbceede22c943

— Reply to this email directly or view it on GitHub https://github.com/olefredrik/FoundationPress/issues/599#issuecomment-167369343 .

Josh Rathke I.T. Director & Web Developer, YWAM Montana | Lakeside p: (406) 844-2221 m: (765) 637-5847 a: 501 Blacktail Rd. Lakeside MT, 59922 s: www.ywammontana.org e: josh.rathke@ywammontana.org

[joshrathke]

My only concern is that FoundationPress remains a turnkey development platform, and not point of frustration in terms of figuring out things like why my image class isn't coming through (that was an issue I had awhile back). I think if it takes more than 15 minutes to get the gist of what the code is doing and how it's organized then it's time to trim things down a bit.

On Saturday, December 26, 2015, Josh Rathke josh.rathke@ywammontana.org wrote:

Sweet! @olefredrik out of curiosity do we have a list of all of the ways we have altered content within Wordpress?

I am not trying to gripe about anything at all. But it seems like in a couple situations, cleanup.php for example, we have taken a lot of liberty in assuming that developers want the image tag stripped. I don't know, I feel like we need to embed a centralized FoundationPress settings file that allows developers to turn some of this stuff on or off with a quick comment, or at least have an awareness of what kind of filters data is being run through upon activation of the theme.

On Saturday, December 26, 2015, Colin Marshall <notifications@github.com javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

@josh-rathke https://github.com/josh-rathke did you see that @olefredrik https://github.com/olefredrik recently added flex-video classes to the automatic embedding of videos from youtube and vimeo?

5158a3d https://github.com/olefredrik/FoundationPress/commit/5158a3dfa93871c07b68791ddfcdbceede22c943

— Reply to this email directly or view it on GitHub https://github.com/olefredrik/FoundationPress/issues/599#issuecomment-167369343 .

Josh Rathke I.T. Director & Web Developer, YWAM Montana | Lakeside p: (406) 844-2221 m: (765) 637-5847 a: 501 Blacktail Rd. Lakeside MT, 59922 s: www.ywammontana.org e: josh.rathke@ywammontana.org javascript:_e(%7B%7D,'cvml','josh.rathke@ywammontana.org');

Josh Rathke I.T. Director & Web Developer, YWAM Montana | Lakeside p: (406) 844-2221 m: (765) 637-5847 a: 501 Blacktail Rd. Lakeside MT, 59922 s: www.ywammontana.org e: josh.rathke@ywammontana.org

[Aetles]

I've long suggested that cleanup.php needed an overview (or just plain removal) but to be fair this is not a new file or feature creep, it has always been part of FoundationPress, it has been there since the first commit (and most of it came for another theme, Reverie).

I you wan't a truly stripped down version of FoundationPress you could do as I do; fork it and remove all the functions, extra styles, templates, languages and other stuff you don't need (or don't agree with).

As the usage of FP has grown many different people with different need have had their suggestions and PR with additions and changes added to FoundationPress, sometimes accidentally introducing bugs and code that was added by mistake. If you have your own fork then you can pick and choose what changes you really want more carefully.

[MrPdtech]

Hi Everyone, please how can one see a demo(or any site its been installed on) of this theme..I am actually looking for something like this http://www.pressroomvip.com/

[timnolte]

As for adding a fancy UI around the short codes, has anyone considered https://github.com/fusioneng/Shortcake as the framework for a more use friendly interface?

[dantahoua]

I really hate shortcode but they are very useful, so I think the "shortcake" way is a nice way to use shortcode! :)

[gpspake]

@josh-rathke @colin-marshall @olefredrik The Easy Foundation Shortcodes plugin is excellent, with the exception of a few quirks and typos. It only works with Foundation 5 but it would be a great model for what this would look like. For the effort involved, I would suggest decoupling shortcode functionality from the theme and developing it as a plugin so it could be used with other foundation themes, (since all it will do is generate markup). It could still be called FoundationPress Shortcodes or something. I've used EFS on at least a dozen sites and users typically don't have any problems working with it. It's got shortcodes for the grid, flex-video, buttons, tabs, accordions etc. and they all display a modal with options when the button is clicked in tinymce.

[JPOak]

@joshrathke Just ran into this when googling for ideas for a simple solution for Foundationpress. Something with just colums. I didn't see a development branch or anything official in the FP repro, so went over to the branch you mention above. Is this the latest work done? Just checking. Thanks.

[nitrokevin]

Are you wanting to be able to select the number of columns in the content editor? If so I've been using ACF plugin and making flexible layouts with a select drop down, then defining a few layout styles in the template using foundation column classes.

[JPOak]

@nitrokevin I actually built an initial ACF sections with the same idea that I use. However, I am working on a project where they want me to convert these whitepapers to posts. The whitepapers switch from 1 column to two colums throughout the post. So my thought that it might better to use shortcodes. Now you have me thinking it over again : ).

[nitrokevin]

For that you probably wouldn't need the conditional part, you could just make two flexible content layouts and let them select the layout

[JPOak]

@nitrokevin You got me thinking about using ACF again. However, this shortcodes thread is interesting and worthwhile. Thanks.

[olefredrik]

As it's been a year and a half since this issue was opened, and there has not been any progress recently (no blame), I think it's fair to close this.

If you ever get time to continue where you left off, I will be more than happy to review any pull requests. :)

[olefredrik]

Just a heads-up to all of you who have been waiting for shortcodes for Foundation in WordPress.

I've been talking to a web dev who has developed a WordPress plugin with Foundation 6 Shortcodes for Visual Composer. It's a premium plugin currently priced at $15.

I don't have first hand experience with the plugin, as I don't use Visual Composer. But I guess it's probably good value for money, compared to writing your own plugin (unless your super fast and very skilled at writing plugins, of course).

[andywarren]

Hi all, I'm the developer, feel free to ask any questions you may have. Just an FYI, even if you don't use Visual Composer you can still use the shortcodes by manually inserting them!