Author: Dipankar Baidya

In the preceding guide titled “Generating PDFs for WordPress Posts Without Using Plugins: A domPDF Tutorial,” you can find a link to the article on https://andamantech.com/generate-pdf-wordpress-post-without-plugin-dompdf-tutorial/ if you’re inclined to explore it. Subsequently, upon our observation, it became apparent that although the PDF for this WordPress content was being generated, it was not displaying the images linked within the post. Fortunately, addressing this issue is now a straightforward task.

It is possible to generate a PDF file that does not display images when utilizing domPDF for a particular view. To facilitate PDF exportation, the activation of a function called ‘isRemoteEnabled’ is necessary. Data retrieval from a database, inclusive of images, can be accomplished. However, after PDF generation, images might not appear, resulting in a “not found” or “unknown type” warning message. This predicament can be addressed by dynamically loading data from the database as required, thus rectifying the issue and enabling successful PDF exportation.

To initiate the resolution process, access the domPDF Library located on your server. Within this library, a file can be edited to generate PDFs. For improved comprehension, an image illustrating this process is provided.

In practice, direct link images are employed using code such as: (<img src=’https://your_image_link’). This approach offers the advantage of generating PDF images from various website links, seamlessly incorporating images within the text. The domPDF library features an option to enable this functionality. When activated, images on your webpage will be displayed in the PDF file, with images being converted to text during the process.

use Dompdf\Dompdf;
 define("DOMPDF_UNICODE_ENABLED", true);
  $dompdf= new Dompdf();

   $dompdf->loadHtml($aData['html']);
    $dompdf->set_option('isRemoteEnabled', TRUE);

   $dompdf->loadHtml($html);
  $dompdf->setPaper('A4','portrait');
 $dompdf->render();
$dompdf->stream("".$pdf_title."",array("Attachment"=>0));

Presently, proceed to edit this file by incorporating the provided code snippet and subsequently save your changes.

WordPress CRM Project: Dynamic PDF Generation for Posts Without Plugins. In this WordPress CRM project, we are implementing a dynamic PDF generation feature directly within WordPress Posts, eliminating the need for additional plugins. Our goal is to provide readers with a convenient option to download and save posts as PDFs for later viewing. This tutorial holds significant importance, and I am currently in the process of creating a similar solution. Once you have a comprehensive understanding of how this tutorial functions, you can explore the practical benefits it offers.

To gain a better grasp of the process, please refer to our instructional YouTube video provided below. We invite you to subscribe to our channel to stay updated on similar content in the future. Your support is greatly appreciated!

Original Content:
“WordPress based CRM project, generate PDF on WordPress Post without plugin, you always needed the dynamic PDF generation feature for the readers for creating PDF downloading option that can help readers to download your post direct and read it later. This tutorial is very important I am also creating one of you can check in after you know full details about this tutorial how it works, is this helpful. You can check our YouTube video check bellow and please Subscribe to our channel for this type of video.”

Step 1: Download the domPDF Library

You can acquire the domPDF library from its GitHub repository directly or through Composer installation. For this guide, I am opting to download the domPDF library from GitHub at the following link: https://github.com/dompdf/dompdf/releases. Hence, I suggest utilizing the GitHub platform for obtaining the Dompdf library.

Step 2: Develop the WordPress Function

In this phase, we will construct a function designed to facilitate the utilization of our PDF generation link. The primary purpose of this function is to extract pertinent information from the database and transmit it to the domPDF library, which is responsible for generating PDFs for your WordPress Posts or Pages. This step encompasses the creation of two distinctive functions:

1. Retrieve the database ID for a specific post.
2. Acquire the post title.

[code lang="js"]// function that runs when ShortCode
function pdf_download_generate() {  
// Things that you want to do for get post id. 
$pdf_post_id = get_the_ID();        
return $pdf_post_id;
} 
// post id shortcode
add_shortcode('pdfDoload', 'pdf_download_generate'); 
 
function pdf_post_title() {  
// Things that you want to do for get post title and replace. 
$pdf_posttitle = str_replace(" ","-",strtolower(wp_get_document_title()));
return $pdf_posttitle;
}
// post title shortcode
add_shortcode('pdfTitle', 'pdf_post_title');[/code]

Both of these functions are executed via a shortcode mechanism. This shortcode feature holds considerable significance as it empowers us to generate a PDF link precisely where it is desired. A highly effective location for showcasing this download link is the sidebar; we can readily employ it as a widget to present a prominent “Download” button.

Step 3: Establish a PDF Download Button

In this stage, we will proceed to create a download button that will be embedded within a sidebar widget. Let’s delve into the process:

1. Begin by logging into your WordPress dashboard.
2. Navigate to “Appearance” and select “Customize”. Please note that the location of the sidebar option might vary depending on your theme; it could also be nested within another option.

Alternatively: If you prefer a more direct approach, access “Appearance” and click on “Widgets”. Here, you’ll locate the sidebar option.

Inside the sidebar segment, you’ll want to add a “Text” (Arbitrary text) section to the sidebar widget. Assign the title of the widget as ‘PDF Download’. In the provided text area below, you’ll encounter two options: “Visual” and “Text”. Opt for the “Text” option and insert the provided code snippet.

<a class="wp-block-button__link has-background" style="background-color: #ff3d00; border-radius: 1px; color: #fff; width: -webkit-fill-available;" href="/wp/pdf_converter/htmltopdf.php?Tboto=[pdfDoload]&PdfTitle=[pdfTitle]">Download</a>

Feel free to make any necessary modifications, including the addition of CSS styling to enhance the visual appeal.

Step 4: Configure and Link domPDF

We already download domPDF file from GitHub, now this file uploads your WordPress hosting server (also you can try this in your local computer), location of the uploading file is in root directory domPDF, main files mention image bellow, create a folder and name it ‘pdf_converter‘ inside this folder you can upload this files (domPFD).

Step – 5 domPDF Configuration Database

Inside this pdf_converter folder, there is a file name is ‘htmltopdf.php‘, you can edit and open this file. Now want to know your Database Username, Database Password, Database name, you can find this on your own, Now, simple open directory folder wp-config.php.

You can open your database where your db table, simply open it and find Ctr+f ‘_posts’, now you can copy this name, get a reference from image. Now this paste into wp_posts to your PREFIX_posts.

This bellow code replace inside file name ‘htmltopdf.php‘, also check this image for more details.

<?php
$pdf_getid=$_GET['Tboto'];
// $pdf_getid=$pdf_getid;
$pdf_title=$_GET['PdfTitle'];
require 'vendor/autoload.php';
// Edit Database details hear
$con=mysqli_connect('localhost','db-Username','db-Password','db-table-name');
// Database table name edit PREFIX_posts
$res=mysqli_query($con,"select * from PREFIX_posts where ID='$pdf_getid'");

if(mysqli_num_rows($res)>0){
while($row=mysqli_fetch_assoc($res)){
	 $fulldata_=utf8_decode($row['post_content']);
	 $maintitle_=$row['post_title'];
	 $websitelink=$row['guid'];
$html='<html><head>
<style>
* {	width: auto;  }
p { 
	text-align: left; 
	font-size: 1em; 
	padding: 0px; 
	margin: 12px 0px;
	line-height: normal; 
	font-weight: lighter;
}

.titletxt{
	font-size: 40px;
	text-align: center;
}
.Tb_desi{
	text-align: right; 
	margin-top: 50px;
	font-size: 20px;
	letter-spacing: 1px;
	color: #325c9a;
}
</style>
</head><body>
<div><p class="titletxt">'.$maintitle_.'</p></div>'.$fulldata_.'
<div style="border-radius:3px;font-weight:bold;background: red;margin: 0 auto;" align="center" height="48"><a target="_blank" href="'.$websitelink.'" style="color:#ffffff;text-decoration:none;font-size:16px;display:block;font-family:Helvetica,Arial,sans-serif;padding: 12px 4px;" rel="follow" >Visit Post</a> </div>
<div class="Tb_desi"><span>http://localhost/wp</span></div></body></html>';
}
}
else{$html='<center><h2>No PDF found!</h2></center>';}

use Dompdf\Dompdf;
define("DOMPDF_UNICODE_ENABLED", true);
$dompdf= new Dompdf();
$dompdf->loadHtml($html);
$dompdf->setPaper('A4','portrait');
$dompdf->render();
$dompdf->stream("".$pdf_title."",array("Attachment"=>0));

Conclusion:

In this article, we have explored the seamless process of converting a WordPress Post into a PDF format through the utilization of the domPDF library. Despite its excellence, it’s important to note that while most CSS attributes function effectively, comprehensive support for CSS3 is limited. Nevertheless, domPDF provides robust support for a wide array of CSS features, making it a suitable choice for fulfilling the majority of PDF export requirements.

By harnessing the power of PHP and the MySQL database, we have successfully generated PDF files from WordPress Posts. However, if you encounter an issue such as WordPress-generated PDF images not displaying correctly within the domPDF framework, rest assured that there are solutions available. Additionally, it’s worth highlighting that the scope of domPDF’s capabilities extends beyond MySQL alone. Should you wish to generate PDFs from alternative database systems, all that’s required is establishing a connection with the specific database type in question. This adaptability underscores the versatility of the approach.

There are various WordPress themes available for you to select and implement into your project. However, it’s important not to delve too deeply into researching their features during this phase. Unfortunately, some themes may lack essential features such as Pagination and an author bio box. In fact, I’ve already managed to create an author bio box without the need for a plugin.

Allow me to guide you through the process of establishing a straightforward pagination system with numbered pages for your WordPress posts, all without relying on any additional plugins. Many developers find themselves unaware of the correct way to incorporate pagination into WordPress posts, often resorting to plugins for this purpose. Yet, it’s worth noting that such plugins can contribute to website bloat. So, let’s begin by examining the relevant code.

Step 1: Incorporate the Custom Code

To seamlessly integrate the desired functionality, simply insert the following code snippet into your theme’s “functions.php” file. To achieve this, you can conveniently copy and paste the provided code.

If you’re unsure about the location of the “functions.php” file within your WordPress Dashboard, here’s how you can navigate to it: Log in to your Dashboard, proceed to “Appearance” → “Theme Editor.” Once in the Theme Editor, you’ll notice a list of Theme Files on the right-hand side. Look for “functions.php” and click to open it. Append the code mentioned below to the last line of this file:

function pagination($prev = '«', $next = '»') {
    global $wp_query, $wp_rewrite;
    $wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;
    $pagination = array(
        'base' => @add_query_arg('paged','%#%'),
        'format' => '',
        'total' => $wp_query->max_num_pages,
        'current' => $current,
        'prev_text' => __($prev),
        'next_text' => __($next),
        'type' => 'plain'
);
    if( $wp_rewrite->using_permalinks() )
        $pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg( 's', get_pagenum_link( 1 ) ) ) . 'page/%#%/', 'paged' );
 
    if( !empty($wp_query->query_vars['s']) )
        $pagination['add_args'] = array( 's' => get_query_var( 's' ) );
    echo paginate_links( $pagination );
};

Step 2: Presenting the Pagination

Once you’ve executed the previous step, proceed to invoke the pagination function at the location where you intend to showcase the pagination interface. This can be accomplished on your post page by utilizing the pagination() function.

For optimal placement, consider situating this function outside of the loop. It should, however, remain within the confines of the if(have_posts()) statement within your designated template file. To effect this, navigate through your Dashboard to “Appearance” → “Theme Editor,” and then access the “single.php” file, which corresponds to individual post pages. Here, you can seamlessly integrate the pagination() function to yield the desired outcome.

You’re currently working within the “single.php” file. To incorporate the code, simply paste it immediately above the closing </main> tag.

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : the_post(); ?>
        // post goes here
    <?php endwhile; ?>
 
    <div class="pagination"><?php pagination('»', '«'); ?></div>
 
<?php endif; ?>

Step 3: Crafting CSS Design for Pagination Styling

In WordPress, you have the flexibility to include personalized CSS classes to oversee the visual presentation of your freshly implemented navigation. To gain insight into styling options, consider referring to the provided CSS illustration:

Navigate to your Dashboard, then proceed to “Appearance” → “Theme Editor.” Locate and access the “style.css” file, which resides on the same page. Append the subsequent code snippet to the final line of this file to effectuate the desired styling enhancements.

.page-numbers { font-size: 15px; }
.page-numbers.current { color: #222; }
.page-numbers .dots { letter-spacing: 1px }
a.page-numbers  { font-size: 14px; color: #3888ff; }

By following the aforementioned trio of steps, you can seamlessly integrate pagination for your WordPress posts sans the need for any plugins, resulting in a more streamlined website loading experience. It is my aspiration that this tutorial proves to be of immense assistance. If you found this code snippet beneficial, and if you’re interested in enhancing the SEO-friendliness of your website, kindly explore our array of other articles on the site. Noteworthy examples include “Activate Image Title Tags in One Simple Step” and “Manual Addition of Schema Markup in WordPress for Structured Data Without Plugins.” Your exploration of these resources may prove enlightening.

Implementing a Sticky Menu with Scroll-to-Top Functionality in WordPress Without Using a Plugin, in the realm of modern websites and premium WordPress themes, you might have come across a captivating design trend where the header remains fixed and elegantly reveals or conceals itself as you scroll upwards or downwards. This results in a visually pleasing navigation experience, placing navigation menus at the forefront. Such a feature holds immense value for websites, particularly those with extensive content such as lengthy posts or pages. It bestows users with a swift navigation avenue, thereby enhancing the overall user experience.

Within this discourse, you will uncover the methodology to incorporate this dynamic behavior into your WordPress site without resorting to a third-party plugin. I am dedicatedly delving into intricate aspects of WordPress website functionality, and this endeavor is no exception.

The implementation of a sticky navigation menu can significantly elevate the user experience of your WordPress site. It emerges as a pivotal component, facilitating seamless traversal for website visitors across various pages, devoid of any interruptions. This enhancement not only amplifies the usability and accessibility of your website but also contributes to the refinement of its overall quality.

Creating a Scroll-Activated Show/Hide Sticky Menu in WordPress: Streamlining Navigation for Swift Access

Enhancing Navigation Efficiency: Introducing scroll-triggered show/hide functionality in WordPress Without Plugin to sticky menus empowers visitors with swift and effortless navigation across your web pages. Especially for articles exceeding the 2,000-word mark, where users engage by scrolling through extensive content, this feature serves as a beacon. Once the user’s interaction transitions from reading to navigation, the menu gracefully emerges upon scrolling upward. This seamless action enables users to instantaneously access the menu, guiding them to their desired destinations on your website. Consequently, this immersive experience encourages prolonged visitor engagement, consequently bolstering both user interaction and conversions on your WordPress platform.

Curbing Bounce Rates: The implementation of a streamlined, uncluttered, and easily navigable menu inherently combats bounce rates, contributing to a more engaging website journey. The incorporation of a sticky navigation component plays a pivotal role in achieving this outcome.

Elevating Brand Recognition: Harness the prowess of sticky navigation to prominently display your logo or other visually appealing elements within the header. This strategic placement exponentially amplifies brand recognition, fortifying the identity of your business in the minds of your audience.

Comprehensive Step-by-Step Tutorial: Crafting a Scroll-Responsive Show/Hide Sticky Menu

As you’ve undoubtedly discerned, a sticky menu is a navigational element that seamlessly accompanies you while traversing both upwards and downwards on a webpage. In essence, this entails the navigation panel remaining visible during upward scrolls, while elegantly concealing itself during downward scrolls.

Within the confines of this instructional guide, we shall embark on the creation of a sticky menu that graciously reveals itself upon upward scrolling of the viewport. However, to preserve the fluidity of the content consumption experience, we shall ingeniously conceal the menu during instances of downward page scrolling. The ultimate manifestation of our efforts will result in a meticulously balanced visual presentation. Without further ado, let us commence this enlightening journey:

Step 1 – Analyze the Header Section

To initiate the process, right-click on any webpage of your choice and select the “Inspect” option. This will grant you access to the intricate underpinnings of the webpage, encompassing its source code, visual assets such as images, the HTML and CSS components contributing to its aesthetic, as well as the Javascript code that orchestrates dynamic animations and functionalities.

As your first task, navigate to the target website and direct your attention to the encompassing section known as the “header.” Your objective is to locate this pivotal area within the webpage’s structure. For visual guidance, refer to the image provided below:

Next, identify the ‘div’ or ‘header’ section. Within this same section, carefully inspect and determine the presence of any distinctive ‘id’ or ‘class’ attributes. It’s imperative to emphasize that these identifiers must possess uniqueness – refrain from duplicating ‘id’ or ‘class’ values anywhere on the current page. This distinctiveness is paramount.

In the event that you encounter redundant ‘id’ or ‘class’ attributes, you have the option to undertake the following step. Should uniqueness not be established, proceed to generate a new class (employ any preferred name) and integrate it into your theme’s ‘header.php’ file. To accomplish this, navigate to your Dashboard, access the ‘Appearance’ section, and opt for the ‘Theme Editor.’ Subsequently, locate the ‘header.php’ file within this interface. Within this file, you’ll encounter the section corresponding to the menu bar. At this juncture, incorporate the newly crafted, unique class name (a designation of your choice, but ensuring its uniqueness is upheld).

Please remember to exercise caution and precision during this process to maintain the integrity of your website’s structure and design.

Step 2 – Integrate jQuery Code

At this juncture, we shall engage in an empirical exploration by applying the following code snippet to the selected header section. Having made your choice of ‘id’ or ‘class’ name, proceed to insert the ensuing jQuery code snippet into the ‘footer.php’ file within your theme’s directory. To embark on this endeavor, follow these steps:

1. Access the Dashboard Login of your website.
2. Navigate to the ‘Appearance’ section.
3. Opt for the ‘Theme Editor’ feature.
4. Within this interface, pinpoint and open the ‘footer.php’ file.
5. Proceed to append the provided jQuery code snippet immediately before the closing </body> tag.

By diligently adhering to these directives, you shall seamlessly infuse the jQuery functionality into your web framework. This dynamic addition is poised to contribute to the envisaged show/hide sticky menu behavior.

<script>
(function($) {
jQuery(window).load(function(){	

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {	
	if($(window).scrollTop() > 10){		
		var currentScrollPos = window.pageYOffset;
	if (prevScrollpos > currentScrollPos) {	
	
// $(".site-header").css('top','0');       // activate this if theme menu like news/ magazines (mega menu type);
$(".site-header").css('position','fixed');
$(".site-header").css('z-index','999');
// $(".site-content").css('padding','105px 0');	   // main content layout section after menu replace unique class or id
$("#masthead").addClass("nav_hi_"); //add unique id/class hear (if id start with '#' or class start with '.');
$(".site-header").addClass("menuset_");

	} else {
	// $(".site-header").css('top','50px');            // activate this if theme menu like news/ magazines (mega menu type);
	$(".site-header").css('position','');
	// $(".site-content").css('padding','');       // main content layout section after menu replace unique class or id
	$("#masthead").removeClass("nav_hi_"); //add unique id/class hear (if id start with '#' or class start with '.');
	$(".site-header").removeClass("menuset_");	
	}
	prevScrollpos = currentScrollPos;
}
else{
	$(".navbar-main").css('top','');
	$(".navbar-main").css('position','');
	$("#nav-down").removeClass("nav_hi_");
	$(".navbar-main").removeClass("menuset_");
}	
}	
});
}(jQuery));
</script>

Step 3 – Link jQuery to the Menu

In this phase, we establish a vital linkage between jQuery and your menu. By meticulously following these instructions, you will seamlessly intertwine the two components. Here’s how you proceed:

1. Locate the specific code snippet within your jQuery script.
2. Within your ‘footer.php’ file, pinpoint the designated section where you initially placed the jQuery code.
3. Identify the segment marked as ‘#masthead’ within the jQuery code. At this juncture, you have two options: a) Replace it with the ‘id’ or ‘class’ name you opted for in the initial step; b) If you’ve created a unique class within ‘header.php,’ utilize that unique class instead of ‘#masthead’.

By methodically executing these directives, you forge a seamless connection between your customized jQuery script and the designated menu component. Reference the accompanying image for clarity and guidance:

Step 4 – Verify the Functionality

Having conscientiously followed the preceding three steps, you are now poised to assess the efficacy of your endeavors. By undertaking this verification process, you will ascertain the successful integration of the jQuery code and confirm the synchronization between your website’s header section and the jQuery script. Here’s the sequence of actions:

• As a preliminary measure, ensure that the jQuery code has been seamlessly incorporated into your ‘footer.php’ file, alongside the replacement of the designated code segment.
• With these adjustments in place, refresh your website to initiate the assessment.
• Observe the scroll behavior: When you scroll down, the menu bar should gracefully vanish momentarily, while scrolling up should result in its swift reappearance.

This stage is pivotal in gauging the accurate functioning of the scroll-triggered show/hide menu. The harmonious synchronization between your jQuery script and the header section is a testament to your meticulous efforts.

Should you encounter any discrepancies in the intended behavior, first scrutinize the ‘id’ or ‘class’ used in your script to ensure proper connectivity. If necessary, carry out a systematic review and, if needed, revisit the preceding steps. Rest assured, this process is well-proven and effectively employed on our own website to achieve seamless scroll-based navigation.

Step 5 – Locate the Main Page Content Area

Concurrently, it’s imperative to familiarize yourself with the primary webpage content section, which commences immediately subsequent to the header menu. To accomplish this, engage the “inspect” functionality within your web browser. Launch the desired website and embark on a quest to identify the entirety of the content section. Visual assistance is available in the image provided below for your reference.

Simply focus on acquiring the main content section of this page, encapsulated within a distinctive ‘id’ or ‘class.’ It is imperative that this identifier maintains its uniqueness. Should you encounter a situation where the ‘id’ or ‘class’ lacks uniqueness, you have the option to manually introduce a new class within the ‘header.php’ file, precisely within the location encompassing the main page content section.

Step 6 – Substitution of ‘site-content’ with Page Main Content Identifier

Now, let’s proceed with the final step in this process. As you’ve already integrated the jQuery code into the ‘footer.php’ file, your next action involves locating the ‘site-content’ code snippet. Replace this particular code snippet with the identifier you acquired during step 4. This replacement serves as the seamless transition between the designated ‘site-content’ section and the unique identifier representative of your page’s main content.

Crafting the Scroll-Activated Show/Hide Sticky Menu in WordPress Without Plugin: A Dynamic Animated Header Menu Through jQuery Techniques

Through a symphony of jQuery attributes, we’ve engineered a scroll-responsive show/hide sticky menu that transcends mere functionality, breathing life into your website’s header navigation. This transformational guide has been curated to seamlessly usher this captivating feature into your WordPress realm.

Take heed of this important consideration: Upon successfully traversing each step outlined herein, the culmination of code and function yields a captivating show/hide sticky menu, poised to elegantly reveal itself upon scroll. However, a small yet noteworthy option exists for those who seek an even cleaner coding approach. You’re encouraged to further refine this jQuery code, seamlessly weaving it into your website’s header area and the crucial main content section. For optimal code organization and tidiness, consider housing this enhanced code within a dedicated ‘.js’ file.

Your appreciation for this guide is greatly acknowledged. Should you desire more insights, we’re readily accessible on platforms such as Twitter and Facebook. Your pursuit of dynamic website enhancements is a journey we’re thrilled to accompany you on.