I want to add a image to the left of the site-title: mysimpledevotion.com
How can I do that?
Would it be easier to make an image of both the text and pic, rather than trying to just add a small pic (icon) next to the text? I'm not talking about the favicon but rather the site-title MY SIMPLE DEVOTION on the front page.
I found two options to achieve this.
1. Using CSS before to inject the image
The major problem with this approach is that you cannot use relative paths; i.e, the image url must be absolute, otherwise it will not work consistently on all pages of the website.
To do so either add the following CSS to the "Additional CSS" part of your theme (when customizing it), or add it in the style.css of your custom child-theme (and make sure to add the style.css using the functions.php correctly).
.site-title a:before{
content:"";
background-image:url('http://path/to/my/image.jpg');
display: inline-block;
background-size: 1em 1em;
width: 1em;
height: 1em;
}
This will make the image correspond to the text size as well, and you can add additional CSS properties such as border-radius: 50%.
2. Using theme's filters to inject image
This approach heavily relies on the used theme to define appropriate filters where you could inject the image HTML. Here is an example of injecting an image to the Astra theme using a custom child-theme.
functions.php:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
if( ! ( function_exists( 'wp_get_attachment_by_post_name' ) ) ) {
function wp_get_attachment_by_post_name( $post_name ) {
$args = array(
'posts_per_page' => 1,
'post_type' => 'attachment',
'post_mime_type' => 'image',
'name' => trim( $post_name ),
);
$get_attachment = new WP_Query( $args );
if ( ! $get_attachment || ! isset( $get_attachment->posts, $get_attachment->posts[0] ) ) {
return false;
}
return $get_attachment->posts[0]->guid;
}
}
add_filter( 'astra_site_title', 'add_image_to_site_title' );
function add_image_to_site_title( $original_title ) {
$image = wp_get_attachment_by_post_name( 'my-image-post-name' );
$html = '<img src="' . $image . '" alt="" class="title-image">';
return $html . $original_title;
}
?>
style.css:
/*
Theme Name: My Astra
Template: astra
*/
.title-image {
display: inline-block;
width: 1em;
height: 1em;
}
I hope this helps :)
That is called favicon and can be added, if you are using theme which has that option included then can be checked by Theme Options within your wordpress admin (check on the left side). If it's isn't there then check Appearance >> Customize.
Even you cannot find there then check theme documentation. Try avoiding adding any additional code, it might conflict with existing.
Even it's not in theme documentation then do following steps to add it
Go to Appearance >> Editor
Click on header.php
Add the following code between <head></head>
<link rel="shortcut icon" type="image/x-icon" href="your-image-link" />
Related
how can i disable header for this specific page. Is there any php function that disables the header for a specific page? In wordpress
Here is the link: https://techmax.ro/elementor-14408/
You can hide by CSS and using WP is_page function. check the below code.
function hide_header_on_some_pages(){
if( is_page( 'yourpagename' ) ){
?>
<style type="text/css">
.site-header {
display: none;
}
</style>
<?php
}
}
add_action( 'wp_head', 'hide_header_on_some_pages', 10, 1 );
Put this condition where the code is done to get the menu.
if(! is_page( 'your-page-slug' ) ){
wp_nav_menu( array( 'theme_location' => 'your menu name', 'container_class' => 'my_extra_menu_class' ) );
}
Using this there is no extra dom element on this page.
I'm setting up a staging site to test changes before putting them live, but the stage site's responsive design isn't working.
I deactivated all my plugins, but the responsive design still doesn't work on stage site.
I created a new local copy of the original site and added the plugins one by one and the responsive design worked, so the plugins aren't breaking it.
I believe I've narrowed down the issues to a problem that occurs in the enqueue code in functions.php located in the child-theme directory
function add_theme_scripts() {
$parent_style = 'Karma'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'Karma-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
Here's the live site: www.alliancechemical.com
Here's the stage site: www.alliancechemical.com/staging
I expect that when the screen resolution gets smaller into mobile territory then the breakpoint media query will take effect and make the css adjustments.
On your live site your theme css files are version 4.7.15 and on your staging 5.2.4 and they change the order the of the selectors.
Css on #main on staging:
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -189px;
}
#media only screen and (max-width: 1023px)
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -157px; //Disabled
}
Css on #main on live:
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -157px;
}
#main.tt-slider-karma-custom-jquery-2 {
margin-top: -189px; //Disabled
}
The solution is to deregister the mobile css and then enqueue it again with the theme css as a dependency.
When enqueueing a Wordpress child theme stylesheet the correct way the new styles override the parent's styles.
However, since Divi introduced Builder support for custom post types, a new stylesheet style-cpt.css has been added.
All the styles in this stylesheet (a lot of which unfortunately have !important after them) are declared after enqueued child styles, so will override any matching ones.
Is there any way of overriding such "custom" stylesheets?
The "remove_action(...);" solution no longer works as of Divi version 4.10.6 (Sept '21) as the "et_divi_replace_stylesheet" action was removed.
What I did to solve it was to overwrite line #776 (as of version 4.14.6) from Divi/includes/builder/core.php, so that the function et_builder_should_wrap_styles() always returns false:
function et_builder_should_wrap_styles() {
static $should_wrap = null;
if ( null === $should_wrap ) {
$post_id = get_the_ID();
// Warp on custom post type archives and on non-native custom post types when the builder is used.
$should_wrap = et_builder_is_custom_post_type_archive() || ( et_builder_post_is_of_custom_post_type( $post_id ) && et_pb_is_pagebuilder_used( $post_id ) );
}
// return $should_wrap; /*** ORIGINAL CODE ***/
return false; /*** NEW CODE ***/
}
Then to make sure I don't lose this edit when Divi updates, I set up an action to automatically rewrite this line every time a Divi update occurs:
add_action('upgrader_process_complete', 'edit_files_on_update'), 10, 2);
function edit_files_on_update($upgrader_object, $hook_extra) {
if ($hook_extra['action'] !== 'update') return false;
if ($hook_extra['type'] === 'theme' && isset($hook_extra['themes'])) {
// Divi - disable CPT CSS wrapper
if (array_search('Divi', $hook_extra['themes']) !== false) {
$file_location = get_template_directory().'/includes/builder/core.php';
$file_contents = file_get_contents($file_location);
$file_contents = str_replace('return $should_wrap;', 'return false;', $file_contents);
file_put_contents($file_location, $file_contents);
}
}
}
I know it's technically incorrect to edit a theme's original file, BUT the "correct" alternative is to overwrite the entire Divi/includes/builder/core.php file in my child theme, which is 7253 lines long! Chances are high that future Divi updates would edit that original file, leaving me without those edits reflected in the child theme version.
After some experimentation, I found that the following code in functions.php works... (please note, this will enqueue both the standard theme stylesheet as well as Divi's custom post child theme).
You can include all the styles you want to override in your own style-cpt.css file in your child theme folder.
function my_theme_enqueue_styles() {
$parent_style = 'divi-style';
$template_directory = get_template_directory_uri();
$stylesheet_directory = get_stylesheet_directory_uri();
wp_enqueue_style( $parent_style, $template_directory . '/style.css' );
wp_enqueue_style( 'child-style',
$stylesheet_directory . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
$parent_style = 'divi-cpt-style';
wp_enqueue_style( $parent_style, $template_directory . '/style-cpt.css' );
wp_enqueue_style( 'child-cpt-style',
$stylesheet_directory . '/style-cpt.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
I am using this and is working fine:
function disable_cptdivi(){
remove_action( 'wp_enqueue_scripts', 'et_divi_replace_stylesheet', 99999998 ); } add_action('init', 'disable_cptdivi');
very late to the party but I managed to block the CPT styles from divi by prepending the #page-container selector to my Custom CSS in Theme Options, e.g.:
.header --> #page-container .header
#nav_toggle --> #page-container #nav_toggle
Will override the #et-boc selector
Tested with Divi 6.1.1
I frequently use the Wordpress audio shortcode to embed my podcast episodes in my posts:
[audio src="http://podcastsourcefile"]
Unfortunately, the default audio player looks terrible. I would like to have it restyled with CSS. I have a mockup I can send to show you what it should look like, but here's the basic gist:
background color: #B27D47
replace play button image (I can provide the .png file)
make the player 75 pixels tall, 100% width
round the corners of the player
Here's what I would like the player to look like:
(I have the .png file of the play button.)
Consider this:
// Deactivate default MediaElement.js styles by WordPress
function remove_mediaelement_styles() {
if( is_home() ) {
wp_dequeue_style('wp-mediaelement');
wp_deregister_style('wp-mediaelement');
}
}
add_action( 'wp_print_styles', 'remove_mediaelement_styles' );
// Add own custom CSS file to reskin the audio player
function add_audio_player_styles () {
if( is_home() ) {
wp_enqueue_style('mini-audio-player', get_stylesheet_directory_uri() . '/assets/mediaelement/mediaelementplayer.css', array(), null );
}
}
add_action( 'wp_enqueue_scripts', 'add_audio_player_styles');
This way, you can now copy the whole mediaelement folder out of wp-include, enqueue your copy instead of the original and then fiddle with the .css there. The lines marked with //optional show how you can use different styles depending on the page your visitor is in. Found it here
There are two filter hooks to deal with this. One at the beginning, with very few info, with it we shortcut the whole shortcode and return our own custom HTML code:
add_filter( 'wp_audio_shortcode_override', 'short1_so_23875654', 10, 4 );
function short1_so_23875654( $return = '', $attr, $content, $instances )
{
# If $return is not an empty array, the shorcode function will stop here printing OUR HTML
// $return = '<html code here>';
return $return;
};
The parameters that arrive are:
Array
(
[0] => ''
[1] => Array
(
[src] => http://example.com/wp-content/uploads/file.mp3
)
[2] => ''
[3] => 1
)
And the other one that runs at the end of the shortcode function:
add_filter( 'wp_audio_shortcode', 'short2_so_23875654', 10, 5 );
function short2_so_23875654( $html, $atts, $audio, $post_id, $library )
{
return $html;
}
The parameters that arrive are:
Array
(
[0] => <audio class="wp-audio-shortcode" id="audio-715-1" preload="none" style="width: 100%" controls="controls"><source type="audio/mpeg" src="http://example.com/wp-content/uploads/file.mp3?_=1" />http://plugins.dev/wp-content/uploads/2013/10/04_discipline_64kb.mp3</audio>
[1] => Array
(
[class] => wp-audio-shortcode
[id] => audio-715-1
[preload] => none
[style] => width: 100%
)
[2] =>
[3] => 715
[4] => mediaelement
)
I just did it by styling my custom.css in the theme editor.
The values of the audio shortcode are the following. In my case, I changed it so it won't be affected by any Wordpress update (even if it's dirtier than the PHP solution on the other comment). You could use the developper tools and style the player your own way (my problem was that i didn't need a 100% width player).
:
.mejs-mute,
.mejs-duration-container,
.mejs-time,
.mejs-duration-container,
... {...}
I added my stylesheet additionally to the existing one, like I explained in this post:
function enqueue_mediaelement(){
wp_enqueue_style( 'wp-mediaelement' );
//enqueue '/wp-content/my-theme/audio-player-styles.css'
wp_enqueue_style('my-audio-player', get_stylesheet_directory_uri() . '/audio-player-styles.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts' );
For example if you want to color the players background, you could add now the following to audio-player-styles.css:
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
background-color: #B27D47;
}
I'm using the vanilla Geneis theme with no child, but I cannot find where the logo should reside. I can change the favicon no worries, but I see no logo file present and I see no advice on how to add to the "parent" theme - I'm not using a child.
Is there a way to add a logo. I have changed the settings in wordpress for a logo rather than text (in the header settings). Any ideas?
Although I haven't done this on the default Genesis theme, I have replaced the main headline text with just a logo. I posted how I did it on the Genesis Forum, but here it is.
If you want to keep the rest of the genesis_do_header hook in place, you can just replace the default genesis_do_header using the child theme's functions.php.
Open up functions.php and add the following:
// Replace header hook to include logo
remove_action( 'genesis_header', 'genesis_do_header' );
add_action( 'genesis_header', 'genesis_do_new_header' );
function genesis_do_new_header() {
echo '<div id="title-area"><img src="your/logo/image.jpg" alt="Site Logo" />';
do_action( 'genesis_site_title' );
do_action( 'genesis_site_description' );
echo '</div><!-- end #title-area -->';
if ( is_active_sidebar( 'header-right' ) || has_action( 'genesis_header_right' ) ) {
echo '<div class="widget-area">';
do_action( 'genesis_header_right' );
dynamic_sidebar( 'header-right' );
echo '</div><!-- end .widget-area -->';
}
}
You can then style the image with your CSS in the following fashion:
#title-area img {
float:left;
}
You should now see your logo floated to the left of your site title. You may have to tweak some things, as the themes aren't identical, but let me know how this works for you.
Not to resurrect an old post or anything but I found a solution that works better than the one proposed above:
If you want to remove Title and Description then add following code in functions.php. This is useful when you decide to use site logo instead of text for site title.
/** Remove Title & Description **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
remove_action( 'genesis_site_description', 'genesis_seo_site_description' );
/** Remove default site title and add custom site title **/
remove_action( 'genesis_site_title', 'genesis_seo_site_title' );
function custom_site_title() {
echo '<img src="'.wp_get_attachment_url(254).'" alt="My Website"/>';
}
add_action( 'genesis_site_title', 'custom_site_title' );