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:
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
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 thisaccount.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=20in the page's URL where20is the database id of the page being edited.







