I'm using the 'Balita' free ecommerce wordpress theme. It comes stock with 'nivo' slider hooked to the dashboard. This is fine, but doesn't allow slide transition customizations and is left at crazy 'random' at default. I'd like to use 'fade' but can't find where the theme is calling the jQuery.
All I see is the initiation code below; within the header.php
<?php
// get recent slider max is 5 slider.
tk_get_recent_posttype('slider', 1, 5);
if(have_posts ()):
?>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<?php
while (have_posts ()): the_post();
echo '<a href="'. get_post_meta(get_the_ID(), '_tk_slider_meta_link', true).'">';
the_post_thumbnail('slider', array('alt' => get_the_title(), 'title' => ''));
echo '</a>';
endwhile;
?>
</div>
</div>
<?php endif; wp_reset_query(); ?>
I've also tried dragging the tradtional jQuery code above this within the same head to toggle 'fade' but it ignores it. How could I change the slide transitions / where could I find the jQuery? Or am I stuck to working with a new plugin?
I find the script to edit within an open source FTP client called 'script.js'. Rad, good to go.
Related
I've got 2 versions of a site, a live testing version and a local version.
I'm currently working on the local version, using MAMP. The backend of both sites is identical, I've ensured that the admin of each site is exactly the same.
I'm trying to add images to the site via the Edit Page section, but the images aren't displaying.
I inspected the site to see any errors, none were found, however I came acrosss something interesting.
After comparing the html markup of the 2 site versions side by side, I noticed that my local version is missing the the div that displays images.
Here is the div on the live version -
Here is the my local version, in which the div is not being shown -
As you can see in the local version there is a ul instead of div class="image-16-8.
Here is the php file that is displaying these images
<?php
function tbhHeroShortcode($atts)
{
$values = shortcode_atts(array(
'images' => '',
'first-line' => '',
'second-line' => '',
'video' => '',
'link' => '',
), $atts);
ob_start();
?>
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
<?php foreach ($images as $image): ?>
<li>
<div class="image-16-8" style="background-image: url(<?= $image->url; ?>); "></div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<div class="hero-content">
<div class="hero-content-first-line">
<h1 class="header"><?= decode_shortcode_data($values['first-line']) ?></h1>
</div>
<h1 class="italic-header"><?= decode_shortcode_data($values['second-line']) ?></h1>
<div class="hero-content-cta">
<a class="hollow-button" href="<?= decode_shortcode_data($values['link']) ?>">Learn More</a>
</div>
</div>
<?php if (count($images) > 1): ?>
<div class="hero-controls">
<i class="fa fa-chevron-left hero-controls__left" aria-hidden="true"></i>
<i class="fa fa-chevron-right hero-controls__right" aria-hidden="true"></i>
</div>
<?php endif; ?>
</div>
<?php
$component = ob_get_contents();
ob_end_clean();
return $component;
}
add_shortcode('tbhHero', 'tbhHeroShortcode');
Does anyone have any idea of why this is happening?
Well the ul is showing because it's right there in your php
<div class="hero">
<?
$images = decode_shortcode_data($values['images']);
if ($images): ?>
<ul data-simple-slider>
However, on your screenshot from the live version your hero div is different, it looks like this
<div class="hero" id>
The output you are seeing is not being generated by the same file, so either there is some browser/server caching going on and what you are seeing from the live site doesnt reflect the current state of your php, or somehow your php file updates are out of sync between your two environments.
I would guess that the difference between the two sites is in the "edit page" area of whatever page is serving as the home page. I would expect that local version has a shortcode called [tbh-hero] on it with image listed, while the other one doesn't have any images listed or perhaps doesn't have a shortcode on it at all. But, honestly, there are a lot of ways that that code could be implemented within the structure of a given theme.
I would like that my php detects seperatly images (media) and text, from a same wordpress post, in regard to display them in different columns. I am using Bootstrap, and I would like different display of each (text and image) according to the screen size.
Here is a code I have that displays all of the content of my post (image and text) at once, it works perfectly :
<div class="container">
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
I would like the same way of loading content but instead of having just
<?php the_content(); ?>
I would like something like this to place text and image (of same post) in different div class:
<?php the_image(); ?>
AND
<?php the_text(); ?>
I know this is wrong code but I am trying to be clear in my explanation. I need that my client does not touch any of code, also shortcode in Wordpress post. Any input or advice would be very appreciated!
Many thanks!
Thank you for your answer! Lars Beck, you solved my problem!
Here is the code I was looking for:
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img;
}
?>
</div>
There is no way, to separate out images from the content section if they have just been included as part of the content.
Wordpress has featured image functionality built in for you. so you can use the_post_thumbnail() to echo out the image. Maybe this question can help you Wordpress featured image code
If this isn't enough for you and you need more flexibility you might want to look at advanced custom fields plugin - https://www.advancedcustomfields.com/ it makes it easy for you to add your own fields of any type you want.
On a page template I have created a query for fetching 5 posts and on that custom template I have a load more button. Now I want to load more 3 posts on that page when I will click that button. I have seen a tutoial http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/ here where I can create this system but this tutorial shows for the index.php. But I want this system on my custom template. Right now I have this code in my custom template
<?php
/*
Template Name: Normal
*/
get_header();
?>
<?php
$loop = new WP_Query(array(
'post_type' => 'post',
'posts_per_page' => 5
));
?>
<div id="content">
<?php if($loop->have_posts()) : ?>
<?php while($loop->have_posts()) : $loop->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
<div class="load_more">
<button class="load">Load More</button>
</div>
</div>
<?php wp_footer(); ?>
<?php get_footer(); ?>
Now what should I do for loading more posts everytime when I will click on the load more button
That would be impossible without AJAX or a somewhat more involved page reload. One potential workaround would be (if you only have a small number of posts) is to load all the posts and then use CSS to hide the excess ones. Then, use jQuery to add a class (such as .next-to-appear) to the first three hidden posts. Then, use jQuery when your button is clicked to make those three appear, remove the .next-to-appear class and move it to the next set of three. Not elegant but maybe effective.
I'm trying to prepare a blog for microformat, so I need a div to start above the title and close just above the social share buttons (and below meta data, date, author, # of views, etc) - see site for reference: http://www.sara-maria.dk/sundt/laekre-saltede-mandler-med-soedt-tilbehoer/
It is a Wordpress site using CherryFramework with a childtheme and I've tried the following:
adding the opening of the div to title.php and the closing div to footer.php
However, for some reason the div is not using the expected closing div. Instead it is being closed way up higher on the page.
I've created a new functions.php in the childtheme and used the following code:
function my_content($content) {
global $post;
return ''.$content.'';
}
add_filter('the_content', 'my_content');
Problem is that this only wraps it around the post and my PHP skills are not very good, so I haven't been able to customize it to include the title and the meta data.
Anyone who can help me how I best can create the custom div?
Thanks,
Kasper
Update - copying in loop-single.php on request from dojs:
<?php /* Loop Name: Single */ ?>
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
// The following determines what the post format is and shows the correct file accordingly
$format = get_post_format();
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
<!---removed author block--->
<?php
get_template_part( 'includes/post-formats/related-posts' );
comments_template('', true);
endwhile; endif;
?>
Update
If you look at the DOM of your site you can clearly see that the title section is found in it's own file.
Take a look at this HTML
<div class="row">
<div class="span12" data-motopress-type="static" data-motopress-static-file="static/static-title.php">
<section class="title-section">
<h1 class="title-header">
Lækre saltede mandler med sødt tilbehør </h1>
<!-- BEGIN BREADCRUMBS-->
...
<!-- END BREADCRUMBS -->
</section><!-- .title-section -->
</div>
</div>
You would think that you have to add a div to "static/static-title.php", but that would most likely destroy the layout.
To be honest, the structure of this theme seems horrible to me (which means that the theme is shit), however if you are hell bent on using it you need to find the file (which would most likely be "single.php" in your themes root directory) that includes "static/static-title.php" and add a div on the line above that.
Okay, well to really see how this builds up your single post pages you might need to go through the included template parts, but try this to start out with.
<div id="loopTEST">
<?php if (have_posts()) : while (have_posts()) : the_post();
$format = get_post_format();
?>
<div> <!-- This should be above the title -->
<?php
get_template_part( 'includes/post-formats/'.$format );
if($format == '')
get_template_part( 'includes/post-formats/standard' );
?>
</div> <!-- This should be below the post but above the social media buttons -->
<?php
get_template_part( 'includes/post-formats/share-buttons' );
wp_link_pages('before=<div class="pagination">&after=</div>');
?>
</div>
What's the best way to make multiply-page menu?
For example Category1 -> Article -> Full article text?
Not dropdown menu.
There's site example: http://fl.jetcode.lv/service.html
There are on page "Услуги" (Services), list with point's (Обслуживание windows, Подключение интернета, Сборка компьютеров, Чистка вирусов, ...)
When i click one of them (for example 'Обслуживание windows'('Maintenance windows')), i need to get page with points of that category like Установка Windows XP /Vista /7 /8 / W.S 2003,2008 (Installing Windows), Установка Linux (Installing Linux). And each Category have their own list of that text. So what's the best way to make that?
By steps:
1. I'm here: http://fl.jetcode.lv/index.html
2. I click on 'Обслуживание windows', and go to that page http://fl.jetcode.lv/service.html
3. Now i see a list with services on that category
4. Click on 'Полное описание', under 'Установка Windows XP /Vista /7 /8 / W.S 2003,2008'
5. And get to that page http://fl.jetcode.lv/service_inside.html
So how i can structure that's menu with WordPress ?
I've created a Posts with first categories (Category1), then i added it to Appearance->Menus, and get that list on page. Now i can manage their content in post, but it will be hard for end-user. So i trying to make list with second-category in post, and stucked. So can somebody please advice how it correctly/better to do ?
Thanks!
To put this simply,
You won't be needed to change anything to header but in category.php.
Instead of including the <section id="menu"> in the header put it on categories.php then to the usual get post contents and you are done.
The logic isn't in the menu but the flow of how you call each file/element.
This is the sample structure in category.php
<h1 class="post-title"><?php single_cat_title(); ?></h1>
<!-- Display all posts under specific Category -->
<?php while(have_posts()): the_post(); ?>
<hr />
<div id="category-post">
<!-- Display the Post Title -->
<h1><?php the_title(); ?></h1>
<!-- Display the Date & Time of Post -->
<p class="post-date">Posted on <span><?php the_time('F j, Y'); ?></span></p>
<!-- Checks if the post has Featured Image, else will load
the default thumbnail called post-thumb.jpg.
Delete ELSE CLAUSE to remove default thumbnail feature.
-->
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( add_image_size( 'post-thumbnail'), array( 'class' => "post-thumb" ) );
}
else {
echo '<img class="post-thumb wp-post-image" src="';
echo bloginfo( 'stylesheet_directory' );
echo '/_/img/post-thumb.jpg" />';
}
?>
<!-- Display the excerpt if specified IF NOT, will display the
first 20 words in the actual content.
See functions.php for the excerpt lenght setting.
-->
<div class="category-content">
<?php the_excerpt();?>
</div>
<!-- Displays a link to the actual post -->
<a class= "category-read" href="<?php echo get_permalink() ?>">Read</a>
</div>
<?php endwhile; ?>
<!-- Displays the link for NEXT and PREVIOUS entries.
By default, only 10 posts per page can be loaded.
See [Settings > Reading] in Wordpress Panel to configure
-->
<div id='paging'>
<?php next_posts_link('« Older Entries ') ?>
|
<?php previous_posts_link(' Newer Entries »') ?>
</div>