[Resolved] How to list Posts in 1 column, and Cred edit post in second column?

[Author]

Posts

[John Mac]

I am trying to:
For members of my site being logged in, they will be able to publish posts. Also to list their own posts and have the option to edit them.

I'm using the latest Divi theme, and have created a two column layout.

Left side I just fetched all the articles the user is author off. They can click Edit on each one. But I would like then to have the article open in the right column space for editing.

hidden link

I guess I have to use Layouts. But how to... make it work? ?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Johnny

Layouts won't help with this specific objective, there isn't really a way to do this without a custom solution.

When the page is rendered, it contains the markup for your left column with its list of posts (and CRED edit links), and an empty right column waiting to be populated with an edit form.

If you look at the markup for a CRED edit form you will see they are tightly coupled to the post being edited. You can't add some kind of scaffold CRED form that you then modify with jQuery, for example, to use the form to edit a particular post.

The CRED form has to know the id of the post it is editing at the time the page is generated and the markup is printed.

And so the only way I could see this working would be for your View that lists the posts to also add for each post the CRED edit form to the page, hidden, and then you Edit button could trigger a snippet of jQuery that moved the CRED form in the DOM into the right hand column.

That might work if your users have 3-4 posts, but if they had 15, that's the markup for 15 mostly unused CRED forms being added to the page.

A custom solution would bypass CRED and would use more of a generic form in your second column that would be populated on the fly using the content of the posts in the first column, but you would need code on the server to handle the form submission and update the post content and custom fields accordingly.

[John Mac]

Hey Nigel,

Thanks for helping out. I barely followed what you said, but I think I get it. I really tried firing my neurons to figure this out, and I think I made it work 🙂

But it's probably a hilarious solution.

The first I was thinking was to have the Edit Post link open in an iFrame in the right column. That works fine, but that iFrame loads the whole website in there, of course.

I opened the form edit in a normal browser window, and I then just stripped out all other content except in the .entry-content area, using CSS, hehe 🙂

I added that CSS code to the CSS area for the Cred edit form. This way I was thinking it would only be loaded inside that iFrame. So it did.

My right column now only loads the content part where the Cred form is.

Let me know if you could have a look at this, and if there would ever be any issues using iframes in html

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Johnny

Loading the form in an iFrame is a viable solution, though I expect that when you say you removed everything except the .entry-content area you mean that you are simply hiding it with CSS, the rest of the page markup, including the header etc., is still loaded.

The header tag on WordPress pages contains quite a lot of cruft at the best of times, but it is particularly wasteful when embedding just the form in an iFrame.

If you wanted to go down this route I would suggest you create a minimal PHP template for a particular page where you add the CRED form.

See here for more information about the Template Hierarchy, and about the template files used to generate a static WordPress page in particular: https://developer.wordpress.org/themes/basics/template-hierarchy/#single-page

So, say you add your CRED form to a page with a title of "Edit form", then you can create a custom PHP template page-edit-form.php which will be used to render that page. You are going to render it in an iframe, so you can strip out pretty much everything you don't need.

Duplicate your theme's page.php template and call it page-edit-form.php then edit it.

In twentyseventeen it looks like this:

<?php
get_header(); ?>

<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php
			while ( have_posts() ) : the_post();

				get_template_part( 'template-parts/page/content', 'page' );

				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) :
					comments_template();
				endif;

			endwhile; // End of the loop.
			?>

		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->

<?php get_footer();

In this case you might:
1 - open header.php and take the bare minimum you would need and replace the get_header() call with that
2 - remove all the extraneous wrapper divs etc. around the loop section, and delete the comments section
3 - get rid of the get_footer() call

Then when you load the page into your iFrame it will output the bare minimum markup required.

You might need a little trial and error to be sure what you can and cannot remove, particularly from the header.

[John Mac]

Hey Nigel,

Sorry, I have been to swamped in client work again. But I'll try this setup. Though, I'm not really a coder but I get the structure and much of the elements.

Will try hopefully tomorrow, then I'll get back to you with questions or close this ticket 🙂

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Sure thing, let me know how you get on.

Hopefully with "it works" 🙂

[John Mac]

Hey Nigel,

So I finally got the time to test this out. After some hustle and hassle, and some violent stripping of code in the new template file, I got the page to render.

Where I drop off now is how to load this form when editing articles. I'll show you what I did:

1. I duplicated Divi's page "page-template-blank.php" into my child-theme folder, and stripped out the code. This is the result:

<?php
/*
Template Name: User Aarticle Edit
*/
?>

<div id="main-content">

	<div class="container">
		<div id="content-area" class="clearfix">
			<div id="left-area">

			<?php while ( have_posts() ) : the_post(); ?>

				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

					<h1 class="main_title"><?php the_title(); ?></h1>

					<div class="entry-content">
					<?php the_content(); ?>

					</div> <!-- .entry-content -->

				</article> <!-- .et_pb_post -->

			<?php endwhile; ?>

			</div> <!-- #left-area -->
		</div> <!-- #content-area -->
	</div> <!-- .container -->

</div> <!-- #main-content -->

2. I have created a WP page called "Edit your article", and selected the new Template for that. It renders like this: hidden link

3. In my Divi built page where one column lists the users articles, and right column is an iFrame, I added src="hidden link", like this:

<iframe src="<em><u>hidden link</u></em>" id="articleediting" name="articleediting" style="width: 100%; height: 1200px;">
</iframe>

But this doesn't help, because clicking Edit article loads the the default Divi layout anyway.

So how do we get the edit form to load in a page template we have defined?

[Nigel Supporter Languages: English (English ) Spanish (Español ) Timezone: Europe/London (GMT+01:00)]

Hi Johnny

I think you may have mis-interpreted what I was suggesting and I'm not sure from your description how you are adding the iframe, so let me describe what I did to make this work (using twentyseventeen) and hopefully you can follow and adjust as required.

You can see the crude results in the screen recording.

First, I publish a page called "Edit form" which is going to be what goes inside the iframe.

So this is the page which wants a minimal PHP template setting up to include the bare minimum.

I created a template called page-edit-form.php, which is the template that will be used when that page is loaded, which looks like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
</head>

<body <?php body_class(); ?>>
<div class="wrap">
	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">
			<?php
			while ( have_posts() ) : the_post();

				the_content();

			endwhile; // End of the loop.
			?>
		</main><!-- #main -->
	</div><!-- #primary -->
</div><!-- .wrap -->
</body>
</html>

It may want modifying to give the markup you require for your styling etc., but you get the idea.

I will add my CRED edit form to this page. Now the problem here is that we need to know the id of the post that the CRED form should edit. My solution is where you have the list of posts to be edited, to generate the url for the iframe which adds the post id of the post to be edited as a url parameter 'postid'.

But there is no way to use that inside the [cred_form] shortcode, so I wrote a custom shortcode which does the same as the [cred_form] shortcode (you have to supply the form id as an attribute), which looks for a url parameter 'postid' to know which post to edit with the form.

So the code to register the shortcode is as follows:

/**
 * Define custom shortcode to render CRED form
 *
 * form id comes from shortcode attribute 'form'
 * post id comes from url parameter 'postid'
 */
add_shortcode( 'cred-form-url', function( $atts ){

	$postid = $_GET[ 'postid' ]; // from url parameter ?postid=xx
	$formid = $atts['form']; // from shortcode attribute form="xx"

	cred_form( $formid, $postid );
	return;
});

And you insert it into your Edit form page (editing the form id) like so:

[cred-form-url form='20']

So that gives us what will be loaded inside the iframe.

You can test it by visiting mysite.com/edit-form/?postid=99 (where 99 is the id of a post you want to edit).

Now to the page that will list the posts which can be edited and has the iframe where they will be edited. The contents of that page look like so, with a View to list the posts and an empty placeholder iframe:

[wpv-view name="list-contents"]

<iframe id="someiframe"></iframe>

The View "list contents" will list the posts that the user should be able to edit.

Here's the relevant part of the loop output section:

[php]
<wpv-loop>
<div>
<p>Edit <a class="js-edit-link" href="[wpv-post-url id='18']?postid=[wpv-post-id]">[wpv-post-title]</a></p>
</div>
</wpv-loop>

This generates a link to the Edit form page with the post to be edited added as a url parameter. (Note the id='18' is the id of the page "Edit form", which you will need to edit.)

The final part is to add some custom JS to intercept clicking on these links to prevent the page being reloaded with that address and to, instead, use that url to populate the iframe.

Even though your CRED form is loaded inside an iframe, submitting edits still works.