The default formatting puts the date after the title, I want the date to be displayed first and then the title, I also want to be able to separate them a little bit and make them look nice and lined up with a left justification.
The code is set to display a list of all the subpages of page.
<?php
wp_list_pages( array(
'title_li' => '',
'child_of' => 701,
'show_date' => '1',
) ); ?>
I could not find option to modify it from PHP. So, here is small CSS tweak so that you can get date in the front. Check this:
<style>
#page-list li{
float: left;
display: inline-block;
clear: both;
}
#page-list li a{
float: right;
margin-left: 10px;
}
</style>
<ul id="page-list">
<?php
wp_list_pages( array(
'title_li' => '',
'child_of' => 701,
'show_date' => '1',
) ); ?>
</ul><!-- #page-list -->
Related
I created a header widget. I used this code:
First, I placed this code into Functions.php
function wpb_widgets_init() {
register_sidebar( array(
'name' => 'Header Widget',
'id' => 'header-widget',
'before_widget' => '<div class="hw-widget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="hw-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'wpb_widgets_init' );
Then I added this code into header.php
<?php
if ( is_active_sidebar( 'header-widget' ) ) : ?>
<div id="header-widget-area" class="hw-widget widget-area" role="complementary">
<?php dynamic_sidebar( 'header-widget' ); ?>
</div>
<?php endif; ?>
Now my width of the widget seems to be smaller than my container width. I'd like to change that.
I tried using this code:
.header-widget {
clear: both;
margin: 0 auto;
width: 1200px;
}
But it does not seem to do anything. What am I doing wrong?
There is no class named header-widget in front end. header-widget is an ID of widget in backend. If you want to write CSS for your widget in front end then you can use header-widget-area or hw-widget widget-area as below. I tried and it worked for me in localhost.
#header-widget-area {
clear: both;
margin: 0 auto;
width: 1200px;
}
or
.header-widget {
clear: both;
margin: 0 auto;
width: 1200px;
}
I'm building a custom WP Theme and am working on adding to The Customizer. I previously added a background image setting, and am trying to also implement an opacity slider. I looked up how to use the :before or :after pseudoclass to make opacity apply correctly to my background-image, but the children are still affected by the opacity setting. Is there something wrong with my code? I went off this site's example on how to format my html and css: https://scotch.io/quick-tips/how-to-change-a-css-background-images-opacity
HTML:
<div id="bg-image-div" class="image-opacity">
<section id="category-section">
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<h2 class="section-title">Section Title</h2>
</div>
</div>
<div>
<p>
Content Content Content Content Content Content Content Content Content Content Content
</p>
</div>
</div> <!-- /.container -->
</section>
</div> <!-- /.image-opacity -->
CSS:
#bg-image-div {
position: relative;
overflow: hidden;
background: #5C97FF;
}
#bg-image-div:after {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
}
#category-section {
z-index: 2;
position: relative;
}
PHP adding the Control and Settings:
function themename_customizer_register( $wp_customize ) {
// Theme Customizer -- Background Image CSS
$wp_customize->add_section(
'themename_recipe_category_area',
array(
'title' => __( 'Category Area Image', 'themename' ),
'priority' => 30,
'capability' => 'edit_theme_options',
'description' => __( 'Change the background image in the Recipe Category Area of the Home Page', 'themename' ),
)
);
$wp_customize->add_setting(
'themename_background_image',
array(
'default' => get_template_directory_uri() . '/images/rustic-bg.jpg',
'transport' => 'refresh'
)
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'themename_background_image',
array(
'label' => __( 'Background Image', 'themename' ),
'settings' => 'themename_background_image',
'section' => 'themename_recipe_category_area',
'description' => __( 'Recommended image size is approximately 1650x1650 pixels', 'themename' ),
)
)
);
// Theme Customizer -- Background Image CSS Opacity Slider
$wp_customize->add_setting('themename_image_opacity');
$wp_customize->add_control( 'themename_image_opacity',
array(
'type' => 'range',
'priority' => 20,
'section' => 'themename_recipe_category_area',
'label' => __( 'Set Background Image Opacity', 'themename' ),
'description' => '<span style="float: left; margin-top: 10px;">' . __( '← Less', 'themename' ) . '</span><span style="float: right; margin-top: 10px;">' . __( 'More →', 'themename' ) . '</span>',
'input_attrs' => array(
'min' => .1,
'max' => 1,
'step' => .1,
'class' => 'image-opacity',
'style' => 'width: 100%; padding-top: 0; z-index: 0;',
),
)
);
}
add_action( 'customize_register', 'recipedia_customizer_register' );
PHP/CSS hooking the style into wp_head:
function themename_customizer_css() {
?>
<style>
/*== Style from The Customizer Colors Section - Categories Section Background Image ==*/
<?php if(get_theme_mod('themename_recipe_category_area')) : ?>
#bg-image-div {
background-image: url("<?php echo get_theme_mod( 'recipedia_recipe_category_area' ) ?>");
}
<?php else : ?>#bg-image-div {
background-image: url("<?php echo get_template_directory_uri() . '/images/rustic-bg.jpg'; ?>");
}
<?php endif;
?>
/*== Style from The Theme Customizer Background Image - Adjusting Opacity ==*/
.image-opacity {
opacity: <?php echo get_theme_mod('themename_image_opacity') ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'recipedia_customizer_css' );
Your CSS output for image opacity in the wp_head action hook looks incorrect. It should be
.image-opacity:after { ... }
Although, to match your original style, it's better to just go with
#bg-image-div:after { ... }
for the opacity properties so that there's no confusion between usage of CSS ID or class selectors if you have to edit this later.
I've actually utilized this very technique -- from that same article source -- and it works perfectly.
The color picker is still into the theme Customizing options but when i change color of links and buttons, the color is not change of buttons and links. Please help Thanks for your valuable answers.
//Customize Appearance Options
function myTheme_customize_register( $wp_customize ) {
//setting for link color
$wp_customize->add_setting('mtm_link_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//setting for Button color
$wp_customize->add_setting('mtm_btn_color', array(
'default' => '#006ec3',
'transport' => 'refresh',
));
//Section for standard colors
$wp_customize->add_section('mtm_standard_colors', array(
'title' => __('Standard Colors', 'MyTheme'),
'priority' => 30,
));
//Adding control for links color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_link_color_control', array(
'label' => __('Link Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_link_color',
) ) );
//Adding control for buttons color picker
$wp_customize->add_control(new WP_Customize_Color_Control($wp_customize,'mtm_btn_color_control', array(
'label' => __('Button Color', 'MyTheme'),
'section' => 'mtm_standard_colors',
'settings' => 'mtm_btn_color',
) ) );
}
add_action('customize_register', 'myTheme_customize_register');
//Output Customize CSS
function myTheme_customize_css() { ?>
<style type="text/css">
a:link,
a:visited
{
color:<?php echo get_theme_mod('mtm_link_color'); ?> ;
}
.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited{
background-color: <?php echo get_theme_mod('mtm_link_color'); ?> ;
}
div.search #searchsubmit{
background-color: <?php echo get_theme_mod('mtm_btn_color'); ?> ;
}
</style>
<?php }
add_action('wp_haed', 'myTheme_customize_css');
I' am using bootstrap 3. I' don't know if its possible in WordPress to add the class on function wp_list_pages on its children ul. I know it possible with jQuery.
This is what I currently have
<ul class="nav navbar-nav dropdown" role="menu" aria-labelledby="dLabel">
<?php
$args = array(
'authors' => '',
'child_of' => 0,
'date_format' => get_option('date_format'),
'depth' => 2,
'echo' => 1,
'exclude' => '5, 141, 143, 145',
'include' => '',
'link_after' => '',
'link_before' => '',
'post_type' => 'page',
'post_status' => 'publish',
'show_date' => '',
'sort_column' => 'menu_order',
'title_li' => '',
'walker' => ''
);
?>
<?php wp_list_pages( $args ); ?>
</ul>
This is a dropdown menu, so WordPress adds a class children into its ul, but can I add bootstrap class dropdown into that children ul.
You need to create a custom walker to change the child <ul> class. There's no filter inside the default page walker to change the classes that are applied.
You don't need to include so many arguments for wp_list_pages by the way. Only the ones you change.
Here's how I'd do it:
Add to functions.php -
class WPSE_Walker_Page extends Walker_Page {
/**
* #see Walker::start_lvl()
* #since 2.1.0
*
* #param string $output Passed by reference. Used to append additional content.
* #param int $depth Depth of page. Used for padding.
* #param array $args
*/
function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat("\t", $depth);
$output .= "\n$indent<ul class='change-me children'>\n"; // MAKE SURE TO CHANGE CLASSES HERE
}
}
Then replace your existing call to wp_list_pages() with:
<?php
$args = array(
'depth' => 2,
'exclude' => '5, 141, 143, 145',
'sort_column' => 'menu_order',
'title_li' => '',
'walker' => new WPSE_Walker_Page(),
);
wp_list_pages( $args ); ?>
Okay, still didn't find what I was looking for but I found a work around without using jQuery only had to paste in the code of class dropdown-menu into my css style, thats it. Works!
CSS
.primary-menu-container > ul > li.page_item_has_children > ul.children{
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
I want to have two widgets on my home page next to each other. However I want the first widget to be 650 px, while the other to be 290px. This I am not being able to do.Can someone please help me?
The code I registered for my widgets in my theme functions.php file:
register_sidebar(array(
'name' => 'Slider 1',
'before_widget' => '<div id="%1$s" class="widget-area1 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
register_sidebar(array(
'name' => 'Side Column',
'before_widget' => '<div id="%1$s" class="widget-area2 %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
Then I placed in my home page template file:
<?php
/**
* Template Name: Home Page
*/
get_header();
include('_functions/get-options.php');
?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') ||!dynamic_sidebar('Homepage')); ?>
**<div class="widget-area1">
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Slider 1')); ?>
</div>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Side Column')); ?>**
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 1')); ?>
<?php /* Widgetised Area */ if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage 2')); ?>
<div class="clear"></div>
<?php get_footer(); ?>
And the css styling I placed in the stylesheet:
div.widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
div.widget-area3 {
clear: both;
margin: 0 auto;
width: 290px;
}
Can you please tell me what I am doing wrong?The theme that I am using is Compare if that might help.
The styles in your question like like they should work, but this is what I see in your stylesheet
#widget-area1 {
clear: both;
margin: 0 auto;
width: 650px;
}
#widget-area2 {
clear: both;
margin: 0 auto;
width: 290px;
}
These rules are in reference to an ID not to a class like you have defined in your question.
Also, you may want to remove the clear:both if you want them to sit side-by-side.