Adding a coin-slider (and content in it) from one WP theme into another
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Skill level:

I know simple html/css but not php. However, I can add/subtract things in the editor of my WP sites with success. I haven't wrapped my head around how php works, though, or how all the WP files relate and call on each other to combine into a certain recipe that creates a certain theme. I don't know how to create/add a new php file in the editor or whether what I want to accomplish even requires it.

What I want:

I want to place only the framed art slideshow portion of the "coin slider" that appears at the top of my site's home page (Phasic theme): http://www.daywithmyhorse.com into the top of my other site's home page (Launch Effect Premium theme): http://www.artofequus.com I want it to appear above the brown opt-in tab area at the top of the page and I would prefer it only show up on the home page.

What I've tried already:

I've added the css in the theme's designer area that allows for custom css, and then I went into the editor and added the full coin slider div code to the top of several files, but the only thing it did was push everything except the background down below the fold. Nothing appeared.

Questions:

1) Am I right in thinking the first step is to add the coin slider css from Phasic into the area where Launch Effect says to add extra css?

2) Am I right in thinking I only need the coin slider code from the Phasic theme and paste it as a complete div into one of the Launch Effect Premium theme files and if so, how do I determine which file to add it to and where? What patterns or clues am I looking for?

3) Can I do this as simply as I think it can be done or do I have to add a new coin slider file with the code and some other intro/outro php code I don't know (and if so, what is it or where do I look to figure it out)?

Thanks!

awarded to alixaxel

Crowdsource coding tasks.

1 Solution


It's a bit hard to provide a definitive (or best-practice / conventioned) answer to your questions without looking at the theme source code, but what I'm about to describe should work no matter what theme you are using:

1) Am I right in thinking the first step is to add the coin slider css from Phasic into the area where Launch Effect says to add extra css?

You need to add the coin-slider CSS styles and the Javascript code, and you probably (I'm not 100% sure) can't do that with the extra CSS area alone. Judging by the HTML output of your website, a trivial way to try and do this would be to use a text editor that has "search in files" functionality (i.e.: Sublime Text). In there, you should search within the Premium Effect theme folder for all files that have the following line of code:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=1.3.2'></script>

And then simply add the coin-slider files below that line (note that you should upload / change the URLs):

<link rel="stylesheet" type="text/css" href="http://www.daywithmyhorse.com/blog/wp-content/themes/phasic/coin-slider-styles.css" media="screen" />
<script type="text/javascript" src="http://www.daywithmyhorse.com/blog/wp-content/themes/phasic/js/coin-slider.min.js"></script>

Then you need to add the following code to load coin-slider, either inline in a script tag or via an URL:

$(function() {
    // Slider
    $('#coin-slider').coinslider({width:780,height:350,opacity:1});
});

And add the styling for the #coin-slider alignment, size, etc... Here's a demo on jsFiddle (source).

Make sure you only have one jQuery instance being loaded (by inspecting the HTML output after).


2) Am I right in thinking I only need the coin slider code from the Phasic theme and paste it as a complete div into one of the Launch Effect Premium theme files and if so, how do I determine which file to add it to and where? What patterns or clues am I looking for?

Same technique here. Search for <div id="launchlite"> (which is the parent element that holds the opt-in) and add the entire <div class="slider"> element code from your other site above. Note that by doing this you're setting the images statically (as in, you can't change them from the backend via a form), but I think that shouldn't be a problem for you. Don't forget that you also need to upload the images to the other vhost.


3) Can I do this as simply as I think it can be done or do I have to add a new coin slider file with the code and some other intro/outro php code I don't know (and if so, what is it or where do I look to figure it out)?

This should work. However, the slider should display on all pages, not just the homepage. For that, you would need to get your hands dirty with PHP (unless the theme is loading a specific file just for the homepage - which, I doubt - in that case you could just add the slider div to that page and get on with it). Usually, the Wordpress helper function is_home() is used to check if the current page is the homepage, so I would start with there (again, by searching for is_home in all files within the theme folder). Possibly, the theme may not be using that function or even displaying conditional content for the homepage (unlikely, I think) - if that's the case you would have to create the condition block in the **appropriate* theme file* (that's a matter seeing which filenames make the most sense, inspecting the code vs. HTML output or, worst case scenario, reading the theme documentation). Such condition would/could look something like:

<?php if (is_home()): ?>
    <div id="slider">
        <!-- HTML here -->
    </div>
<?php endif; ?>
<!--

rest of HTML / PHP code

-->
Thank you for that thorough explanation! Let me try this Tues/Wed when I can focus on it.
Art of Equus almost 6 years ago
@ArtOfEquus: Sure, take your time. =)
alixaxel almost 6 years ago
Still haven't been able to try it but since I can't prioritize it for too long than I want to admit, I'm calling it good. Thank you so much! Peace out.
Art of Equus almost 6 years ago