Implementing Text Editor and Featured Image in Admin

Text Editor

If your plugin implements a form and you need the text-editor on the form, just write a textarea and set its HTML class to summernote like so:


<?php ?>
<form action = "account.php?apage=admin-page" method = "POST">
	
	<textarea class = "summernote" name = "desc"></textarea>
	
</form>


Then you would have an editor like this:

Admin editor


Featured Image in Admin

If you want a page opened by your plugin to have featured image image, follow the steps below:

  • Write the HMTL code for button that the admin user will click on to choose the featured image as follows:
    
    <?php ?>
    <!-- Featured images will be appended here -->
    <div class = "col-12" id = "p-before-featured-images"></div>
    
    <!-- Featured images upload button area -->
    <div class = "row padding-right-15px">
    	<div class = "col-12 upload-button-area">
    		<div class = "sheet-upload-area">
    			<div id = "admin-featured-image-open-media-library" class = "btn btn-success form-control">
    				<span class = "fas fa-cloud-upload-alt"></span>
    				Add Featured Images 
    			</div>
    		</div>
    	</div>
    </div>
    


    The <div class = "col-12" id = "p-before-featured-images"></div> should be part of the code as the featured images are appended to the <div class = "col-12" id = "p-before-featured-images"></div>

    The featured images will appear like this

    Featured images


In order to prevent the featured images from disappearing when the page is refreshed, add the following code to the top of the "Add Featured Images" button area like so:


<?php 
if(isset($_SESSION['post_featured_images'])){
	?>
	<div class = "row padding-right-15px">

	<?php
	foreach($_SESSION['post_featured_images'] as $imageKeys => $uploadedImage){

		?>
		
		<div class = "col-12 upload-button-area">
			<div class = "sheet-upload-area">
				<div class = "ads-featured-image">
					<img src  = "../uploads/<?php echo $uploadedImage['file_name'];?>" alt = "" />

				</div>
				<div class = "ad-list-details-div>
					<span data-idx = "<?php echo $uploadedImage['data_idx'];?>" id = "<?php echo $uploadedImage['file_name'];?>" class = "fas fa-times-circle delete-featured-image" title = "Clicking will remove this image" ></span>
				</div>
			</div>
		</div>
		<?php
	}
	?>
		</div>
	<?php
}

?>

<!-- Featured images will be appended here -->
<div class = "col-12" id = "p-before-featured-images"></div>

<!-- Featured images upload button area -->
<div class = "row padding-right-15px">
	<div class = "col-12 upload-button-area">
		<div class = "sheet-upload-area">
			<div id = "admin-featured-image-open-media-library" class = "btn btn-success form-control">
				<span class = "fas fa-cloud-upload-alt"></span>
				Add Featured Images 
			</div>
		</div>
	</div>
</div>



Preventing the featured images on one page from appearing in a different page

The featured images are put in a session. So they will show on the page where they are intended to show. However, when you open a different page, the featured images will still show on the different page (where they are not intended to show) unless you implement a code to prevent this. To inplement a code to prevent this, follow the steps below:

  • Suppose that you have a fresh page for posting content that has featured images. And suppose that you have another page for editing the content once you have saved it in the database.

  • Then the URL for the fresh page for example is like this account.php?apage=new-post. And the URL for editing the page is for example like this account.php?apage=update-post&post-id=20

  • On the fresh page where the URL is like this: account.php?apage=new-post, put the following code at the top of your function:
    
    <?php
    
    //Clear featured images that have come from previous edit page
    if(!empty($_SESSION['post_id'])){
    	$_SESSION['post_featured_images'] = [];
    	$_SESSION['f_image_ids'] = [];
    	$_SESSION['post_id'] = NULL;
    }
    
    //This page has never been saved before
    $_SESSION['save_complete'] = false;
    ?>
    


  • Next, on the edit page where you have the URL like account.php?apage=update-post&post-id=20, put the following code at the top of your function:
    
    <?php
    
    $iPostUpdateId = $_GET['post-id']; //You must sanitize $_GET['post-id']
    
    //Clear the featured images that have come from previous new page or previous edit page
    if(isset($_SESSION['post_id'])){
    	if($_SESSION['post_id'] != $iPostUpdateId){
    		
    		//Clear the featured images
    		$_SESSION['post_featured_images'] = [];
    		$_SESSION['f_image_ids'] = [];
    	}
    }
    
    //If $_SESSION['save_complete'] == false, then it means, previous fresh page was not saved. Clear its featured images
    if(isset($_SESSION['save_complete'])){
    	if($_SESSION['save_complete'] == false){
    		
    		//Clear the featured images
    		$_SESSION['post_featured_images'] = [];
    		$_SESSION['f_image_ids'] = [];
    	}
    }
    
    //This page has been saved before and is being edited.
    $_SESSION['save_complete'] = true;
    
    
    
    //$_SESSION['post_id'] should be equal to $iPostUpdateId when editing page
    $_SESSION['post_id'] = $iPostUpdateId;
    ?>
    


  • These implementations will prevent featured images from appearing on pages where they are not supposed to appear. But ensure that the page where you are editing the content has post-id=20 in the page's URL where 20 is the database id of the page being edited.