Category: Web Dev (Page 2 of 3)

WordPress reserved terms you should never use

While developing WordPress theme or plugin we use different WordPress keywords or terms, additionally while handling forms fields and custom post types we have to consider what names we can use or not. The restricted names are called reserved terms.

WordPress itself reserves few keywords or terms which we can not use in our coding. Using these reserved or restricted terms just break the functionality what we intend
to get.

You should avoid using these reserved terms in the following scenarios:

  1. Passing a term through a $_GET or $_POST array.
  2. Registering a taxonomy or post type slug
  3. Handling query variables

WordPress Codex URL: https://codex.wordpress.org/Reserved_Terms

How to upload image and PDF file using PHP

Here is a PHP script that allows users to upload image and PDF files with a maximum size of 5 MB. The uploaded files will be renamed using the current timestamp:

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_FILES["file"])) {
    $allowedExtensions = array("jpg", "jpeg", "png", "pdf");
    $maxFileSize = 5 * 1024 * 1024; // 5 MB in bytes

    $targetDirectory = "uploads/";
    $timestamp = time();
    $targetFileName = $timestamp . "_" . basename($_FILES["file"]["name"]);
    $targetPath = $targetDirectory . $targetFileName;
    
    $fileExtension = strtolower(pathinfo($targetFileName, PATHINFO_EXTENSION));

    if (in_array($fileExtension, $allowedExtensions) && $_FILES["file"]["size"] <= $maxFileSize) {
        if (move_uploaded_file($_FILES["file"]["tmp_name"], $targetPath)) {
            echo "File uploaded successfully.";
        } else {
            echo "Error uploading file.";
        }
    } else {
        echo "Invalid file. Allowed file types: jpg, jpeg, png, pdf. Max file size: 5 MB.";
    }
}
?>

This is HTML form for file upload.

<!DOCTYPE html>
<html>
<head>
    <title>File Upload</title>
</head>
<body>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" accept=".jpg, .jpeg, .png, .pdf" required>
        <button type="submit">Upload</button>
    </form>
</body>
</html>

Here’s what the script does:

  1. It checks if the form has been submitted and if a file has been uploaded.
  2. It sets the allowed file extensions ($allowedExtensions) and maximum file size ($maxFileSize).
  3. It defines the target directory ($targetDirectory), generates a new file name using the current timestamp, and constructs the target path.
  4. It checks if the uploaded file has an allowed extension and if its size is within limits.
  5. If the file meets the criteria, it moves the file to the target directory using move_uploaded_file() and echoes a success message.
  6. If the file does not meet the criteria, it echoes an error message.
  7. The HTML form allows users to select a file with the accept attribute specifying the allowed file types. After submitting the form, the PHP script processes the file upload.

Get total of MySQL column and show highest totals

To get the total of a MySQL field and then select the three highest totals from the table, you can use the following PHP script:

<?php
// Assuming you have already established a MySQL connection

// Retrieve the total of a field and select the three highest totals
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";

// Create a new MySQL connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check the connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Prepare and execute the SQL statement to get the total and select three highest totals
$sql = "SELECT SUM(field_name) AS total FROM table_name GROUP BY field_name ORDER BY total DESC LIMIT 3";
$result = $conn->query($sql);

if ($result && $result->num_rows > 0) {
    echo "Three highest totals: <br>";
    while ($row = $result->fetch_assoc()) {
        $total = $row['total'];
        echo $total . "<br>";
    }
} else {
    echo "No records found.";
}

// Close the database connection
$conn->close();
?>

Make sure to replace ‘your_username’, ‘your_password’, ‘your_database_name’, ‘field_name’, and ‘table_name’ with the actual values for your MySQL configuration and table structure.

In this script, the SQL query uses the SUM function to calculate the total of the specified field (field_name) and groups the results by the field values. It then orders the results in descending order of the totals and limits the result set to the top three rows.

The script retrieves the three highest totals from the query results and prints them on the screen. If no records are found, it displays a message indicating that no records were found.
Please make sure to adjust the SQL query and table/column names according to your specific table structure and requirements.

Get total of a mysql field and then select 3 all records which have heighest total from the table

To get the total of a MySQL field and then select all records that have the highest total from the table, you can use the following PHP script:

<?php
// Assuming you have already established a MySQL connection

// Retrieve the total of a field and select all records with the highest total
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";

// Create a new MySQL connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check the connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Prepare and execute the SQL statement to get the total and select all records with the highest total
$sql = "SELECT *, SUM(field_name) AS total FROM table_name GROUP BY id HAVING total = (SELECT MAX(total) FROM (SELECT SUM(field_name) AS total FROM table_name GROUP BY id) AS temp)";
$result = $conn->query($sql);

if ($result && $result->num_rows > 0) {
    echo "Records with the highest total: <br>";
    while ($row = $result->fetch_assoc()) {
        // Access the record data
        $id = $row['id'];
        $fieldValue = $row['field_name'];
        $total = $row['total'];

        // Process or display the record as needed
        echo "ID: $id, Field Value: $fieldValue, Total: $total <br>";
    }
} else {
    echo "No records found.";
}

// Close the database connection
$conn->close();
?>

Make sure to replace ‘your_username’, ‘your_password’, ‘your_database_name’, ‘field_name’, and ‘table_name’ with the actual values for your MySQL configuration and table structure.

In this script, the SQL query uses the SUM function to calculate the total of the specified field (field_name) for each record in the table. It then groups the results by the id column and selects only those records where the total is equal to the maximum total value across all records.
The script retrieves the records with the highest total from the query results and prints them on the screen. If no records are found, it displays a message indicating that no records were found. Please make sure to adjust the SQL query and table/column names according to your specific table structure and requirements.

How to compare any changed data of HTML table among different rows

In a HTML table compare every column data of every row. if any column data has changed value with respect to previous row then highlight that data.

We can achieve this using JavaScript. Here’s a basic example of how you could implement this functionality:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Highlight Changed Data</title>
<style>
    .changed {
        background-color: yellow;
    }
</style>
</head>
<body>

<table id="data-table">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Initial Value 1</td>
            <td>Initial Value 2</td>
            <td>Initial Value 3</td>
        </tr>
        <tr>
            <td>Changed Value 1</td>
            <td>Changed Value 2</td>
            <td>Changed Value 3</td>
        </tr>
        <!-- Add more rows as needed -->
    </tbody>
</table>

<script>
    window.onload = function () {
        const table = document.getElementById('data-table');
        const rows = table.getElementsByTagName('tr');

        for (let i = rows.length - 1; i > 0; i--) {
            const currentRow = rows[i];
            const previousRow = rows[i - 1];

            if (!previousRow) {
                break; // Exit loop if no previous row (first row)
            }

            const currentCells = currentRow.getElementsByTagName('td');
            const previousCells = previousRow.getElementsByTagName('td');

            for (let j = 0; j < currentCells.length; j++) {
                const currentCell = currentCells[j];
                const previousCell = previousCells[j];

                if (currentCell.textContent !== previousCell.textContent) {
                    currentCell.classList.add('changed');
                }
            }
        }
    };
</script>

</body>
</html>

This code compares each cell of each row with the corresponding cell of the previous row. If the content of a cell is different from the content of the corresponding cell in the previous row, it adds a changed class to highlight the change. You can customise the appearance of the changed cells by modifying the CSS class .changed.

Export MySQL data into CSV using PHP

To fetch data from a MySQL database and export it to CSV using PHP, you can follow these steps:

<?php
// Database connection details
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database_name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Fetch data from your table
$sql = "SELECT * FROM your_table";
$result = $conn->query($sql);

// Check if any rows are returned
if ($result->num_rows > 0) {
    // Define CSV filename
    $filename = "exported_data.csv";

    // Set headers for CSV download
    header('Content-Type: text/csv');
    header('Content-Disposition: attachment; filename="' . $filename . '"');

    // Create a file pointer connected to the output stream
    $output = fopen('php://output', 'w');

    // Output CSV header
    $header = array('ID', 'Name', 'Email');
    fputcsv($output, $header);

    // Output data from rows
    while ($row = $result->fetch_assoc()) {
        fputcsv($output, $row);
    }

    // Close the file pointer
    fclose($output);
} else {
    echo "No data found";
}

// Close the database connection
$conn->close();
?>

Explanation:

  1. Database Connection: Replace your_username, your_password, your_database_name, and your_table with your actual database credentials and table name.
  2. Fetch Data: The SQL query retrieves data from the specified table.
  3. CSV Headers: The header function is used to set headers for CSV download.
  4. CSV File Creation: We use fopen to create a file pointer connected to the output stream (php://output). Then, fputcsv is used to write the CSV header and data.
  5. Download CSV: Headers are set to prompt the user to download the CSV file with the specified filename.

When you run this script, it will fetch data from your MySQL table and export it to a CSV file, which will be downloaded by the user.

Import CSV data into MySQL using PHP

Here’s a detailed example of how to import data from a CSV file into a MySQL database using PHP. The script processes each row one by one, displays a success message for each successfully inserted row, and stops the process if any error occurs, showing the error message.

Prerequisites:

  1. Ensure you have a MySQL database and table set up to store the CSV data.
  2. Adjust the database connection details and table schema as needed.

Database Setup:

Assume you have a MySQL table named csv_import with columns id, name, and email.

CREATE TABLE csv_import (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL
);

Here’s a PHP script that handles the CSV import process:

<?php
// Database connection details
$servername = "your_servername";
$username = "your_username";
$password = "your_password";
$dbname = "your_dbname";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if (isset($_POST['submit'])) {
    $csvFile = $_FILES['csv']['tmp_name'];

    if (is_file($csvFile)) {
        // Open the CSV file
        if (($handle = fopen($csvFile, "r")) !== FALSE) {
            $rowNumber = 0;

            // Process each row of the CSV file
            while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {
                $rowNumber++;

                // Skip the header row
                if ($rowNumber == 1) {
                    continue;
                }

                $name = $conn->real_escape_string($data[0]);
                $email = $conn->real_escape_string($data[1]);

                // Insert the data into the database
                $sql = "INSERT INTO csv_import (name, email) VALUES ('$name', '$email')";
                
                if ($conn->query($sql) === TRUE) {
                    echo "Row $rowNumber inserted successfully.<br>";
                } else {
                    echo "Error inserting row $rowNumber: " . $conn->error . "<br>";
                    break;
                }
            }

            fclose($handle);
        } else {
            echo "Error opening the CSV file.";
        }
    } else {
        echo "Invalid file.";
    }
}
$conn->close();
?>
Here the HTML to upload CSV file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV Import</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        <label for="csv">Choose CSV file:</label>
        <input type="file" name="csv" id="csv" required>
        <button type="submit" name="submit">Import CSV</button>
    </form>
</body>
</html>

Explanation:

  1. Database Connection: Establish a connection to the MySQL database using the mysqli extension.
  2. Form Handling: The script checks if the form is submitted and processes the uploaded CSV file.
  3. CSV File Processing: It opens the CSV file and processes each row one by one using a while loop.
    It skips the header row.
    It escapes the data using $conn->real_escape_string to prevent SQL injection.
    It inserts the data into the csv_import table.
    It shows a success message for each inserted row.
    If any error occurs, it shows an error message and stops the process.
  4. HTML Form: The form allows the user to upload a CSV file.

Print total of a variable inside while loop outside of the loop

To accumulate values from a MySQL query inside a while loop and then calculate the total value outside the loop, you can use a variable to store the total value while iterating through the records. Here’s an example in PHP:

<?php
// Your database connection parameters
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$database = "your_database";

// Create a connection to the MySQL database
$conn = new mysqli($servername, $username, $password, $database);

// Check the connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$totalValue = 0; // Initialize total value

// Your SQL query
$sql = "SELECT value_column FROM your_table_name WHERE your_conditions";

$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        // Access value column and accumulate the values
        $value = $row['value_column'];
        $totalValue += $value;
        
        // You can also store values in an array if needed
        // $valuesArray[] = $value;
    }
    
    echo "Total value: $totalValue"; // Print total value
    // If you stored values in an array, you can print or manipulate the array here
    // print_r($valuesArray);
} else {
    echo "No records found.";
}

// Close the database connection
$conn->close();
?>

This PHP script fetches records from the database, accumulates the values from a specific column (value_column), and calculates the total value by adding up these values inside the while loop. After the loop, it prints the total value obtained. If you need to store these values in an array for further processing, you can uncomment and modify the $valuesArray[] = $value; line accordingly.

Important WordPress theme functions every developer needs

When we develop any custom WordPress theme we need to use different
functions. We need to write those functions in functions.php file of the
custom theme. I have prepared some of those basic functions and
included in the functions.php file. I have mentioned the usage /
procedure to use the function in the same file.

You have to download the functions.php file and put it inside your theme folder.

Following functions are included in functions.php file.

  1. Navigation / Menu
  2. Remove default UL markup from wp_nav_menu output
  3. Enable featured image with custom dimension
  4. Image compression while uploading
  5. Remove width and height attributes from inserted images
  6. Enable sidebar widget
  7. Shorten post / page title by word limit
  8. Shorten excerpt by word limit
  9. Shorten content by word limit
  10. Strip images from content
  11. Display the content of a page by page ID
  12. Display the content of a page by page slug
  13. Anti spam email shortcode inside content editor
  14. Change default sender email address for generated emails
  15. Change default sender name for generated emails
  16. Remove default widgets
  17. Remove WordPress version from Head
  18. Remove login error message on login page
  19. Enqueue script in footer
  20. Enqueue CSS in header
  21. Disable admin bar for all users but admins in the front end

Github URL: https://github.com/sanjaybhowmick/wp-useful-functions

Boosting loading speed of your WordPress website

In the current landscape, WordPress enjoys widespread use, leading to a surge in website creation. As this platform sees continuous growth with individuals and businesses joining in, it’s crucial to acknowledge the factors influencing website loading speed.

Optimizing your website’s loading speed is pivotal. Here are some essential considerations:

  1. Optimized Plugins and Themes: Utilize plugins and themes specifically tailored for SEO optimization to ensure smoother performance.
  2. Image Optimization: Optimize images to align with SEO requirements for faster access to crucial information.
  3. Caching Plugins: Implement caching plugins to enhance site performance.
  4. Efficient Coding: Employ proper coding techniques during theme or plugin development to support loading speed.

Website loading speed significantly impacts user experience. A prolonged wait time can frustrate visitors, leading to potential site abandonment. Employing appropriate themes and plugins is instrumental in augmenting the loading speed of your WordPress site.

Optimizing Your WordPress Site:

Begin by optimizing the content on your WordPress site, ensuring it caters to search engines and users. Pay particular attention to image optimization, as visuals play a pivotal role in information accessibility.

Utilizing the Right Themes and Plugins:

Leverage plugins and themes strategically to improve loading speed without necessitating substantial alterations. For detailed insights on boosting your WordPress website’s loading speed, refer to our comprehensive post linked below.

The loading speed of your WordPress website significantly impacts its SEO performance. It’s paramount to prioritize a fast-loading site to maintain user engagement and accessibility.

Failure to address a slow-loading site could lead to loss of potential customers, affecting your business adversely. Thus, understanding how to consistently enhance loading speed for your WordPress site remains crucial.

Optimizing for Mobile and Image Efficiency:

Optimize your website for mobile devices to enhance loading speed and overall user experience. Ensure images are appropriately optimized for different screen sizes to maximize space utilization and maintain user engagement.

Improving Loading Speed Using Themes and Plugins:

Selecting the right theme and plugins can notably boost loading speed. If you’re facing connectivity issues, opting for faster themes and plugins can make a substantial difference.

Optimizing for Search Engines:

Enhance your website’s search engine rankings by leveraging tools like Yoast SEO plugin or Google XML Sitemaps plugin, both offering free solutions. These tools influence how your website appears in search engine results, contributing to improved visibility.

Emphasizing Key Information:

Include crucial details like pricing, offers, descriptions, and features on every page to captivate and retain visitor attention, ultimately boosting site traffic.

A comprehensive guide for best practices and tools to build responsive websites

In the fast-paced digital world, having a responsive website has
become a necessity. With the increasing use of mobile devices and
varying screen sizes, it’s crucial to ensure your website looks and
functions flawlessly across all platforms. In this comprehensive guide,
we’ll explore the best practices and essential tools for building
responsive websites that deliver optimal user experiences.

Why Responsive Design Matters in Today’s Digital Landscape

In today’s mobile-centric era, users expect websites to adapt
seamlessly to their devices, whether they’re browsing on a desktop,
tablet, or smartphone. Responsive design is the key to meeting these
expectations. It allows your website to automatically adjust its layout,
images, and content based on the screen size and orientation of the
device. By implementing responsive design, you provide a consistent and
user-friendly experience, regardless of how users access your website.

Key Best Practices for Building Responsive Websites

To ensure your website is responsive and provides an exceptional user experience, consider these best practices:

  1. Mobile-First Approach: Start designing and developing your website
    with the mobile experience in mind. This approach prioritizes the
    essential content and functionality for smaller screens and gradually
    adds enhancements for larger devices.
  2. Fluid Layouts: Use relative units like percentages and ems instead
    of fixed pixel values for your website’s layout. This allows elements to
    flexibly adjust and fill the available screen space, ensuring a
    seamless experience across devices.
  3. Media Queries: Employ CSS media queries to apply different styles
    and layouts based on screen size breakpoints. This technique enables you
    to optimize the appearance and functionality of your website for
    various devices.
  4. Optimized Images: Optimize your images for web usage to reduce their
    file sizes without compromising quality. Use responsive image
    techniques, such as the HTML ‘srcset’ attribute or CSS
    ‘background-size,’ to ensure images scale appropriately.
  5. Touch-Friendly Interactions: Implement touch-friendly navigation and
    interaction elements to accommodate users on touchscreen devices.
    Incorporate larger button sizes, swipe gestures, and intuitive
    touch-based controls.

Essential Tools for Building Responsive Websites

Building responsive websites becomes easier with the help of dedicated tools. Here are some essential ones to consider:

  1. CSS Frameworks: Leverage CSS frameworks like Bootstrap, Foundation, or Bulma to
    streamline your responsive web development process. These frameworks
    provide pre-built responsive components and grid systems that can
    significantly speed up development time.
  2. Responsive Testing Tools: Use online tools like Responsinator, BrowserStack, or Google’s Mobile-Friendly Test
    to preview your website across different devices and screen sizes.
    These tools help identify any responsive design issues and ensure your
    site looks great on every platform.
  3. Code Editors with Live Preview: Utilize code editors such as Visual Studio Code or Sublime Text
    that offer live preview capabilities. These features enable you to see
    instant updates to your website as you code, helping you visualize
    responsiveness in real-time.
  4. Device Emulators and Simulators: Take advantage of device emulators
    and simulators, such as the iOS Simulator or Chrome DevTools’ device
    mode, to test your website on virtual representations of different
    devices. This allows you to simulate various screen sizes and
    interactions without requiring physical devices.

By incorporating these best practices and utilizing the right tools,
you can confidently build responsive websites that provide exceptional
user experiences on any device. Remember, responsiveness is not just a
trend; it’s an essential aspect of modern web design that ensures your
website remains accessible and engaging to users in our ever-evolving
digital landscape.

« Older posts Newer posts »

© 2025 Wavesdream Blog

Theme by Anders NorénUp ↑