Using Masonry in WordPress

  • learnit

    (@learnit)


    12 years, 4 months ago

    Hi!
    I am developing the theme for my wordpress site using Reverie Theme Framework. I created my own child theme. I am in need of help. What I want to do is to create a masonry layout on my homepage showing unlimited number of posts in an order of latest first and older ones in last. Will somebody help or guide me how to accomplish this task. To get its live example, see Makeuseof Website. The way they have organized their layout on their index/homepage is the thing that I want to apply to my own website and for this purpose I want to use Masonry because I think it is the best way to accomplish this task. If you think that some other better method exist, please tell me about it also. I have tried all tutorials on the web but, couldn’t get any result.
    I also want to make Orbit Slider which will be displayed on top of my posts on homepage only. The slider will show featured posts only. I want it to be like the one displayed on this website OMG!Ubuntu.
    Moreover, I’m a high school student learning web designing. I have a very very little programming experience. So, please teach and help me in a way a student is taught. In this way, I can make my website more nice!
    My website is C-ation.

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    12 years, 4 months ago

    You will find everything I’m going to talk about in the Codex. It is not fully comprehensive, but you will be able to find information on most things you will want to do with WordPress.

    The first thing you should do is create a child theme and/or plugin to contain your custom code. Never edit core files or even your main theme files. You could lose such changes during update cycles.

    The next is learn about enqueueing javascript and jQuery. This is mandatory for any such script. Taking shortcuts and entering link meta tags in your header template will lead to erratic behavior. Thus, when you see instructions for jQuery plugins telling you to do that, don’t. You need to translate their instructions intended for static HTML into something that will work in the WP environment.

    Never load jQuery from outside sources. WP comes with it’s own jQuery files. Unless you really know what you are doing, you must use the WP versions to avoid mysterious conflicts. In fact, WP even has Masonry already. You just need to enqueue it, specifying jquery as a dependency. Initialize it as specified in the installation instructions, except for the meta link portions.

    The Orbit Slider is not part of WP AFAIK, so that library file should be uploaded to your child theme or plugin folder. Properly enqueue that file and follow the instructions for initializing it.

    I’ve warned you off of some of the common mistakes, so hopefully your learning process will go a bit smoother. No doubt there will be frustrations along the way, that is the nature of coding. If you really get stuck and can’t work it out, or just can’t understand a particular concept, come back here and we’ll try to set you straight.

    Most importantly, have fun!

Viewing 1 replies (of 1 total)

The topic ‘Using Masonry in WordPress’ is closed to new replies.