Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: How to put a visual editor in the listing form

  1. #1
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts

    How to put a visual editor in the listing form

    I know this is far from perfect but it is such an simple mod and makes such a huge difference to the appeal of Vantage to business owners, IMHO. It doesn't replace the business description text area with a visual editor, it just places a wordpress visual editor above that field. What listing owners will have to do is put their content in the visual editor, then click the HTML tab and copy and past the code into the business description text area. This is why it isn't perfect, but it's a hell of a lot better than nothing.

    If somebody who knows about PHP could improve this mod so that the text area is replaced with the visual editor, please let us know. Also, if any Appthemes developers read this please consider including this in the next release. I did it in about 20 minutes once I had done all the research, and I know literally next to nothing about PHP. All I did was copy and paste a bit from the Wordpress codex, then added some of my own HTML and CSS, so I'm sure it wouldn't take long to implement properly.

    Anyway, here it is;

    In the form-listing.php insert this code.
    Code:
    	<div class="editor-directions">
    		<p>Create your content as you would like it to appear in your listing in the editor below. When you are done just click the HTML tab in the top right hand corner and copy the code into your business description. Be sure to explore all the options to get your listing looking just the way you want it.</p>
    	</div> (Put whatever directions you want here. I also made a note of the "Kitchen Sink" pointing out that there are more option available there, as it is hidden by default)
    
    
    <?php wp_editor( PutYourContentHere, listingeditor ); ?> ("PutYourContentHere" can be anything and shows up in the editor initially. Make sure you don't have any spaces or anything if you want to change this. "listingeditor" is the editor_id and can only use lower case letters, nothing else. Both of these are required for it to work)
    You put this code in between the images and business description like this; (I think it is about line 115)
    Code:
    <fieldset id="misc-fields">
    	<div class="featured-head"><h3><?php _e( 'Additional info', APP_TD ); ?></h3></div>
    
    	<div class="form-field images">
    		<?php _e( 'Listing Images', APP_TD ); ?>
    		<?php the_listing_image_editor( $listing->ID ); ?>
    	</div>
    
    	<div class="editor-directions">
    		<p>Create your content as you would like it to appear in your listing in the editor below. When you are done just click the HTML tab in the top right hand corner and copy the code into your business description. Be sure to explore all the options to get your listing looking just the way you want it.</p>
    	</div>
    
    <?php wp_editor( PutYourContentHere, listingeditor ); ?> 
    
    	<div class="form-field"><label>
    		<?php _e( 'Business Description', APP_TD ); ?>
    		<textarea name="post_content"><?php echo esc_textarea( $listing->post_content ); ?></textarea>
    	</label></div>
    Next, you will want to add a few lines to you style sheet. The first bit puts a divider line between the images and the editor. It just makes the layout a little clearer.
    Code:
    /* =========== [ LISTING FORM ] =========== */
    
    .editor-directions {
    	border-top: 2px solid #EBEBEB;
    }
    The way Vantage is now, lists don't display properly in the listings. The list icons in the editor are pretty useless then, so you need to add a few more lines to your style sheet. I don't know if this was deliberate or just something the developers overlooked as the business description is normally just a plain text field. Anyway, if you add this to you style sheet it will display lists properly.
    Code:
    #listing-tabs ul {
    	margin:10px 40px;
    }
    
    #listing-tabs ul li {
    	list-style-type:disc;
    }
    
    #listing-tabs ol {
    	margin:10px 40px;
    }
    
    #listing-tabs ol li{
    	list-style-type: decimal;
    }
    If you wanted to, I'm sure you could have a different list-style-type for the different levels of lists. I'll probably explore that later.

    That should just about do it. I really recommend giving this a try, and let me know if there are any problems.

    It goes without saying, of course, that you should do this in a child theme, not vantage itself. Just import the form-listing.php into your child theme directory.

  2. #2
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  3. The Following User Says Thank You to gonesmith For This Useful Post:

    johno69 (October 21st, 2012)

  4. #3
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  5. The Following 2 Users Say Thank You to gonesmith For This Useful Post:

    mtchairs (September 6th, 2012), websitu (October 28th, 2012)

  6. #4
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  7. #5
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  8. #6
    Expired Customer stefann's Avatar
    Join Date
    Oct 2012
    Location
    Germany
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  9. #7
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  10. #8
    Expired Customer johno69's Avatar
    Join Date
    Sep 2012
    Location
    Australia
    Posts
    576
    Thanks
    47
    Thanked 109 Times in 81 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!
    Did this post help you? Click Thanks | Did it help you lots? Then the next time you see someone in need give them $5 for me.

  11. #9
    Expired Customer stefann's Avatar
    Join Date
    Oct 2012
    Location
    Germany
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

  12. #10
    Expired Customer gonesmith's Avatar
    Join Date
    Jun 2012
    Posts
    764
    Thanks
    50
    Thanked 202 Times in 137 Posts
    You must be an AppThemes customer and logged in to view this response. Join today!

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Add visual text box editor to ad listing page
    By dailysoft in forum ClassiPress General Discussion
    Replies: 7
    Last Post: April 19th, 2013, 10:15 PM
  2. How to edit listing in normal WP editor
    By khong in forum Report Vantage Bugs (Legacy)
    Replies: 9
    Last Post: February 24th, 2013, 10:41 AM
  3. Replies: 5
    Last Post: May 3rd, 2011, 08:46 AM
  4. Visual editor not working when crafting pages under "blog" category
    By midwestmedia100 in forum Help Using ClassiPress
    Replies: 5
    Last Post: February 21st, 2011, 12:25 PM