Customize wordpress oEmbedd (soundcloud) - wordpress

I am using Wordpress 4.3.1 and I noticed that it used oEmbed to automatically embed my tracks from soundcloud.
This is awesome! Except, I have no control over how the widget is displayed.
First of all I would like to display the "Classic Embed" without the artwork.
Secondly I want the widget to be wider.
How can I achieve this without editing the shortcode for each post in my wordpress page?

You can add a filter to change the way the oEmbed code is displayed. Here is something to get you started:
// this function is called on all urls surrounded by the WordPress embed shortcode.
// i.e.: [embed]https://soundcloud.com/gratefuldead/grateful-dead-box-of-rain[/embed]
function my_embed_options( $code ) {
// look for SoundCloud link:
if( strpos( $code, 'soundcloud.com') !== false ) {
$code = str_replace( 'show_artwork=true', 'show_artwork=false', $code );
}
return $code;
}
add_filter( 'embed_oembed_html', 'my_embed_options' );
You can find full parameter list for the SoundCloud player here.

Related

Print "custom label" for indicating type of post in the front end for Wordpress

I have a blog with different custom post types ("books", "interviews", "recipes", "events", etc...). those are all appearing in the home page with same format like a grid. I would like to print in the front end a "label" customized possibly, representing the kind/content of post.
For example:
if the post is a CPT "Book", I want to show in the grid cell "looking for a book?"
if the post is a CPT "Recipe", I want to show on same position, for specific post "hungry?"
etc...
Can you maybe help me in this? I guess I need some PHP code and set it with Elementor, but I am not a developer... :(
Thanks for any help.
Mario.
I have been asked in comment to put a screenshot. this is a fake grid taken from internet (I know, ugly layout), presenting in descending order by date all posts, very different in domain (different custom post types), which I am able to do it. What I need is, depending by Post Type, to add a slogan like "watch the movie" or "hungry?" or "Interview with...", a static string totally dependent by the type of CPT.
fake sample from internet
Further integration to explain the context.
See the current home page of my site: click here
You see two "posts" in a grid (3 columns, published with "post" widget in elementor and a custom skin. This custom skin is linked to a "loop" template created with "ele custom skin". As you see by the pic, you have one post which is a recipe (custom post type "Recipe") and one is a book (custom post type is book). But here I can eventually find also a standard post. Now, when you see the "red dot", I would like to put a word, which is directly dependent by the post type:
if "recipe" --> "Hungry?"
if "book" --> "our book reviews"...
etc...
as a sample I have in this link click here for each loop in the grid, called using "shortcode" widget
[helloworld]
and coded in snippets plugin following portion of php code
function HelloWorldShortcode() {
return '<p>Hello World!</p>';
}
add_shortcode('helloworld', 'HelloWorldShortcode');
Here is the code, from this code shortcode will be [vkh_display_post_tagline]
/**
* Custom shortcode to display the tagline by the post type.
*/
/**
* Custom shortcode to display the tagline by the post type.
*/
function vkh_display_tagline_by_post_type() {
global $post;
if ( ! $post || empty( $post ) ) {
return;
}
// Uncomment the next line for debugging and to know if we're getting post type of not.
// return $post->post_type;
$heading = '';
switch ( $post->post_type ) {
case 'recipe':
$heading = __( 'Hungry?', 'your-text-domain' );
break;
case 'book':
$heading = __( 'Our book reviews', 'your-text-domain' );
break;
// Add more cases following above examples.
default:
// If you have to assign anything default when a case doesn't match
// then write that here.
$heading = '';
break;
}
// When heading is not empty return heading within the html tag.
if ( ! empty( $heading ) ) {
return '<h4 class="post-tagline">' . esc_html( $heading ) . '</h4>';
}
}
add_shortcode( 'vkh_display_post_tagline', 'vkh_display_tagline_by_post_type' );

How to set a WooCommerce email template as default for all emails

I’m looking for a way to send all WordPress emails using a custom WooCommerce template so all emails will look the same.
The path to the template would be:
woocommerce/emails/my-custom-woocommerce-template.php
Does it have to all be templatized in a single file? If not, a combination of these entry points can probably get you the standardization you're looking for:
email-header.php lets you customize the start of the email including the header image (if you need to do more than change its URL). It opens the layout tags for the rest of the email content
email-footer.php lets you customize the footer, and closes the layout tags started in the header.
email-styles.php or the woocommerce_email_styles filter let you customize the CSS (see some gotchas in my article here).
Various actions/filters are scattered throughout the emails for customizing individual parts.
You can use the below function. It is working
function myplugin_woocommerce_locate_template( $template, $template_name, $template_path ) {
global $woocommerce;
// List of all templates that should be replaced with custom template
$woo_templates = array(
'emails/admin-new-order.php',
'emails/admin-failed-order.php',
'emails/admin-cancelled-order.php',
'emails/customer-completed-order.php',
'emails/customer-new-account.php',
'emails/customer-note.php',
'emails/customer-on-hold-order.php',
'emails/customer-processing-order.php',
'emails/customer-refunded-order.php',
'emails/customer-reset-password.php',
);
//Check whether template is in replacable template array
if( in_array( $template_name, $woo_templates ) ){
// Set your custom template path
$template = your_template_path.'emails/my-custom-woocommerce-template';
}
// Return what we found
return $template;
}
add_filter( 'woocommerce_locate_template', 'myplugin_woocommerce_locate_template', 10, 3 );
add_filter( 'wp_mail', 'your_wp_mail_action' ); // $args = compact( 'to', 'subject', 'message', 'headers', 'attachments' )
function your_wp_mail_action( $args ) {
global $your_prefix_your_email_args; // the args you could use in my-custom-woocommerce-template file
$your_prefix_your_email_args = $args;
ob_clean();
get_template_part( 'woocommerce/emails/my-custom-woocommerce-template' );
$args['message'] = ob_get_clean();
// ... your logic
return $args;
}
To view and update email settings, log into your website dashboard. In the left-hand menu, click on WooCommerce → Settings.
There, you’ll find several options tabs at the top. Click Emails to view the following templates
you can custom all as you want

How to create Custom Pagination Permalinks in wordpress

I have an article with several pages in my wordpress blog. if for example i have the following link in my blog :
http://example.com/heartbreaking-photos
any idea how can i change the link of the second page from
http://example.com/heartbreaking-photos/2
to http://example.com/heartbreaking-photos/CUSTOM-STRING
CUSTOM-STRING aimed to be a custom title inside the page
To achieve this, you will need to do 2 things:
Disable the default WordPress canonical redirect - this is necessary, because WordPress will always redirect to the /2/ page when it encounters the page parameter in the URL or query args.
Add a custom rewrite rule to direct your custom title to the second page of your page - this is essentially necessary to allow the link format that you want.
In terms of code, this is what you need (this is a working solution, I've just tested it locally):
// Removes the canonical redirection
remove_filter( 'template_redirect', 'redirect_canonical' );
// Add custom rewrite rules
add_action( 'init', 'my_add_custom_rewrite_rules' );
function my_add_custom_rewrite_rules() {
// Slug of the target page
$page_slug = 'heartbreaking-photos';
// Page number to replace
$page_num = 2;
// Title you wish to replace the page number with
$title = 'custom-string';
// Add the custom rewrite rule
add_rewrite_rule(
'^' . $page_slug . '/' . $title . '/?$',
'index.php?pagename=' . $page_slug . '&page=' . $page_num, 'top'
);
}
There are three things you might want to configure or change here:
$page_slug - this is the slug of your page, in your case this is heartbreaking-photos
$page_num - the number of your pagination page, in your case this is 2
$title - the title you wish to use instead of your page number 2.
Feel free to alter the code as you wish, or copy it to cover more additional cases, similar to this one.
EDIT
Important: Once you use the code, go to Settings > Permalinks and click the "Save Changes" button. This will rebuild your rewrite rules, and is necessary for the solution to work.
Hope that helps. Let me know if you have any questions.
You can try this codex. Pass the arg and you will get page id, page title and use those
https://codex.wordpress.org/Function_Reference/get_pages
Or you can call page title by page id
$pagetitle= get_post_field( 'post_title', $page_id );
Ok, so basically you don't want to display the navigation link under the page (use css or modify the post template in the child theme) and add your custom link. If I understand it well:
Remove navigation links (depends on your theme, but basically):
.nav-links { display: none; }
You can add the custom link through function + custom fileds:
create a custom field, for example "my-url" in your post, see codex: https://codex.wordpress.org/Custom_Fields
add to your functions.php (in the child theme or in a custom site plugin):
function my_page_add_to_content( $content ) {
if ( ! empty(get_post_meta( get_the_ID(), 'my-url', true ) ) {
$content .= 'URL TEXT HERE'
}
return $content;
}
add_filter( 'the_content', 'my_page_add_to_content' );

Change Wordpress feed <link> for one specific tag

I have an external page that reads a RSS feed for a tag. I can't change anything on the external page, so the challenge is to change the RSS feed on my side to match the requirements.
On the external page the 3 latest posts for a tag are shown, and at the end of the section (note: not after each post but after all 3 posts) there is a "View all" link. This link receives its value from the element in the feed, which is by default set to my blog homepage, e.g. http://myblog.com). For this specific tag the link should be http://myblog.com/tag/myspecialtag.
The requirement is that the "View all" link links to the tag page instead of the homepage.
My idea was to add a condition to the element to change the URL for this specific category. I tried to change the feed template as recommended here: Customizing feeds, but for some reason it doesn't change the template at all. The code I tried is the following:
remove_all_actions( 'do_feed_rss2' );
add_action( 'do_feed_rss2', 'change_feed_rss2', 10, 1 );
function change_feed_rss2( $for_comments ) {
$rss_template = get_template_directory() . '/feeds/feed-custom_rss2.php';
if( file_exists( $rss_template ) )
load_template( $rss_template );
else
do_feed_rss2( $for_comments ); // Call default function
}
Of course I created the custom feed template and stored it in the feeds directory in my theme.
As this didn't work I tried looking into filters/hooks but I couldn't find anything helpful regarding my issue. Any ideas on how to best solve this issue?
I came up with the following solution:
I created a new custom page template custom_rss-feed.php and copied the code from wp-includes/feed-rss.php into it. I assigned this template to a new page. Additionally I added a filter to get_bloginfo_rss like the following:
function alter_bloginfo_rss($value, $key) {
if ( $key === "url" &&
is_page_template("custom_rss-feed.php")
) {
return $value . "/my/custom/url";
}
return $value;
}
add_filter("get_bloginfo_rss", "alter_bloginfo_rss", 10, 2);

Change Wordpress logo click redirection

I would like to change the logo redirection when clicked. Right now when you click on the logo, the user is redirected to the homepage but I want it to redirect to another site. How do I do this?
I agree with Stu Mileham. Another way to implement what you are asking for would be to use JavaScript / jQuery.
Save the following code to a .js file (eg. pageRedirect.js, let's say placed in a js folder inside your theme's root folder):
(function($) {
$(document).ready(function() {
$('#pageLogo').on( "click", function(event) {
event.preventDefault();
window.location.assign("http://www.google.com/");
});
});
})(jQuery);
To make the previous code work, you would have to select somehow the page logo via jQuery.
On the previous code this is achived via $('#pageLogo') since I have made the assumption that your logo has an id with the value pageLogo.
Of course, to enable your theme to use this pageRedirect.js file, you have to enqueue it by placing the following code to your theme's functions.php file:
/**
* Enqueue pageRedirect script.
*/
function pageRedirect_scripts() {
wp_enqueue_script( 'page-redirect-js', get_template_directory_uri() . '/js/pageRedirect.js', array('jquery'), '20150528', true );
}
add_action( 'wp_enqueue_scripts', 'pageRedirect_scripts' );
Code Explanation:
//-jQuery selects html element with id='pageLogo'
//-when it is clicked, it calls a function in which it passes the event
$('#pageLogo').on( "click", function(event) {
//prevents page from redirecting to homepage
event.preventDefault();
//redirects to your desired webpage
window.location.assign("http://www.google.com/");
});
If you don't have the option to change the link from admin then you will have to edit your theme's header.php file (most likely, depends on how the theme is built though).
Many themes have a tag similar to the following:
<img src="logo.jpg">
You would need to change this to:
<img src="logo.jpg">
I've added the target tag to open the site in a new window, this is my personal preference when re-directing to a different site but it's optional.
Your theme files might look very different to this, it's impossible to know for sure without seeing some code, but this should give you an idea.
Also be aware that your changes could be overwritten by a theme update. This can be avoided by creating a child theme.
https://codex.wordpress.org/Child_Themes
Depends on your theme
Some theme creators gives you the possibility to change the link from admin
Some theme creators just believe that clicking the logo you need to go on homepage - so you need to edit the theme
Depending upon the theme you are using, you can try one of the following options.
Explore the admin options and see if the theme provides a direct way to change the link on the logo.
If not found in admin options, try looking for the code in header.php. Do an inspect element on your logo and see the html code surrounding the logo file, If the code is directly present in header.php, your task is simple. Just change the code to update the URL, instead of reading it from home_url(). Something like <a href="<?php echo home_url();?>"> will need to be replaced with <a href="https://www.example.com">
The other option to look for is get_custom_logo. Some themes get the logo code from this function. You can apply a filter to change the home_url just before this method is called in your theme and then remove filter afterwards. Or else you can copy the code from wordpress and update it with a differently named function say get_custom_link_logo in functions.php then where'ver your theme is using get_custom_logo you can use get_custom_link_logo instead of that.
function get_custom_link_logo ( $blog_id = 0 ) {
$html = "";
$switched_blog = false;
if ( is_multisite() && ! empty( $blog_id ) && (int) $blog_id !== get_current_blog_id() ) {
switch_to_blog( $blog_id );
$switched_blog = true;
}
$custom_logo_id = get_theme_mod( 'custom_logo' );
// We have a logo. Logo is go.
if ( $custom_logo_id ) {
$custom_logo_attr = array(
'class' => 'custom-logo',
'itemprop' => 'logo',
);
/*
* If the logo alt attribute is empty, get the site title and explicitly
* pass it to the attributes used by wp_get_attachment_image().
*/
$image_alt = get_post_meta( $custom_logo_id, '_wp_attachment_image_alt', true );
if ( empty( $image_alt ) ) {
$custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );
}
/*
* If the alt attribute is not empty, there's no need to explicitly pass
* it because wp_get_attachment_image() already adds the alt attribute.
*/
$html = sprintf( '%2$s',
esc_url( "https://www.example.com" ),
wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )
);
}
// If no logo is set but we're in the Customizer, leave a placeholder (needed for the live preview).
elseif ( is_customize_preview() ) {
$html = sprintf( '<img class="custom-logo"/>',
esc_url( "https://www.example.com" )
);
}
if ( $switched_blog ) {
restore_current_blog();
}
/**
* Filters the custom logo output.
*
* #since 4.5.0
* #since 4.6.0 Added the `$blog_id` parameter.
*
* #param string $html Custom logo HTML output.
* #param int $blog_id ID of the blog to get the custom logo for.
*/
return apply_filters( 'get_custom_logo', $html, $blog_id ); }
This might not cover all the use cases, but you get the idea. Depending upon the theme you'll have a similar solution for your case. The important thing to figure out which case you fall under will be to identify the code where html for your logo is getting added. header.php is a good starting point.
Use this javascript in the header or footer of your theme:
<script>
document.getElementsByClassName("site-logo")[0].getElementsByTagName('a')[0].href="https://www.test.com";
</script>
i am assuming that site-logo is the class name of your LOGO.

Resources