Hi All,
I am new to WordPress and Newspaper – my main focus is databases. In a lot of the database forums I subscribe to, and as I suspect most of you know, it’s not uncommon for members to share code that creates a feature – not least because others then frequently take the initial entry, adapt it, then re-post. These sites also quite often also feature a sample code silo.
(@TagDiv Support, there’s a lot of really useful content on this forum but it’s limited navigation, layout and quantity of posts make it difficult to search effectively, not to mention time consuming. Can we have a Sample Code silo? Not only would it be useful for members but possibly limit you having to repeat the same or similar support requests).
BACKGROUND
I have a number of Use Cases that require elements on a web page to display simple listings of external editorial content – similar to a news ticker-type display but with no animation.
Initially, I decided that the TD Composer elements Blocks 10 & 9 were the most suitable – as they were closest to my required simplicity and would only be used for these Use Cases. However, the fact that there is no Newspaper option to duplicate a block within TD Composer, and I want minimal plugins installed, I decided to teach myself the PHP/CSS that would be required to achieve my objectives.
FUNCTIONALITY
- The link here shows two page elements that have different content and features which were created using the same Block 10;
- This involved creating new field types using ACF Custom Fields, including a post-type whose options could also be used in a PHP conditional If statement to create the variable field display within the same block;
The generic fields are headline, media outlet and published date for simple listings and other use cases have additional meta data fields; - When the headline linked is clicked on it has to a new web page and go to the external content. The published date must be that of the original editorial, not the WP posting date. This last point is important as I would be bulk uploading posts a few times a week, that will feature a spread of publication dates.
The following provides the necessary ACF Custom Fields setup, the PHP code and the CSS.
ACF Custom Fields
The table below lists out the field names and their setup –
- Post Type: Required. Field Type is “Select”. Drop down list choices are “Editorial” and “Research”;
- Title Link: Required. Field type is “URL”. This contains the URL of the external content page. Non-conditional as it applies to both Post Types;
- Publication Date: Non-conditional. Field type is “Date Picker”;
- Media Outlet: Non-conditional. Field type is “Text” and contains the name of the external content publication;
- Media Outlet URL: Required. Field type is “URL”. Conditional logic is if Post Type = “Editorial”;
- Some Other Field: Required. Field type is “Text”. Conditional logic is if Post Type = “Editorial”;
NOTE: I recently edited one of the Post Type options as there was a typo. I subsequently discovered that in doing so it not only broke all the conditional relationships with other ACF fields, that I then had to reset, but also reset all the Post Types assigned to my posts to a single value – which I also then had to go through and update. I raised this with ACF Support, who said –
“This is expected behavior, each field value is saved independently under each post and it is not recommended to change the field settings after posts have been saved with a value. You can however update all the field settings by creating a query to step through all the posts and pass the new value to the update_field() function. Please take a look at the following resource page for more info on this: https://www.advancedcustomfields.com/resources/update_field/”.
PHP
Block 10 uses the td_module_9.php file. My code amendment is here – https://pastebin.com/vJDbVjMA
Things to note –
- I have stripped out most of the default php echo statements that display author, WP post date and so on to stop them appearing if your default Newspaper 9 setting is to have these on;
- I’ve kept the div names etc as much as possible but the naming may not make sense in terms of the fields that sit within. This means the post title font formatting is still controlled by TD Composer’s Block 10 style settings menu. Similarly, the Media Outlet and date fonts can be collectively changed via the Article Meta Info style options;
- Additionally, as both these fields sit within a span class other style options are possible via custom CSS;
- You will see the conditional variable for the ACF field, Post Type, along with the other ACF Field variables defined within Function Render at the top of the code;
- Finally, to display the tags I used the suggestion in this support post (another good example of why a Sample Code silo would be useful), https://forum.tagdiv.com/topic/display-tags-along-the-category-on-the-blocks/. My code already contains the php get_the_tags statement, but you will have to copy Vlad’s Pastebin code to your td_module.php file as he suggests. Note that I amended this slightly as it displayed a field label for the tags and I think it’s obvious what they are;
- If you want the same, simply remove the following line –
$buffy .= '<span>' . __td('TAGS') . '</span>;
CSS
This is here, https://pastebin.com/mjTz8Tua and features comments to explain what it does, which for the most part is reducing spacing and tightening the gaps between fields.
Hopefully, this post is clear enough to enable you to replicate and hopefully extend this functionality. A big thanks to Simion C. at TagDiv for his fantastic support in helping me work through this.
Please be aware, I have only been teaching myself PHP and CSS for about four weeks so I’ve no doubt the experienced community members will have more elegant ways of writing the PHP or CSS.
Please share if you do ?
Best Wishes
Gary
