wp – Michele Born https://micheleborn.com Front-end developer Mon, 19 Feb 2024 00:16:34 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.2 https://i0.wp.com/micheleborn.com/wp-content/uploads/2023/09/cropped-001-bear.png?fit=32%2C32&ssl=1 wp – Michele Born https://micheleborn.com 32 32 230821308 Colorful WordPress Tags https://micheleborn.com/2024/02/19/colorful-wordpress-tags/ https://micheleborn.com/2024/02/19/colorful-wordpress-tags/#respond Mon, 19 Feb 2024 00:12:59 +0000 https://micheleborn.com/?p=75 The goal today is to get the tags on my wordpress posts to look like this:

My guidelines are:

  • Add a css tag to every tag on my list, the list being my most common tags: PHP, JS, WP, CSS and GIT
  • Add a css tag for any random tag that I may come up with in the future that matches my main tags.

It’s a very simple php bit I added to my front-page.php file, because that’s where I wanted it to show.

  <?php
    // Define tag name to CSS class mappings
    $tag_class_map = array(
        'Git' => 'git-tag',
        'php' => 'php-tag',
        'wp' => 'wp-tag',
        'css' => 'css-tag',
        'js' => 'js-tag'
    );

    // Check if there are any tags for the current post
    $tags = get_the_tags();
    if ($tags) {
        echo '<ul class="tag-list">';
        foreach ($tags as $tag) {
            // Default CSS class
            $tag_classes = 'code';

            // Check if the tag name exists in the mapping
            if (isset($tag_class_map[$tag->name])) {
                // Assign corresponding CSS class
                $tag_classes = $tag_class_map[$tag->name];
            }

            echo '<li class="' . $tag_classes . '"><a href="' . get_tag_link($tag->term_id) . '">' . $tag->name . '</a></li>';
        }
        echo '</ul>';
    }
?>

I think it looks very nice and organized and I’ve kept the default wordpress settings, meaning the user can click on a tag and use it as a filter.

Another way of setting these, would be using Javascript. I think it’s longer and messier and, in general, I prefer the PHP solution, but here’s the Javacript version:

<ul id="tag-list" class="tag-list">
    <!-- Tags will be dynamically added here -->
</ul>

<script>
    // Define tag name to CSS class mappings
    var tagClassMap = {
        'Git': 'git-tag',
        'php': 'php-tag',
        'wp': 'wp-tag',
        'css': 'css-tag',
        'js': 'js-tag'
    };

    // Function to add tags dynamically
    function addTag(tag) {
        var tagList = document.getElementById('tag-list');
        var tagClasses = tagClassMap[tag.name] || 'code'; // Default to 'code' if no matching CSS class found
        var listItem = document.createElement('li');
        listItem.className = tagClasses;
        var link = document.createElement('a');
        link.href = getTagLink(tag.term_id); // Assuming getTagLink function is defined elsewhere
        link.textContent = tag.name;
        listItem.appendChild(link);
        tagList.appendChild(listItem);
    }

    // Assuming you have an array of tag objects 'tags'
    var tags = [
        { name: 'Git', term_id: 1 },
        { name: 'php', term_id: 2 },
        { name: 'css', term_id: 3 },
        { name: 'html', term_id: 4 } // An example tag with no mapping, defaults to 'code'
    ];

    // Add each tag dynamically
    tags.forEach(function(tag) {
        addTag(tag);
    });
</script>

See you next time,

Michele

]]> https://micheleborn.com/2024/02/19/colorful-wordpress-tags/feed/ 0 75 WordPress Custom Header/Footer https://micheleborn.com/2023/10/12/wordpress-custom-header-footer/ https://micheleborn.com/2023/10/12/wordpress-custom-header-footer/#respond Thu, 12 Oct 2023 05:39:25 +0000 https://micheleborn.com/?p=57 By default, our wordpress themes will pull the file header.php and place it at the top of all of our pages.

This is a basic WordPress template structure:

<?php get_header(); ?>

<div class="container">
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
        
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <?php the_content(); ?>

    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Now, for my portfolio page – for example – I may want the header to be different. This requires 2 steps:

Create a header-portfolio.php file

Create a header-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure of “header-{any-name-we-want}.php” must be kept.

Our portfolio header may look a little like this:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

    <header>
        <div class="container">
            <h1>Hello, I am the portfolio header</h1>
            <p><?php bloginfo('description'); ?></p>

            <!-- Navigation Menu -->
            <?php 
                if (has_nav_menu('primary')) {
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'container' => 'nav',
                        'container_class' => 'main-navigation',
                        'menu_class' => 'menu',
                        'depth' => 2,
                    ));
                }
            ?>
        </div>
    </header>

Site note: In this example, I’m using a menu, which requires adding in the functions.php file. This step is not necessary if the new header doesn’t have a menu.

function register_custom_menus() {
    register_nav_menus(
        array(
            'primary' => __('Primary Menu', 'textdomain'),
        )
    );
}
add_action('after_setup_theme', 'register_custom_menus');

Create a page-portfolio.php file

Now, we must create a page-portfolio.php file where the word “portfolio” can be replaced with whatever we want, but the naming structure “page-{any-name-we-want}.php”. must be kept.

The comment at the top of the page is extremely important and not optional*

Notice how on the 3rd line we use <?php get_header(‘portfolio’); ?> , to grab our custom header.

<?php /* Template Name: Portfolio Page */ ?>

Here's what the php could look like:

<?php get_header('portfolio'); ?> 

<div class="container"> 

<h1>This is the Portfolio Page</h1> 

<?php if(have_posts()) : while(have_posts()) : the_post(); ?> 

<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> 

<?php the_content(); ?> 

<?php endwhile; endif; ?> 

</div> 

<?php get_footer(); ?>

The result should be that now our page will load the custom header (if we select “Portfolio Page” as the template!) . The same rule applies to the footer, where we’d have footer-portfolio.php and <?php get_footer(portfolio); ?> on our code!

]]> https://micheleborn.com/2023/10/12/wordpress-custom-header-footer/feed/ 0 57