How to implement styling in page? - wordpress

I am making custom h1 styling menu for customize panel in wordpress site but I don't know how to include the custom h1 styles in html structure of page.
$wp_customize->add_section( 'h1_styles' , array(
'title' => __('H1 Styles','wptthemecustomizer'),
'panel' => 'design_settings',
'priority' => 100
) );
$wp_customize->add_setting(
'wpt_h1_color',
array(
'default' => '#222222',
'transport' => 'postMessage'
)
);
$wp_customize->add_control(
new WP_Customize_Color_Control(
$wp_customize,
'custom_h1_color',
array(
'label' => __( 'Color', 'wptthemecustomizer' ),
'section' => 'h1_styles',
'settings' => 'wpt_h1_color'
)
)
);
I know I have to do something like this :-
if( get_theme_mod( 'wpt_h1_color') != "" ):
/* code */
endif;
But I want to know should I apply styles directly in html in head section with the above code or It can be done through function in functions.php.
Thanks for your help !

You can do it directly in html outputing <style></style> and some css in there (which is faster than loading external files, and Google Speed Insights maybe not recommends, but approves that way). You can also wp_enqueue_style() if you want to.

Related

Woocommerce show individual variations on a page

My woocommerce store sells books for which there are often several variations - ebook, audiobook, paperback...
I have these set up as variable products. But I would like to add pages where people can see just a single variation - so, all the audiobooks or all the ebooks. This would be linked from a menu.
Is this possible? Or should I just give up and do each one as a simple product? I know there are paid plugins out there, but my turnover is super small and I don't want to make a loss on my store.
I've picked up some understanding of code, but programming is not my thing. If you are kind enough to post something, I will need a teensy bit of hand-holding. So saying that I need to target the shop loop (or something) will leave me floundering. But saying, here is some code, just change X for your variation name and add the css or post in functions.php will be set me on the right path.
Thank you in advance.
Create new template in your active theme. In my case i named it template-audiobook-products.php - Read more about templates here - https://developer.wordpress.org/themes/template-files-section/page-template-files/
Inside the template add the follwoing code
/*
Template Name: Audio books
*/
get_header('shop');
$args = array(
'post_type' => 'product',
'tax_query' => array(
'relation' => 'AND',
array(
'taxonomy' => 'product_type',
'field' => 'slug',
'terms' => 'variable',
),
array(
'taxonomy' => 'pa_color', //Change to proper attribute
'field' => 'slug',
'terms' => 'blue', //Change to proper value
),
),
'fields' => 'ids'
);
$get_all_variable_products = get_posts($args);
$product_ids_list = array();
foreach($get_all_variable_products as $parent_variation_id):
$_product = wc_get_product($parent_variation_id);
$variable_product_ids = $_product->get_children();
foreach($variable_product_ids as $variable_product_id):
$_variable_product = wc_get_product($variable_product_id);
$_variable_product_attributes = $_variable_product->get_attributes();
if($_variable_product_attributes['pa_color'] == 'blue'):
$product_ids_list[] = array( 'parent_id'=> $parent_variation_id, 'variation_id' => $variable_product_id);
endif;
endforeach;
endforeach;
woocommerce_product_loop_start();
foreach($product_ids_list as $_product_id):
//Since $product is obj we can pass it and use our default content-product template.
$product = wc_get_product($_product_id['variation_id']);
//Keep in mind this template by default doesnt support ajax (use css to hide button or use woo hook/filters)
wc_get_template_part( 'content', 'product');
//In case we want custom design or ajax button uncomment following.
// echo 'Add to cart';
endforeach;
woocommerce_product_loop_end();
get_footer('shop');
Create new page and select this template
To work properly the standart woocommerce template we need to include the classes and other html tags that we may need in our template. Add this function in your active theme functions.php file.
function my_custom_body_class($classes) {
if(is_page_template('template-audiobook-products.php')) {
$classes[] = 'woocommerce';
}
return $classes;
}
add_filter('body_class','my_custom_body_class');

activate plugins on custom theme

I'm new to Wordpress and just created my first template.
In the functions.php I have put the following code, that function what I understand should call the plugins from the plugins directory:
if (function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Widgetized Area',
'id' => 'widgetized-area',
'description' => '',
'before_widget' => '',
'after_widget' => '',
'before_title' => '',
'after_title' => ''
));
}
I do see all the plugins, and in the widget screen I also see the 'widgets' screen and it allows me to drag widgets into the working area.
The website itself displays the plugin's html but neither js nor css is working.
What am I missing?
Above code that you have added in your functions.php is to register sidebar not to call any plugin. It do not have any connection to plugin.
You can call sidebar you added in template as follow:
if ( is_active_sidebar( 'widgetized-area' ) ) {
dynamic_sidebar( 'widgetized-area' );
}

Wordpress archive pages url change

I have my blog archive to show the months and i can access them by going at
http://www.mysite.com/date/2014/02
Now, i want to change these links to something like
http://www.mysite.com/blog/date/2014/02
without changing the permalinks admin panel setting.
Is it possible to achieve this by coding it?
An idea of what you want can be found here and here.
Install WP Router, and what you will have at end will be something like this:
add_action( 'wp_router_generate_routes', 'bl_add_routes', 20 );
function bl_add_routes( $router ) {
$route_args = array(
'path' => '^blog',
'query_vars' => array( ),
'page_callback' => 'bl_new_demo_route_callback',
'page_arguments' => array( ),
'access_callback' => true,
'title' => __( 'Blog/Date' ),
'template' => array(
'page.php',
dirname( __FILE__ ) . '/page.php'
)
);
$router->add_route( 'demo-route-id', $route_args );
}
function bl_new_demo_route_callback( ) {
return "Congrats!";
}
Here is another reading which is more straight forward.

Is it possible to give condition to check directory and based on that give the code?

I'll try to be as clear as I can because it's pretty difficult to write it down...
Situation: Problem occured when working with WordPress. I have WPML (multilingual site) plugin installed and it works perfectly but the problem is that I am using this theme which has custom posts such as Homepage Text and Homepage Boxes and those two posts that appear on my homepage do not have a possibility of translating content into other languages to have that Homepage Text and Boxes in different languages (that part of the WPML plugin just doesn't appear there). Homepage Text and Homepage Boxes, those two appear on the left side of wordpress - it's a part of menu, just like Links, Pages or Comments...
I kind of came up with one way of solving this.
I created a few more of these custom posts. Now I have:
Homepage Text (home_text)
Homepage Boxes (home_boxes)
Homepage Text English (home_text_en)
Homepage Boxes English (home_boxes_en)
Homepage Text Russian (home_text_ru)
Homepage Boxes Russian (home_boxes_ru)
There are two pieces of code in index.php for these two custom posts. I'll show you one:
<div id="homepage-text">
<?php query_posts(array(
'post_type'=>'home_text',
'orderby' => 'ASC'
));
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post();?>
<h2><?php the_title() ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
</div><!-- /homepage-text -->
After this, there's a similar code for Homepage Boxes...
Way of solving: Writing a code which says: "if the address you are coming from says http://www.website.eu - use homepage text and boxes that are home_text and home_boxes; If it's http://www.website.com/EN - use home_text_en, and so on... I hope you get what I'm saying..
Is here anyone who had enough time to read all of this and would be so kind and write me that piece of code that translates my words into php?
That's my guess of how should that look but I'm stugling with writing conditions.
if (condition that it's the main language directory)
{
register_post_type( 'home_text',
array(
'labels' => array(
'name' => __( 'Homepage Text' ),
'singular_name' => __( 'Homepage Text' )
),
'public' => true,
'supports' => array('title','editor')
)
);
}
elseif (condition that it's english language directory .com/en)
{
register_post_type( 'home_text_en',
array(
'labels' => array(
'name' => __( 'Homepage Text English' ),
'singular_name' => __( 'Homepage Text English' )
),
'public' => true,
'supports' => array('title','editor')
)
);
}
else
{
register_post_type( 'home_text_ru',
array(
'labels' => array(
'name' => __( 'Homepage Text Russian' ),
'singular_name' => __( 'Homepage Text Russian' )
),
'public' => true,
'supports' => array('title','editor')
)
);
}
Thank's in advance.
Domantas.
You can use the Page Referer function of WordPress http://codex.wordpress.org/Function_Reference/wp_get_referer to do something like:
$page_referer_url = wp_get_referer();
if(strpos($page_referer_url,'.com/en')!==FALSE) { // Check if the text '.com/en' is part of the referer URL
// code for english
}
else {
// code for non english
}
You can find how strpos() works here http://php.net/manual/en/function.strpos.php

How can I add subtitles to movie using flowplayer module?

I'm using flowplayer module to play videos on my site. I would like to add sutitles to some of the movies. How can I do it in Drupal?
I tried to add them like this:
$flowplayer = array(
'clip' => array(
'url' => str_replace('sites/default/files/videos', 'http://www.mysite.com/sites/default/files/videos', $node->field_video[0]['filepath']),
'captionURL' => str_replace('sites/default/files/videos', 'http://www.mysite.com/sites/default/files/videos', $node->field_caption[0]['filepath'])
),
....
Then the output is:
<param value="config={"clip":{"url":"http://www.mysite.com/sites/default/files/videos/video.flv","captionURL":"http://www.mysite.com/sites/default/files/videos/subtitles.srt","scaling":"fit"},...
However it says no stream found. When I erase "clip", the video is found.But how can I add subtitles?
I wonder if I need some plugin or what is wrong in my code?
Thanks.
Are you going to have more than one video? You might try using the playlist param which has support for titles. I'm not sure how you would display them (i'm doing something very similar at the moment, hopefully this is helpful). I'm using the Flowplayer API module but the js syntax should be similar.
$player = theme('flowplayer',array(
'clip' => array(
'duration' => 5,
'autoPlay' => true
),
'playlist' => array(
array('url' =>'http://localhost/episode_18.mp4','title' => 'Episode 18'),
array('url' =>'http://localhost/episode_19.mp4','title' => 'Episode 19'),
array('url' =>'http://localhost/6.jpg','title' => 'Image')
),
'plugins' => array(
'controls' => array(
'playlist' => true
)
)
)
);
return $player;

Resources