Code – Michele Born https://micheleborn.com Front-end developer Mon, 19 Feb 2024 00:20:11 +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 Code – 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 Github Page https://micheleborn.com/2023/10/12/github-page/ https://micheleborn.com/2023/10/12/github-page/#respond Thu, 12 Oct 2023 04:15:15 +0000 https://micheleborn.com/?p=44 It is still possible to host a personal website/portfolio on GitHub Pages that is publicly accessible at username.github.io. This feature has been and continues to be popular among developers and other GitHub users.

I am only ever on github once in a blue moon. However, I don’t like it one bit when my user page is just blank. So, I took the time to actually put something in there and I am leaving a few notes-to-self here – because there might be another 3 years before I’m in there again.

Create a New Repository:

Go to GitHub and create a new repository.

The repository name must be username.github.io where username is your GitHub username.

Add Content:

Clone the repository to your computer.

git clone https://github.com/username/username.github.io.git

Navigate to the repository directory.

cd username.github.io

Add an index.html file (or a Jekyll theme if you’re familiar with it). This index.html file will be the main page of your website.

Add content to the index.html.

Push to GitHub:

Add the file to git.

git add index.html

Commit the changes.

git commit -m "Initial commit"

Push the changes to GitHub.

git push origin master

Access Your Website:

https://username.github.io/

And here’s what my github site looks like:

https://micheleborn.github.io

]]> https://micheleborn.com/2023/10/12/github-page/feed/ 0 44 GitHub profile README https://micheleborn.com/2023/10/01/github-profile-readme/ https://micheleborn.com/2023/10/01/github-profile-readme/#respond Sun, 01 Oct 2023 04:36:06 +0000 https://micheleborn.com/?p=53 1. Set Up:
  1. Create a new repository named the same as your GitHub username (e.g., username/username).
  2. This repository should have a README.md file. This README will be displayed on your GitHub profile page.

2. Editing Content:

  1. Go to the repository you created.
  2. Click on the README.md file.
  3. Click the pencil icon (Edit this file).
  4. Edit the content using Markdown syntax.
  5. Describe your changes in the commit summary and description.
  6. Click “Commit changes”.

3. Viewing Changes:

Go to your GitHub profile by clicking on your profile picture on the top right corner and selecting “Your profile”. You’ll see the content of the README.md displayed on your profile.

For both GitHub Pages and GitHub profile README, you can also use git commands (clone, commit, push, etc.) to manage and update your content if you’re familiar with the command line or use a GUI git client.

]]> https://micheleborn.com/2023/10/01/github-profile-readme/feed/ 0 53 Style for dark mode https://micheleborn.com/2023/08/24/hello-world/ https://micheleborn.com/2023/08/24/hello-world/#comments Thu, 24 Aug 2023 00:37:22 +0000 https://micheleborn.com/?p=1 I’m currently working on the dark and light mode versions of this page. Here’s how I’ve styled it – using local storage so that it remembers the user decision. 

<script>
    const toggleBtn = document.getElementById('toggle-btn');
    const body = document.body;
    const isDarkMode = JSON.parse(localStorage.getItem('isDarkMode'));

    if (isDarkMode) {
      body.classList.add('dark-mode');
    }

    toggleBtn.addEventListener('click', function () {
      body.classList.toggle('dark-mode');
      localStorage.setItem('isDarkMode', body.classList.contains('dark-mode'));
    });
  </script>

CSS:

  /* Light Mode CSS */
  body {
    background-color: var(--light-background);
    color: var(--light-primary);
  }

body a {
    color: var(--dark-link);
  }

  /* Dark Mode CSS */
  body.dark-mode {
    background-color: var(--dark-background);
    color: var(--dark-primary);
  }

  body.dark-mode a {
    color: var(--dark-link);
  }
]]> https://micheleborn.com/2023/08/24/hello-world/feed/ 1 1