Tag Archives: Development

Creating a WordPress RSS feed for custom terms

A quick break from the SharePoint posts to share something that I couldn’t find a solution to on the internet.

In WordPress, there is no out-of-the-box RSS feed for custom post types filtered by taxonomy terms. If I’m creating a custom post type for news items and within that, I create a taxonomy to tag news with categories, there is no RSS option to show only news items of a single category.

This can be limiting, especially if you are using MailChimp to send out newsletters per news category. MailChimp has a great feature in which it will automate a regular newsletter from an RSS feed.

So, the only way I found to achieve this without using any custom plugins, was to create a custom RSS feed.

Register the RSS feed

I followed this excellent post on WPBeginner on how to register and create a custom RSS page. In the functions.php file, we register our custom RSS feed:

add_action('init', 'cdbcustomRSS');
function cdbcustomRSS(){
        add_feed('newscat', 'cdbcustomRSSFunc');
}
function cdbcustomRSSFunc(){
        get_template_part('rss', 'newscat');
}

Create a new RSS file

As I registered this as “newscat”, I then create a new file in my theme called “rss-newscat.rss”. This is the place where WordPress will look for the custom RSS feed.

To see this page, navigate to [WordPress URL]/feed/newscat. You may have to reset your rewrite rules to see this page. Re-save your permalinks page to refresh this.

Variables

I want to pick up a category from the URL so I’m going to use the following line to grab the “category” variable.

$cdbcat = $_GET['category'];

At the start of the file, I’m also going to set variables for the custom post type and the taxonomy name. I have hard-coded these but you could also pass them through the URL if required.

$cdbposttype = 'news_item';
$cdbtaxonomy = 'news_item';

Header and RSS format

We then define the header and feed in normal RSS format. A good place to find the clean starter RSS code is on this WPBeginner post.

<?php
//headers
header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
//main body
?>
<rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        <?php do_action('rss2_ns'); ?>>
<channel>
        <title>My News - Feed</title>
        <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
        <link><?php bloginfo_rss('url') ?></link>
        <description><?php bloginfo_rss('description') ?></description>
        <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
        <language><?php echo get_option('rss_language'); ?></language>
        <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
        <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
        <?php do_action('rss2_head'); ?>

Looping through the posts

We can then loop through the posts in the taxonomy and custom post type. Each time we compare the term with the category in the variable. If the category matches, we output the RSS for the post.

<?php
//get news_item terms
$custom_terms = get_terms( $cdbtaxonomy);
//get posts
foreach($custom_terms as $custom_term) {
    //echo var_dump($custom_term);
    wp_reset_query();
    $args = array('post_type' => $cdbposttype,
        'tax_query' => array(
            array(
                'taxonomy' =>  $cdbtaxonomy,
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
                                
        ),
        //order of posts
        'order' => 'DESC',
        'orderby' => 'modified',
    );
    $loop = new WP_Query($args);

    while($loop->have_posts()) : $loop->the_post();
        if($custom_term->name == $cdbcat){
            ?>
                <item>
                        <title><?php the_title_rss(); ?></title>
                        <link><?php the_permalink_rss(); ?></link>
                        <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
                        <dc:creator><?php the_author(); ?></dc:creator>
                        <guid isPermaLink="false"><?php the_guid(); ?></guid>
                        <description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
                        <content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
                        <?php rss_enclosure(); ?>
                        <?php do_action('rss2_item'); ?>
                </item>
        <?php
        }
    endwhile;
}
?>

The feed should now work using the URL: [wordpressURL]/feed/newscat?category=My%20Category

Conclusion

While this isn’t most efficient way to do it, it does return the desired results. I will look forward to your thoughts and comments on how this can be improved!

Full Code

<?php
/**
 * Template Name: Custom RSS Template for News Categories - newscar
 * By Cloud Design Box Ltd 2017
 */
 // get variables from url
 $cdbcat = $_GET['category'];
 //set post type and taxonomy name
 $cdbposttype = 'news_item';
 $cdbtaxonomy = 'news_item';

//headers
header('Content-Type: '.feed_content_type('rss-http').'; charset='.get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="'.get_option('blog_charset').'"?'.'>';
//main body
?>
<rss version="2.0"
        xmlns:content="http://purl.org/rss/1.0/modules/content/"
        xmlns:wfw="http://wellformedweb.org/CommentAPI/"
        xmlns:dc="http://purl.org/dc/elements/1.1/"
        xmlns:atom="http://www.w3.org/2005/Atom"
        xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
        xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
        <?php do_action('rss2_ns'); ?>>
<channel>
        <title>My News - Feed</title>
        <atom:link href="<?php self_link(); ?>" rel="self" type="application/rss+xml" />
        <link><?php bloginfo_rss('url') ?></link>
        <description><?php bloginfo_rss('description') ?></description>
        <lastBuildDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_lastpostmodified('GMT'), false); ?></lastBuildDate>
        <language><?php echo get_option('rss_language'); ?></language>
        <sy:updatePeriod><?php echo apply_filters( 'rss_update_period', 'hourly' ); ?></sy:updatePeriod>
        <sy:updateFrequency><?php echo apply_filters( 'rss_update_frequency', '1' ); ?></sy:updateFrequency>
        <?php do_action('rss2_head'); ?>
<?php
//get news_item terms
$custom_terms = get_terms( $cdbtaxonomy);
//get posts
foreach($custom_terms as $custom_term) {
    //echo var_dump($custom_term);
    wp_reset_query();
    $args = array('post_type' => $cdbposttype,
        'tax_query' => array(
            array(
                'taxonomy' =>  $cdbtaxonomy,
                'field' => 'slug',
                'terms' => $custom_term->slug,
            ),
                                
        ),
        //order of posts
        'order' => 'DESC',
        'orderby' => 'modified',
    );
    $loop = new WP_Query($args);

    while($loop->have_posts()) : $loop->the_post();
        if($custom_term->name == $cdbcat){
            ?>
                <item>
                        <title><?php the_title_rss(); ?></title>
                        <link><?php the_permalink_rss(); ?></link>
                        <pubDate><?php echo mysql2date('D, d M Y H:i:s +0000', get_post_time('Y-m-d H:i:s', true), false); ?></pubDate>
                        <dc:creator><?php the_author(); ?></dc:creator>
                        <guid isPermaLink="false"><?php the_guid(); ?></guid>
                        <description><![CDATA[<?php the_excerpt_rss() ?>]]></description>
                        <content:encoded><![CDATA[<?php the_excerpt_rss() ?>]]></content:encoded>
                        <?php rss_enclosure(); ?>
                        <?php do_action('rss2_item'); ?>
                </item>
        <?php
        }
    endwhile;
}
?>
</channel>
</rss>

Creating a picture library slideshow using jQuery Cycle2 and the SharePoint framework

In this post, I wanted to show how you can modify the SharePoint framework Hello World web part and add other custom JavaScript libraries to create a simple slideshow.

spfx

Prerequisites

I’m going to start my tutorial after following these steps:

Setup SharePoint Tenant
Setup your machine
HelloWorld WebPart
HelloWorld, Talking to SharePoint

Once that is all working fine, you should have something that looks like this:

spfx-slideshow01

Note: In the solution below, I have removed some of the HTML rendered in the SolutionNameWebPart.ts file (optional):

this.domElement.innerHTML = `
<div class="${styles.solutionName}">
  <div class="${styles.container}">
    <div id="spListContainer" />
  </div>
</div>`;

Pull in images from SharePoint picture library

Create a picture library in your SharePoint site called “Slideshow”. Upload a couple of images into this library for testing purposes.

Inside your project, open up SolutionNameWebPart.ts (found inside your WebPart folder). Change the REST API call so that the picture library item URLs are fetched. Currently the REST query (found in the _getListData function) is pulling list and library names, change it to:

this.context.pageContext.web.absoluteUrl + "/_api/web/lists/GetByTitle('slideshow')/Items?$select=EncodedAbsUrl"

This will return the picture library item URLs.

Add the EncodedAbsUrl as a string to the ISPList object:

export interface ISPList {
  Title: string;
  Id: string;
  EncodedAbsUrl: string;
}

In the “_renderList” function, change the item loop to this:

items.forEach((item: ISPList) => {
   html += `<img src="${item.EncodedAbsUrl}" alt="image" />`;
});

This will now use the EncodedAbsUrl as the image location. Running this using gulp serve should now show the images from the picture library. You may want to add in some mock data for local tests.

spfx-slideshow02

Making it responsive

The images are rendered at their actual size. Some CSS is required to make the images responsive. Add the class ${styles.cdbImage} to the image tag.

html += `<img src="${item.EncodedAbsUrl}" class="${styles.cdbImage}" alt="image" />`;

Open the SolutionName.module.scss file and add the following code inside the last brace.

.cdbImage{width:100%;height:auto;}

Serve the files again and the images will now be responsive.

spfx-slideshow03

Adding jQuery and Cycle2

Download using Node Package Manager

When adding common JavaScript libraries to projects, Node Package Manager is an excellent tool to quickly bundle items. Run the following nodeJS package manager commands:

npm install jquery

npm install jquery-cycle-2

Two extra folders are now created under “node_modules”.

Install TypeScript definitions

In order to use these libraries in TypeScript, a definition file is required for IntelliSense and compilation. jQuery can be added via the TypeScript definition tool in the nodeJS command line:

tsd install jquery –save

jQuery Cycle2 is not available via this command line but can be downloaded from here:

Github jQuery TypeScript

Download it and add it to a new folder called jquerycycle under the “typings” folder. The typings folder contains all the TypeScript definition files. jQuery has automatically been added here. However we need to manually add the Cycle2 definition.

In the root of the typings folder, open the file named tsd.d.ts. This file controls all the definitions which are used in the project. jQuery has already been added, manually add a new line for jQuery Cycle2.

/// <reference path="jquery/jquery.d.ts" />
/// <reference path="jquerycycle/jquery.cycle.d.ts" />

Add libraries to project

Open the config.json file (under the config folder) in the project. This lists all the external references. jQuery and Cycle2 need to be added here so they can be used in the project. In the “externals” section, add:

 "jquery": "node_modules/jquery/dist/jquery.js",
 "jquery-cycle": "node_modules/jquery-cycle-2/src/jquery.cycle.all.js"
 

The libraries can now be included in the project. Go back to the solutionNameWebPart.ts file and add:

import * as myjQuery from 'jquery';
require('jquery-cycle');
 

The object myjQuery should be a unique name for your project to avoid conflicts. jQuery cycle is added using require as it has a dependency on jQuery.

At the end of the _renderList function in the web part class, add the following code to initialise the slideshow:

myjQuery( document ).ready(function() {
    myjQuery('#spListContainer').cycle();
});
 

Refreshing the page, should now give you a responsive slideshow.

spfx

The future of SharePoint

The future of SharePoint event took place last night live from San Francisco. It was a live online event open to all which was watched by thousands of SharePoint fans across the globe. Microsoft renewed its commitment to SharePoint and the SharePoint brand by announcing the renaming of the sites tile in Office 365 to SharePoint and the release of a new SharePoint mobile app.

SP2016mobileteamsite

It was a very exciting glimpse into the future of SharePoint (both on-premises and online). A completely new revamped UI for team and publishing sites and a slick editing experience. One of the flaws with the current SharePoint experience is the inheritance of older SharePoint site templates and libraries which has only incrementally improved over time. Frustratingly this has left users with a poor mobile experience and a clunky, more complex editing process. Even the current SharePoint 2013 mobile site looks more like an ancient WAP site designed for a Nokia 7110. Below is a sneak peak as to what the new team site may look like. Above is a preview of the new SharePoint app.

SP2016teamsite

New document library experience

This has already rolled out to some tenancies. It gives a fresh look to document libraries which puts them in-line with the OneDrive experience and the SharePoint mobile view. The classic view will still be supported if you are using JS client side rendering, workflows or specific custom views. One downside to the new experience is the loss of any branding, however you could add document libraries to pages if you wanted to keep this. Users can pin files to the top of the page and get really nice previews of documents. Administrators can override end users to choose either the classic or new view of document libraries (see details here).

Design and development

The new improvements in the interface mean not only a fully responsive design but also a mobile app experience on iOS, Android and Windows. SharePoint is also moving away from the iframe app part model allowing more fluid and responsive web parts. For designers and developers there is now a new SharePoint framework (to be released later this year) which doesn’t depend on Visual Studio or any server-side development. Using JavaScript open source libraries we will soon be able to create design experiences which apply to both the browser and mobile apps.

There was several indications that design was moving this way over the last few years. Check out my earlier posts on moving from custom master pages to JS actions and client side rendering. Using these client side technologies was the first step in preparing ourselves for the new client side rendering experience for the next generation of SharePoint portals. I’m very excited to get stuck into the new SharePoint framework technologies (please release it soon Microsoft!). If you can’t wait to get started, you can start by learning the new technologies which will be used to develop against the SharePoint framework such as nodejs, Yeoman, Gruntjs and all the open source JavaScript frameworks which interest you. There is a good post on how to get hold of all these applications and packages on this blog post by Stefan Bauer. You can also view the full development lifecycle processes that Microsoft recommend in their latest video previewing the new framework below.



Microsoft Flow

Microsoft Flow is a new tool in the SharePoint toolbox. It’s a new way to get data into SharePoint and perform workflows using custom logic. It doesn’t replace InfoPath or SharePoint Designer but I can see many uses for it in a business process environment and sales. It extends workflow functionality out of SharePoint using templates or custom written apps. For examples you can have a flow which picks up tweets from Twitter and puts them into a SharePoint list. Very interesting to see how this product develops with SharePoint. You can find out more on the flow website.

Microsoft PowerApps

Create your own mobile apps in a few simple steps from lists and libraries in SharePoint without having to write any code. This could be a mobile app or just a web app. In fact you can do this from the browser from any list in a few simple steps. This could be a SharePoint list view or a web part. The PowerApps will be available from within the SharePoint app. I’m assuming you will be able to pin these apps to your start screen like you can with OneNote notebooks and pages. You can find out more about Power Apps on the website.

More updates to come…