I want to make it possible for users of my theme to replace the banner through Theme Customization API. I have got it working, however, the default image appears blank and when I click "view page source" I get the following:
<img src=" " alt="banner" />
The default image shows up in the preview inside the API window, but not in the browser. The moment I upload a banner to replace the default banner with, it works perfectly. But I just can't get the default image to appear. Am I doing something wrong?
This is in my functions.php:
// Start New Section for Images
$wp_customize->add_section('customtheme_images', array(
'title' => _('Images'),
'description' => 'Change Images'
));
$wp_customize->add_setting('banner_image', array(
'default' => 'http://mywebsite.com/banner.jpg',
));
$wp_customize->add_control( new WP_Customize_Image_Control ($wp_customize, 'banner_image', array(
'label' => _('Change Banner'),
'section' => 'customtheme_images',
'settings' => 'banner_image'
) ));
And, this is inside my header.php:
<img src="<?php echo get_theme_mod('banner_image'); ?>" alt="banner">
And yes I have tripple checked the path of the default image, and it is corrent. Please help!
When using $wp_customize->add_setting('banner_image', array(
'default' => 'http://mywebsite.com/banner.jpg',
)); the default value is not saved into the database (until you save).
So you will have to use: <img src="<?php echo get_theme_mod('banner_image','http://mywebsite.com/banner.jpg'); ?>" alt="banner">
The problem you describe is some kind related to: https://wordpress.stackexchange.com/questions/129479/alternatives-to-handle-customizer-settings
I have the same situation here. The problem with the solution below:
<?php echo get_theme_mod('banner_image','http://mywebsite.com/banner.jpg'); ?>
I need the user to be able to delete the default image. This default image will only be used for the initial display of the theme. So I need a solution that when activating the theme, is already saved in the database.
Related
How can I make the user change any image on my wp theme just from the theme editor?
For example: I have a background image on my theme footer that i hard-coded, I want to give the user(admin) the ability to change it from the theme editor, and thanks on advanced
I don't want to use something like this:
<div class="footer-background background-image" style="background-image: url(<?php echo get_theme_file_uri( 'assets/images/bg.jpg' ) ?>)" >
If you can just give me a wp codex on this, it would be more than helpful, because I couldn't find any thing related to my problem on Google.
So, you could do something like that (in functions.php) :
add_action( 'customize_register', function( $wp_customize ) {
$wp_customize->add_section(
'section_img',
array(
'title' => 'Images',
'priority' => 35,
)
);
$wp_customize->add_setting(
'footer_image'
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'footer_image',
array(
'label' => 'Footer image',
'section' => 'section_img',
'settings' => 'footer_image'
)
)
);
});
And you get the value by doing (in footer.php) :
get_theme_mod('footer_image');
If I were you, I do followings
Install ACF plugin
Create an option Page
Create new custom field (image field) and assign it to previously created options page.
Update footer template to show the image from back end like this
Update footer image src to get back end ACF field value.
https://www.advancedcustomfields.com/resources/options-page/
https://www.advancedcustomfields.com/resources/image/
I am trying to remove numbers from pagination links on a paginated Wordpress post to leave only next/previous buttons. I have the code as follows and it still does not work as required. If I set a display:none; css rule to the tags within the .paging p class this affects all links including the next/previous links as the links do not have a separate class to them.
<?php
wp_link_pages(array(
'before' => '<p class="paging" style="margin-bottom: 5em;">' . __(''),
'after' => '</p>',
'next_or_number' => 'next', # activate parameter overloading
'nextpagelink' => __('<span class="pagelink right">NEXT</span>'),
'previouspagelink' => __('<span class="pagelink left">PREVIOUS</span>'),
'pagelink' => '%',
'echo' => 1 )
); ?>
Here is an example of a post illustrating the problem: http://famtrav.staging.wpengine.com/destinations/uk/15-fun-things-july-2016/
Is there another way of me achieving the required result? I hope this makes sense. Many thanks.
I have now solved this. The problem was caused by conflicting code. Specifically the wp_link_pages function was being defined both in the themes functions.php file and in the post-template.php file within the /wp-includes/ folder with instructions in one incidence contradicting the other. I commented out the instructions in the functions.php file and altered the post-template.php file with the correct code and this solved the problem.
Please let me know below code is correct to fetch the image style in drupal
$image = theme(
'image_style',
array(
'path' => 'public://my_example_image.jpg',
'style_name' => 'my_custom_image_style',
'alt' => 'Alternate Text',
'title' => 'Title Text',
)
);
You can fetch image url in specific style with:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
One parameter is image style name and other is image URI (not the path!). You can manually define image tag content and for href attribute print out value image_style_url() returned.
Try this function
$img_url = $node->field_image['und'][0]['uri'];
<img src="<?php print image_style_url("thumbnail", $img_url); ?>" />
You can change 'thumbnail' to your image style name,and replace $img_url with your image field machine name.
I am desperately trying to remove the bullets that appear in front of the flags. I am using WordPress and I've added this Polylang feature as a widget in my header. I tried to post a screenshot but I can't upload images yet.
I would also like to custom css this widget but I have tried everything I can think of and nothing is happening. Basically this is placed on the left side of my page when I want it on the right side. Here is the code I used in the my_functions php:
function my_widgets_init() {
) );register_sidebar( array(
'name' => __( 'Header Area', 'your-theme' ),
'id' => 'sidebar-2',
'description' => __( 'An optional widget area for your site header', 'your-theme' ),
'before_widget' => '<div id="%1$s" class="headwidget %2$s">',
'after_widget' => "</div>",
'before_title' => '<h3>',
'after_title' => '</h3>',) );
}
add_action( 'widgets_init', 'my_widgets_init' );
And here is the code used in header.php
<div class="span12" id="polylang-2">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar-2') ) : ?> <?php endif; ?></div>
I tried entering Custom CSS from the WP admin widgets panel, i have no idea how to code from here I guess cause nothing ever changes... I have already done a lot of customization to my site so I am ok with CSS, it's more finding where to make changes I have trouble with. And php is not my forte yet.
Thanks for all your help.
you can inject a custom class after widget class as shown in the code below:
'before_widget' => ''
now you can call the class myclass from style.css file present in your theme folder I hope you know how to remove the bullets in the css
you can locate your theme files from wp-content/themes/themename
.myclass {float:left;} /* to move it on the left */
.myclass ul {list-style:none;}
Moreover you dont require a div with the id polylang-2 since the div automatically comes from the above widget code.
and you can change the header.php code to
<?php dynamic_sidebar("sidebar-2");?>
OR
the next way around is if you want to use your existing code then add the following css in your style.css file inside your theme
#polylang-2 ul {list-style:none;}
Let me know if it solves your problem or not. Thanks
I built a custom wordpress theme, and I also built a custom widget sidebar (so widgets are enabled), I can see the title of the widget, but the content is not showing. For example I'm using a poll widget, the title is exactly as I've set it, but the content is completely blank.
In the header the scripts for the plugin are loaded, but again there is no content. I tried multiple plugins, and they all do the same thing. I also attempted this with using do_shortcode() and again, no content. So I am stumped.
I have also tried getting support on the wordpress forum, but I've never successfully gotten an answer to my query there.
My hope is that someone has had this same issue, and can point me to what the problem may be.
In the header, i've included the following information:
<html <?php language_attributes(); ?>>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php wp_head();?>
<?php wp_meta();?>
<?php wp_print_scripts();?>
However again, no results. Google searches have also not pulled up anything about this being an issue. Here's the odd thing, I design all wordpress themes the same way, most of which are all hosted on the same server, and this is the only theme having this problem.
Also I've included my functions.php script for reference purposes.
<?php
function twentyten_widgets_init() {
register_sidebar( array(
'name' => __( 'Primary Widget Area', 'twentyten' ),
'id' => 'primary-widget-area',
'description' => __( 'Add widgets here to appear in your sidebar.', 'twentyten' ),
'before_widget' => '<div id="spacer">',
'after_widget' => '</div></div>',
'before_title' => '<div id="left_top">',
'after_title' => '</div><div id="left_bottom">',
) );
}
add_action( 'widgets_init', 'twentyten_widgets_init' );
add_filter( 'show_admin_bar', '__return_false' );
remove_action( 'personal_options', '_admin_bar_preferences' );
?>
EDIT **
I removed from the header as it was causing duplicate scripts in the header. So that is no longer an issue, however that did not resolve the issue and nothing has changed as a result of being removed.
From your code all your widget will look like:
<div id="spacer">
<div id="left_top">Title</div>
<div id="left_bottom">
CONTENT
</div></div>
You are using id's here (maybe you intend to use classes) here for your elements, like id="left_top". So adding more than one widget will give you a problem, see Can multiple different HTML elements have the same ID if they're different elements?, cause the id's should be unique.
You will maybe apply a css / javascript on one of these id's like
#left_bottom{display:none} this will explain why your content will be not shown independent of the widget you use.