WordPress.org

Ready to get started?Download WordPress

Forums

Widgets on Pages
[resolved] Widgets Side by Side (19 posts)

  1. Ocher1
    Member
    Posted 1 year ago #

    im trying to put every widget Side by Side, i search all the topics and nothing have a good explanation. my web site

    http://wordpress.org/extend/plugins/widgets-on-pages/

  2. reparde
    Member
    Posted 1 year ago #

    You can make a table using HTML (or even Excel), and then put the shortcodes in the cells.

    That's how I did it.

    Try this code for a 1 row, 3 column table
    All cells are left and top aligned. The cells are almost equal in width.

    Paste it into your WP post when in "Text" view, and then switch back to "Visual" to carry on with the rest of your article or page.

    <table width="100%" border="0" cellpadding="1">
    <tbody>
    <tr>
    <td align="left" valign="top" width="33%">[widgets_on_pages id="1"]</td>
    <td align="left" valign="top" width="33%">[widgets_on_pages id="2"]</td>
    <td align="left" valign="top" width="34%">[widgets_on_pages id="3"]</td>
    </tr>
    </tbody>
    </table>
  3. Ocher1
    Member
    Posted 1 year ago #

    Thank you very much, now one last question that i guess you know, how do i add link to the widgets so when someone click it they direct you to the place i link.

    Thanks again, work perfect!

  4. reparde
    Member
    Posted 1 year ago #

    Sorry Ocher - not entirely sure what you mean?

    If I have understood correctly, then you can drag a "Text" widget into the correct widget area in Appearance > Widgets and add the code in there.

    If I have misunderstood... please explain in a bit more detail.

    Remember that you need to have upped the number of "Widgets on Pages" in the settings. I don't bother renaming mine (which is why in the code it says such things as widgets_on_pages id="1")

    You can see mine on http://www.spainbuddy.com

    I need to work out how to make the height of each cell fixed, as I don't like the way it displays on my site. I tried adding height="300" but it didn't work. I should start a new thread perhaps.

    Elle xx

  5. toddhalfpenny
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Ocher, you shouldn't really be using tables for layout... presentation/layout should be achieved with CSS (tables are for tabular data).

    Also, have you got a link please so I can give you some precise CSS?

  6. Ocher1
    Member
    Posted 1 year ago #

    Reparde what i means is how you link the imagine? when i went to your page, i click to one of the pictures you have and link me to another page, thats what im trying to do & Toddhalfpenny here the link

  7. Ocher1
    Member
    Posted 1 year ago #

  8. Ocher1
    Member
    Posted 1 year ago #

  9. toddhalfpenny
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks Ocher.

    So I see you're using the Widgets on Pages template tags... in your case I think you'd perhaps be better of just having one Widgets on Pages sidebar and no table. The each widget could be laid out using CSS as explained here. To get the images linking you need to just use basic html linking. See the w3chools site for starters.

    I hope all this helps.

  10. Ocher1
    Member
    Posted 1 year ago #

    Thanks and nice tutorial, but where do i copy paste those CSS?

  11. toddhalfpenny
    Member
    Plugin Author

    Posted 1 year ago #

    The CSS could be placed at the end of your theme's style.css

  12. Ocher1
    Member
    Posted 1 year ago #

    thanks, all the code or just someone? & im sorry im not a web developer im just another person trying to be success on life. thanks again

  13. toddhalfpenny
    Member
    Plugin Author

    Posted 1 year ago #

    Only include the CSS that is relevant for you. I am not saying that the blog post code can be copied exactly but it gives you an idea on what/how some things can be achieved.

    I suggest having a play around and doing some reading/learning... that way success my come.

  14. Ocher1
    Member
    Posted 1 year ago #

    Thanks Todd, but its doesn't work!

  15. toddhalfpenny
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Ocher,

    I think this will work but you need the correct code for your site.
    As I said... have a play and read up.

    Feel free to post a new link if you're still having issues.

    Ta,
    Todd

  16. adriesilva
    Member
    Posted 1 year ago #

    hi there, i can't figure out how to align the widgets horizontally.

    i'm using the widgets on pages plugin and there is no option for alignment.

    I would like to actually create more sidebars, place them next to each other horizontally, then add just one text widget to each..

    thank you, anything helps

  17. adriesilva
    Member
    Posted 1 year ago #

    okey i created more widgets but the css code you have didn't make them horizontal.. still trying.

  18. adriesilva
    Member
    Posted 1 year ago #

    I decided to get the "easy column" plug in it works great and can be made to respond to mobile and tablet devices with this code:

    @media (max-width: 600px) {
    .wpcol-one-third {
    position: relative!important;
    }
    .wpcol-one-third {
    float: none!important;
    width: auto!important;
    }
    }

  19. IAmTam
    Member
    Posted 1 year ago #

    Ocher,

    You could also use the Jetpack "images" plugin. It makes an image (that you choose and upload) into a link.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic