Hacking AI News

• by Michael Hawkes
• 18 May 2023

Having recently graduated, it seemed like a good time to try new things. Among the new things I’ve recently tried out is a WordPress theme called AI News. It’s an open source theme intended for sites that want to incorporate a ChatGPT plugin to write blog posts. I have no intention of using that plugin because I feel strongly that if it’s my blog, I should be the one writing it. That said, I liked the look of the theme and decided to give it a try.

The previous theme was called Author and I liked it quite a bit. It uses a very traditional look for a blog where there is a menu with navigation on one side and blog posts take up the rest. The AI News theme, however, features a carousel of images at the top of the page and small blocks or cards underneath showing excerpts for the posts. It’s a big change, but a good one I think.

As nice as the AI News theme is, it has some shortcomings which have necessitated some hacking to resolve. The first thing I noticed was the area for social media links didn’t allow for the possibility of including links to an Fediverse sites. Not Mastodon, Misskey, Pixelfed, Peertube, or Funkwhale. It didn’t even include an option for LinkedIn. The only social media options it allowed were Facebook, Twitter, YouTube, and Instagram, none of which interest me. Also, it uses Font Awesome to represent the icons for those organizations, but it doesn’t include icons for the federated sites. I was able to fix this by hacking the theme to use Fork Awesome instead.

Font Awesome and Fork Awesome do more or less the same thing. Each built a font with a bunch of different icons and designers can use the font in conjunction with a provided stylesheet to add the icons to their website or app. They’re very handy, but there are some differences. First of all, Font Awesome has over 2000 icons available for free and over 26,000 icons for the Pro tier. In contrast, Fork Awesome has about 800 icons. I should add there also alternatives like Fort Awesome, The Noun Project, and others where designers can find icons. The other significant difference I found, and the most important for what I wanted, was that Fork Awesome includes icons for Pixelfed, Peertube, etc, while Font Awesome doesn’t (I didn’t bother looking in the Pro tier because I’m cheap).

Fork Awesome

Uploading files

To use Fork Awesome, it’s important to download the Zip file because it includes the font in different font formats, but it also includes a stylesheet. In order to use the icons, both are needed. I downloaded the Zip, extracted it on my computer, and uploaded the forkawesome-webfont.svg file to the assets/fonts/ directory in the theme and uploaded the fork-awesome.css file to the assets/css/ directory.

functions.php

The next step involved editing the theme’s functions.php file to get it to use the new font. Under function ai_news_scripts() I changed the following line from

wp_enqueue_style('font-awesome_css',get_template_directory_uri().'/assets/css/font-awesome.css');

to

wp_enqueue_style('fork-awesome_css',get_template_directory_uri().'/assets/css/fork-awesome.css');

header.php

Following that, I had to edit the theme’s header.php file. The theme places the icons in the header, so I had to let the file know that it should be using the new icons. Among the other social media sites, I added the following code:

$mastodon_url = get_theme_mod('ai_news_social_icon_mast_url',true);
$pixelfed_url = get_theme_mod('ai_news_social_icon_pixl_url',true);
$linkedin_url = get_theme_mod('ai_news_social_icon_li_url',true);

A little further down in the header.php file I also added the following to the <div class="topbar-left"> section:

<?php if($linkedin_url != '#' && $linkedin_url != "") { ?>
                                    <li><a href="<?php echo esc_url($linkedin_url); ?>" <?php if($social_icon_target) { ?> target="_blank" <?php } ?> ><i class="fa fa-linkedin-square" title="LinkedIn" alt="LinkedIn icon"></i></a></li> 
                                <?php } ?>
<?php if($mastodon_url != '#' && $mastodon_url != "") { ?>
                                    <li><a href="<?php echo esc_url($mastodon_url); ?>" <?php if($social_icon_target) { ?> target="_blank" <?php } ?> ><i class="fa fa-mastodon" title="Mastodon" alt="Mastodon icon"></i></a></li> 
                                <?php } ?>
<?php if($pixelfed_url != '#' && $pixelfed_url != "") { ?>
                                    <li><a href="<?php echo esc_url($pixelfed_url); ?>" <?php if($social_icon_target) { ?> target="_blank" <?php } ?> ><i class="fa fa-pixelfed" title="Pixelfed" alt="Pixelfed icon"></i></a></li> 
                                <?php } ?>

customizer.php

The last file to modify to get Fork Awesome to work was customizer.php in the theme’s inc/ folder. To that, I added the following code underneath the similar code for Facebook, Twitter, etc.

	// Mastodon URL
	$wp_customize->add_setting ( 'ai_news_social_icon_mast_url', array(
		'default'           => '',
		'sanitize_callback' => 'esc_url_raw',
	) );

	$wp_customize->add_control ( 'ai_news_social_icon_mast_url', array(
		'label'    => esc_html__( 'Mastodon URL', 'ai-news' ),
		'section'  => 'ai_news_header_social_icon_section',
		'priority' => 6,
		'type'     => 'url',
		'active_callback' => 'ai_news_header_social_active_callback'
	) );

	// Pixelfed URL
	$wp_customize->add_setting ( 'ai_news_social_icon_pixl_url', array(
		'default'           => '',
		'sanitize_callback' => 'esc_url_raw',
	) );

	$wp_customize->add_control ( 'ai_news_social_icon_pixl_url', array(
		'label'    => esc_html__( 'Pixelfed URL', 'ai-news' ),
		'section'  => 'ai_news_header_social_icon_section',
		'priority' => 6,
		'type'     => 'url',
		'active_callback' => 'ai_news_header_social_active_callback'
	) );

	// LinkedIn URL
	$wp_customize->add_setting ( 'ai_news_social_icon_li_url', array(
		'default'           => '',
		'sanitize_callback' => 'esc_url_raw',
	) );

	$wp_customize->add_control ( 'ai_news_social_icon_li_url', array(
		'label'    => esc_html__( 'LinkedIn URL', 'ai-news' ),
		'section'  => 'ai_news_header_social_icon_section',
		'priority' => 6,
		'type'     => 'url',
		'active_callback' => 'ai_news_header_social_active_callback'
	) );

This adds sections for these social media outlets in the AI News Social Icon settings, which lets the theme know which links to associate with which icons.

There have also been some small tweaks to the theme’s style, but they’re fairly trivial and didn’t involve as much effort as the icons, so I’ll skip the details. I’m sure as I use the theme more, I’ll find some more things that need to be changed, but for the moment, I like what’s been done.